数组 Array,可以用来将多条数据通过 [] 包裹起来组成一个整体。例如:
\1. var arr = [100, 'hello', true, 200];
说明:
· 元素(数组项):数组中的每一条数据,都可以叫做数组的“元素”,也可以叫做“数组项”;
· 下标(索引):数组中的每一条数据在数组中都有一个对应的位置,我们通过数字来表示每一条数据位置。但是要注意,数字从 0 开始取值。这个用来表示位置的数字,我们可以叫做数组的“下标”或者数组的“索引”。
一、数组的特点· 无类型限制:数组中可以保存任意类型的数据;
· 无数量限制:数组中可以保存任意数量的数据;
· 动态数组:数组创建完成后,后续还可以继续对数组中的元素进行增加、修改、删除等操作;
二、数组的创建数组的创建分为两种形式:字面量方式和构造函数方式。
1. 字面量方式 var变量名= [ ];
2.构造函数方式 var变量名=newArray( );
三、数组初始化在创建数组时,就保存数据到数组中:
var变量名= [数据一,数据二....]
四、数组的下标(索引)我们可以通过数组的下标,找到数组中对应位置的数据,然后对数据进行增加,删除,修改,查看等操作。
1、查看增加 1.vararr= ['a', 'b', 'c'];
2.
3.arr[3] ='d';
4.arr[5] ='e';
5.
6.console.log(arr);
3、修改 1.vararr= ['a', 'b', 'c'];
2.
3.arr[0] ='d';
4.
5.console.log(arr);4、删除五、数组的长度每一个数组身上,都有一个length的属性,用来表示数组的长度(数组中元素的个数)
1.// 获取数组的长度
2.varlen=arr.length;
3.console.log(len);
4.
5.// 修改数组的长度
6.arr.length=0;
六、数组的遍历遍历,依次访问数组中的每一个元素。
1.for(vari=0; i<数组名.length; i++) {
2. console.log(数组名[i]);
3.}七、多维(二维)数组数组中的元素也可以是数组,这样的形式的数组,我们叫做多维数组
有几维就遍历几次
1.vararr= [
2. ['a', 'b'],
3. ['c', 'd', 'e']
4.];
多维数组的遍历,根据数组嵌套的层数,来嵌套for循环实现每一个元素的遍历:
1.for(vari=0; i<数组名.length; i++) {
2. for(varj=0; j<数组名[i].length; j++) {
3. console.log(数组名[i][j]);
4. }
5.}练习:1、求出给定数组中所有数字的和,以及所有奇数和、偶数和
vararr= [1,2,3,4,5,6,7,7,8]
varsum=0
varoddSum=0;
varevenSum=0;
for(leti=0;i sum+=arr[i] if(arr[i] %2===0 ){ evenSum+=arr[i] }else{ oddSum+=arr[i] } } console.log(sum ,evenSum,oddSum) 2、找最大值和最小值 vararr= [98,6,9,2,65,97,22] letmax=arr[0]; letmin=arr [0] for(leti=1;i if(max max=arr[i] } } 3、找出数组中重复的值(假设只有一组重复的值) vararr= [1,2,3,4,5,1,6,7,8,9] a: for(leti=0;i b: for(letj=i+1;j if(arr[i] ==arr[j]){ console.log(arr[i]) breaka; //給for循环起名字来停止循环 breakb; } } }4、多用户登录注意这个题的关键是第二个if要写在第二个循环外面,否则只能暂停第二个循环,第一个循环仍然没有停止 varusers= [ ['1','1'], ['2','2'], ['3','3'], ] varflag=false//默认登陆失败 开关变量:如果刚开始设置的是true,则满足条件的哪里需要设置fales;如果刚开始设置的是false,则满足条件哪里需要将满足条件的那里设置为true,不满足的哪里设置为false; for(leti=3; i>0;i--){ varusername=prompt('请输入用户名'); varpassword=prompt('请输入密码'); //依次判断每一个账号是否可以登录成功 for(varj=0;j if(users[j][0] ===username&&users[j][1] ===password){ flag=true i=-1; alert('登陆成功') break; } } //等到循环全部结束,将每一个用户都判断后,才能下结论说用户登陆失败 if(!flag){ alert(`登录失败,你还有${i-1}次机会`); } }5、数组的排序不管采用那种排序,核心都是将两个数进行比较,如果顺序不对,就交换位置 1. 选择排序: 将每一个数依次和它后面的所有数进行比较 vararr= [1, 2, 3, 5, 6, 7, 8, 4] varmax=arr[0] for (leti=0; i for (letj=i+1; j if (arr[i]>arr[j]) { max=arr[j] arr[j] =arr[i] arr[i] =max } } } 2.冒泡排序 将相邻的两个数进行比较。 外侧循环控制比较的轮数,内侧循环控制每一轮相邻两个数比较的次数。 vararr= [1, 2, 3, 5, 6, 7, 8, 4] varmax ; for (leti=1; i for (letj=0; j if (arr[j]>arr[j+1]) { max=arr[j] arr[j] =arr[j+1] arr[j+1] =max } } } 数组的常见方法(API)一、操作方法方法 参数(小括号中的值) 说明 是否改变原数组 返回值 push() 要添加的数据,可以有多个,每个数据之间用 , 隔开 向数组末尾添加元素 是 数组长度 pop() 无 删除数组中最后一个元素 是 删除的元素 unshift() 要添加的数据,可以有多个,每个数据之间用 , 隔开 向数组开头添加元素 是 数组长度 shift() 无 删除数组中第一个元素 是 删除的元素 splice() 1. 只有一个参数:修改后的长度 2. 两个参数:下标和删除的元素个数 3. 三个及以上:下标、删除元素的个数、新增的元素 1. 修改数组长度 2. 删除任意位置元素 3. 在任意位置新增元素 4. 修改任意位置元素 是 删除的元素 1.vararr= ['a', 'b', 'c', 'd', 'e']; 2.console.log('原数组:', arr); 3. 4.varresult=arr.push('a', 'b'); 5.varresult=arr.pop(); 6.varresult=arr.unshift('hello', 'world', 'e'); 7.varresult=arr.shift(); 8.varresult=arr.splice(0, 1, 'hello'); 9. 10.console.log('操作后的数组:', arr); 11.console.log('返回值:', result);练习数组去重 vararr= ['a','b','b'] for(leti=0;i for(letj=i+1;j if(arr[i] ===arr[j]){ arr.splice(j,i); j--; } } } console.log(arr) 二、查找方法 参数(小括号中的值) 说明 是否改变原数组 返回值 indexOf() 需要查询的元素 查询元素在数组中第一次出现的下标 否 下标 没找到则返回 -1 lastIndexOf() 需要查询的元素 查询元素在数组中最后一次出现的下标 否 下标 没找到则返回 -1 includes() 需要查询的元素 查询元素在数组中是否存在 否 布尔值 findIndex () 返回符合条件的元素的索引 查找符合条件的元素的索引 下标 三、排序方法方法 参数(小括号中的值) 说明 是否改变原数组 返回值 reverse() 无 反转数组元素的顺序 是 倒序后的新数组 sort() function(a, b) { return a - b } function(a, b) { return b - a } 1. a - b 从小到大排序 2. b - a 从大到小排序 是 排序后的新数组 1.vararr= [10, 12, 5, 8, 15, 4, 9, 0]; 2.console.log('原数组:', arr); 3. 4.varresult=arr.reverse(); 5.varresult=arr.sort(function(a, b) { 6. returnb-a; 7.}) 8.console.log('操作后的数组:', arr); 9.console.log('结果:', result); 练习:根据年龄排序: varstudents= [ ['张三', 30], ['李四', 34], ['王五',67], ['马冬梅', 89], ] students.sort(function (a, b) { returna[1] -b[1] //a,b分别取得是students数组,但里面还有小数组,所以得加下标。 }) console.log(students) 四、类型()转换方法 方法 参数(小括号中的值) 说明 是否改变原本的值 返回值 join() 任意字符串 将数组元素按照指定字符串(例如’-‘,’+‘)拼接成一个大字符串 否 拼接后的字符串 split() 任意字符串 将字符串按照指定的字符拆分成一个数组 否 拆分后的新数组 1.// 数字转字符串 2.vararr= [1, 2, 3, 4]; 3.console.log('原数组:', arr); 4.varresult=arr.join(''); 5.console.log('操作后的数组:', arr); 6.console.log('结果:', result); // 7. 8.// 字符串转数组 9.varstr='hello'; 10.console.log('原字符串:', str); 11.varresult=str.split('e'); 12.console.log('操作后的字符串:', str); 13.console.log('结果:', result); //['h' 'llo']五、数组的拼接和截取方法 参数(小括号中的值) 说明 是否改变原本的数组 返回值 concat() 需要合并的数组或值,多个数据之间用 ,隔开 可以将多个数组或值合并成一个新的数组 否 合并后的新数组 slice() 1. 只有一个参数:开始截取的下标(包含) 2. 两个参数:开始截取的下标(包含)、结束截取的下标(不包含) 说明:可以为负数 截取数组中的某一个部分 否 截取后的新数组 数组的循环方法一、for循环 1.vararr= ['a', 'b', 'c', 'd']; 2.for(vari=0; i 3. console.log(arr[i]); 4.} 优化版的for循环 1.vararr= ['a', 'b', 'c', 'd']; 2. 3.for (vari=0, len=arr.length; i 4. console.log(arr[i]); 5.} 二、for ofES6中ES6 中新增了 for of 用来遍历数组。 **其中 item 是任意变量名,arr 是要遍历的数组名。 1.vararr= ['a', 'b', 'c', 'd']; 2. 3.for (varitemofarr) { 4. console.log(item); 5.} 三、数组的循环方法1. forEach() 其中 item和index可以换其他名字; 1.vararr= ['a', 'b', 'c', 'd']; 2.arr.forEach(function (item, index) { 3. console.log(`当前元素${item},对应的下标${index}`); 4.}) 注意: forEach() 循环中 不能使用 break 和 continue 。 forEach就是一个单纯的遍历没有其他功能,只是能拿到下标和数组里面的元素。 2、map( )注意:如果不加return则返回的是undefined vararr= ['a''b''c''d'] arr.map(function(item,index){ console.log(`当前元素${item},对应的下标${index}`); returnitem*2; }) 8.varresult=arr.map(function (item, index) { 9. console.log(`当前元素${item},对应的下标${index}`); 10. if (item>20) { 11. returnitem*2; 12. } else { 13. returnitem; 14. } 15.}); console.log(result); 说明 map( )除了可以正常遍历数组,获取到数组的元素和下标外。还有一个功能,在map的方法中,可以通过 return新数据得到一个新数组, 需要把数组渲染成HTML节点,优先考虑map和join(‘ ’) 适合创建一个与原始数组元素一一对应的新数组 特点 新数组的长度和原数组的长度一致; 新数组的数据和原数据的数据可以不一致; 3、filter( ) 1.vararr= [10, 20, 30, 40]; 2. 3.varresult=arr.filter(function (item, index) { 4.console.log(`当前元素${item},对应的下标${index}`); 5.returnitem>20; 6.}) 7.console.log(result); 说明 filter()可以正常的遍历数组,获取数组的元素和下标; 通过return筛选条件得到一个满足条件的新数组; filter返回的是布尔值。 item和index尽量不要改变名字。 一般很少在filter里面写if条件,return本身就是一个判断条件 一般去重用filter( ). filter的妙用 可以在filter里面return一个true,代表将遍历的结果返回给新数组,若是false则代表不降遍历的结果发回给新数组 特点 新数组和原数组的长度可以不一致; 新数组的数据一定是来源于原数组; filter和map的区别 filter不会改变原数组的数据 map会改变原数组的数据 练习:用 filter 方法实现数组的去重; vararr= ['a','b','c','a','b','c'] varnewArr=arr.filter(function(item,index){ returnarr.indexOf(item) ===index; //当item= 'a'时,'a'的下标为0,当循环到第二次"a"时,因为indexOf返回的是元素第一次出现的下标,而此时index已经为3,所以return返回的是false,所以第二个"a"不会返回到新数组中。 }); console.log(newArr); 给出以下数组(数组中的第一个元素是班级名称,第二个元素是班级中的学生姓名): 要求: · 找到所有的班级名称,组成一个新数组 ['Web01', 'Web02', 'Java01', 'Java02']; · 找到所有班级名称以及班级学生人数,组成新数组 [['Web01', 2], ['Web02', 1], ['Java01', 3], ['Java02', 0]]; varclassesData= [ ['Web01', ['张三', '李四']], ['Web02', ['张三']], ['Java01', ['张三', '李四', '王五']], ['Java02'] ] varclassesData= [ ['Web01', ['张三', '李四']], ['Web02', ['张三']], ['Java01', ['张三', '李四', '王五']], ['Java02'] ] varnewArr=classesData.map(function(item,index){ //因为map是改变原数组的数据的,而filter不改变原数组的数据,所以采用map( ) returnitem[0]; //这里需要注意的是item[0]取的是大数组里的第一个元素,item[1]取的是大数组里的第二个元素,看到这种重叠的数组先把他们分解了。 }) console.log(newArr) //找到所有班级名称以及班级学生人数,组成新数组 [['Web01', 2], ['Web02', 1], varnewClass=classesData.map(function(item,index){ return [item[0],item[1] ?item[1].length:0] }) console.log(newArr) console.log(newClass) 、数组扁平化。将以下二维数组变成一维数组 1.vararr= ['a', 'b', ['c', 'd'], 'e', ['f']]; 2.变成 ['a', 'b', 'c', 'd', 'e', 'f'] //方法一:创建一个新数组[],遍历旧数组时将旧数组中元素添加到新数组中,添加前需要对元素进行判断。 arr.forEach(function (item, index) { //判断item是不是小数组 if (typeofitem==='object') { for (varsubItemofitem) { newArr.push(subItem) } } else { newArr.push(item) } }) console.log(newArr) //方法二; for(varitemofarr){ newArr=newArr.concat(item) } console.log(newArr) //方法三:ES6中给数组中增加了flat() arr.flat() //括号里填写解数组嵌套的层数,当不确定多少层,填写Infinity 4、every( )和some every( )和some()都可以遍历数组,同时,这两个方法执行完成后,会得到一个布尔值 var arr= [10,20,30,40,50,60] varresult= arr.every(function(item,index){ returnitem=>10 }) console.log(result); -------------------------------------------------------------------- varSomeresult= arr.some(function(item,index){ returnitem>10 }) console.log(Someresult); 结论 every( ):一假得假 some( ):一真得真 varusers= [ ['1', '1'], ['2', '2'], ['3', '3'], ] varusername=prompt('请输入用户名') varpassword=prompt('请输入密码') varisLogin= users.some(function(item,index){ returnitem[0] ===username&&item[1] ===password }) // } console.log(isLogin) 5、reduce( ) vararr= [10,20,[30,40]] varresult=arr.reduce(function(item,next){ returnitem.concat(next) },[ ]) console.log(result) //[10,20,30,40,] reduce( ): reduce常用于 数组元素求和 数组扁平化 四、总结 1、forEach 可以遍历得到元素和下标 不能使用break和contionue 2、map( )可以遍历得到元素和下标 可以得到新数组,且与原数组长度一致,内容不一致 3、filter( )可以遍历得到元素和下标 可以得到新数组,且与原数组长度不一致,内容一致 4、every()可以遍历得到元素和下标 可以得到布尔值,一假得假 5、some()可以遍历得到元素和下标 可以得到布尔值,一真得真 6、reduce()可以遍历得到元素