JS 中数组的常用方法——SevenOne

一、push()

1. 说明：push() 方法用于给数组尾部添加一条或多条数据。
2. push() 方法无参数时返回数组的长度。

   var arr0 = [1,2,3,4,5];
   console.log("数组长度为："+arr0.push());
   

   输出结果： 数组长度为：5
3. push() 方法有一个参数时，表示将这个参数添加到数组末尾。

   var arr0 = [1,2,3,4,5];
   arr0.push(6);
   console.log("添加一条数据后的数组：",arr0);
   

   输出结果： 添加一条数据后的数组: [1,2,3,4,5,6]
4. push() 方法有多个参数时，表示将多个参数添加到数组末尾。

   var arr0 = [1,2,3,4,5];
   arr0.push(6,7,8);
   console.log("添加多条数据后的数组：",arr0);
   

   输出结果： 添加多条数据后的数组: [1,2,3,4,5,6,7,8]
5. push() 方法的参数为数组或对象时，表示将数组或对象添加到数组末尾。

   var arr0 = [1,2,3,4,5];
   arr0.push([1,2,3]);
   console.log("添加数组后的数组：",arr0);
   

   输出结果： 添加多条数据后的数组: [1,2,3,4,5,[1,2,3]]

   var arr0 = [1,2,3,4,5];
   arr0.push({name:"SevenOne",age:21});
   console.log("添加数组后的数组：",arr0);
   

   输出结果： 添加多条数据后的数组: [1,2,3,4,5,{name:SevenOne,age:21}]

二、unshift()

1. 说明：unshift() 方法用于给数组首部添加一条或多条数据，添加成果后，后面的数据下标依次向后推。
2. unshift() 方法无参数时返回数组的长度。

   var arr1 = [1,2,3,4,5];
   console.log("数组长度为："+arr1.unshift());
   

   输出结果： 数组长度为：5
3. unshift() 方法有一个参数时，表示将这个参数添加到数组首部。

   var arr1 = [1,2,3,4,5];
   arr1.unshift(0);
   console.log("添加一条数据后的数组：",arr1);
   

   输出结果： 添加一条数据后的数组：[0,1,2,3,4,5]
4. unshift() 方法有多个参数时，表示将这些参数添加到数组首部。

   var arr1 = [1,2,3,4,5];
   arr1.unshift(-2,-1,0);
   console.log("添加多条数据后的数组：",arr1);
   

   输出结果： 添加一条数据后的数组：[-2,-1,0,1,2,3,4,5]
5. unshift() 方法参数为对象或数组时，同 push() 方法，只是位置不同。

三、pop()

1. 说明：pop() 方法用于删除数组中最后一项数据，返回值为被删除的数据。
2. pop() 方法无需带参数。

   var arr2 = [1,2,3,4,5];
   var date = arr2.pop();
   console.log("删除最后一项数据后的数组：",arr2);
   console.log("被删除的数据是：",date);
   

   输出结果：
   删除最后一项数据后的数组： [1, 2, 3, 4]
被删除的数据是： 5
3. 当数组为空时，使用 pop() 方法的返回值为 undefined

   var arr2 = [];
   var date = arr2.pop();
   console.log("被删除的数据是：",date)
   

   输出结果： 被删除的数据是： undefined
4. 利用 pop() 与 push() 方法将数组剪切后逆向粘贴。

   var arr3 = [9,8,7,6,5,0,-1,-2];
   var arr4 = [];
   console.log("原数组：",arr3);
   var bool = arr3.pop();
   while(bool != undefined)
   {
       arr4.push(bool);
       bool = arr3.pop();
   }
   console.log("剪切后的数组：",arr3);
   console.log("逆向粘贴后的数组：",arr4);
   

   输出结果：
   原数组：[9, 8, 7, 6, 5, 0, -1, -2]
剪切后的数组： []
逆向粘贴后的数组： (8) [-2, -1, 0, 5, 6, 7, 8, 9]

四、shift()

1. 说明：shift() 方法用于删除数组的第一个数据，函数返回值是被删除的数据。
2. 同 pop() 方法，shift() 无参数。

   console.log("例 5：shift()");
   var arr5 = [1,2,3,4,5];
   var date1 = arr5.shift();
   console.log("删除第一项数据后的数组：",arr5);
   console.log("被删除的数据是：",date1);
   

   输出结果：
   删除第一项数据后的数组： (4) [2, 3, 4, 5]
被删除的数据是： 1

五、join()

1. 说明：将数组转换成字符串，并以参数作为分隔。无参数是同 arr.toString()
2. join() 方法无参数时：

   var arr = [1,2,3,4,5]
   console.log("没有参数：",arr.join());
   

   输出结果： 没有参数： 1,2,3,4,5
3. join() 方法参数为 # 时：

   var arr = [1,2,3,4,5]
   console.log("参数为 # :",arr.join("#"));
   

   输出结果： 参数为 # : 1#2#3#4#5
4. join() 方法参数为空字符串时：

   var arr = [1,2,3,4,5]
   console.log("参数为空字符串时：",arr.join(""));
   

   输出结果： 参数为空字符串时： 12345

六、concat()

1. 说明：concat() 方法用于连接两个或多个数组。
2. concat() 参数为空时，相当对数组的深拷贝。

   var arr1 = [9,8,7,6,5];
   var arr2 = arr1.concat();
   // 此处修改 arr1 中的值，查看是否是深拷贝
   arr1[0] = 10;
   console.log("arr1: ",arr1);
   console.log("arr2: ",arr2);
   

   输出结果：
   arr1: [10, 8, 7, 6, 5]
arr2: [9, 8, 7, 6, 5]
3. concat() 有参数时相当于将参数拼接到原数组的尾部后赋给新数组，原数组不变。

   var arr3 = [1,2,3,4,5];
   var arr4 = arr3.concat(6,7,8,9);
   console.log("arr3: ",arr3);
   console.log("arr4: ",arr4);
   

   输出结果：
   arr3: [1, 2, 3, 4, 5]
arr4: [1, 2, 3, 4, 5, 6, 7, 8, 9]
4. concat() 参数为一个数组时，相当于将两个数据链接在一起。

   var arr5 = [1,2,3];
   var arr6 = arr5.concat([4,5,6]);
   console.log("arr5: ",arr5);
   console.log("arr6: ",arr6);
   

   输出结果：
   arr5: [1, 2, 3]
arr6: [1, 2, 3, 4, 5, 6]

七、splice()

1. 说明：splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

2. splice() 方法没有参数时表示创建一个新的空数组。

   var arr7 = [0,1,2,3,4,5,6,7,8,9];
   var arr8 = arr7.splice();
   console.log("arr7: ",arr7);
   console.log("arr8: ",arr8);
   

   输出结果：
   arr7: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arr8: []

3. splice() 方法一个参数 a 时表示删除下标为 a 以后的元素。

   var arr7 = [0,1,2,3,4,5,6,7,8,9];
   var arr9 = arr7.splice(6);
   console.log("arr7: ",arr7);
   console.log("arr9: ",arr9);
   

   输出结果：
   arr7: [0, 1, 2, 3, 4, 5]
arr9: [6, 7, 8, 9]

4. splice() 方法参数为 0 时表示将原数组清空，原数组的所有元素添加到新数组中。

   var arr7 = [0,1,2,3,4,5]
   var arr10 = arr7.splice(0);
   console.log("arr7: ",arr7);
   console.log("arr10: ",arr10);
   

   输出结果：
   arr7: []
arr10: (6) [0, 1, 2, 3, 4, 5]

5. splice() 方法参数有两个值时 splice(a,b) 表示从下标为 a 的元素开始，删除 b 个元素。

   var arr10 = [0,1,2,3,4,5]
   var arr11 = arr10.splice(0,2);
   console.log("arr10: ",arr10);
   console.log("arr11: ",arr11);
   

   输出结果：
   arr10: (4) [2, 3, 4, 5]
arr11: (2) [0, 1]

6. splice() 方法参数有三个值时 splice(a,b,c) 表示从下标为 a 的元素开始，删除 b 个元素后将数据 c 插入数组的首位。

   var arr10 = [2,3,4,5]
   var arr12 = arr10.splice(0,1,-1);
   console.log("arr10: ",arr10);
   console.log("arr12: ",arr12);
   

   输出结果：
   arr10: [-1, 3, 4, 5]
arr12: [2]

7. splice() 方法参数有多个值时 splice(a,b,……) 表示从下标为 a 的元素开始，替换 b 个元素，后面的参数表示替换的数据。

   var arr10 = [-1,3,4,5]
   var arr13 = arr10.splice(0,2,-1,0);
   console.log("arr10: ",arr10);
   console.log("arr13: ",arr13);
   

   输出结果：
   arr10: [-1, 0, 4, 5]
arr13: [-1, 3]

八、slice()

1. 说明：截取数组，返回值为一个数组，数组中元素是从原数组中截取的数据。
2. 没有参数时相当于对原数组进行复制。

   var ar0 = [0,1,2,3,4,5,6,7,8,9];
   var ar1 = ar0.slice();
   console.log("ar0: ",ar0);
   console.log("ar1: ",ar1);
   

   输出结果：
   ar0: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
ar1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
3. 一个参数 a 时表示从下标为 a 的元素开始截取到最后。a = 0时相当于复制数组。

   var ar0 = [0,1,2,3,4,5,6,7,8,9];
   var ar2 = ar0.slice(5);
   console.log("ar0: ",ar0);
   console.log("ar2: ",ar2);
   

   输出结果：
   ar0: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
ar2: [5, 6, 7, 8, 9]
4. 参数有两个值时 slice(a,b) 表示从下标为 a 的元素开始截取，截取到下标为 b 的元素。

   var ar0 = [0,1,2,3,4,5,6,7,8,9];
   var ar3 = ar0.slice(1,4);
   console.log("ar0: ",ar0);
   console.log("ar3: ",ar3);
   

   输出结果：
   ar0: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
ar3: [1, 2, 3]

九、高阶函数

1. filter()
   （1）返回值必须为布尔值。
   （2）返回值为 true 时：函数内部会将这次回调的值赋给新的数组。
   （3）返回值为 false 时：函数内部会将这次回调的值过滤掉。

   案例需求：将 arr1 中大于 10 的数赋给新数组。

   let arr1 = [5,8,9,6,5,12,15,48,9,3];
   let arr2 = arr1.filter(function(n)
   {
   	return n > 10
   })
   console.log(arr2);
   

   输出结果： [12,15,48]

2. map()
   （1）对数组内部数据进行操作。
   （2）将返回值赋给一个新的数组。

   案例需求：将 arr2 中的数据扩大两倍

   let arr2 = [12,15,48];
   let arr3 = arr2.map(function(n)
   {
   	return n*2;
   })
   console.log(arr3);
   

   输出结果： [24,30,96]

3. reduce()：对数组中所有内容进行汇总

   案例需求：将 arr3 中的数据累加起来

   let arr3 = [24,30,96]
   let sumArr = arr3.reduce(function(preValue,n)
   {
   	return preValue + n
   },0)
   console.log(sumArr);
   

   输出结果： 150

   计算过程：

   （1）第一次：n = 24; preValue = 0; return 24;
   （2）第二次：n = 30; preValue = 24; return 54;
   （3）第三次：n = 96; preValue = 54; return 150;

   （4）第一次进来时，preValue 的初始值为 reduce 的第二个参数 0；n 的值为数组的第一项
   （5）第二次进来时，preValue 的值为上一次 return 出去的值。

4. 使用链式编程，完成上面的三个需求。

   let arr01 = [5,8,9,6,5,12,15,48,9,3];
   let arrNum1 = arr01.filter(function(n)
   {
   	return n > 10;
   }).map(function(n)
   {
   	return n * 2;
   }).reduce(function(preValue,n)
   {
   	return preValue + n;
   },0)
   console.log(arrNum1);
   

   输出结果： 150

5. 利用箭头函数完成三个需求

   let arr02 = [5,8,9,6,5,12,15,48,9,3];
   let arrNum2 = arr02.filter(n => n > 10).map(n => n * 2).reduce((pre,n) => pre + n);
   console.log(arrNum2);
   

   输出结果： 150