js的数组方法整理(26)

一、数组有哪些方法？
1.数组创建与初始化
Array()构造函数：用于创建新数组

1. const arr1 = new Array() //创建空数组
2. const arr2 = new Array(5) //创建包含个空位的数组
3. const arr3 = new Array(1,2,3) //创建包含元素1，2，3的数组

复制代码

Array.of()：创建包含任意数量参数的新数组

1. const arr = Array.of(1, 2, 3); // [1, 2, 3]

复制代码

Array.from()：从类数组对象或可迭代的对象创建新数组

1. const str = 'hello';
2. const arr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

复制代码

2.数组元素操作
push()：在数组末尾添加一个或多个元素，并返回新的长度

1. const arr = [1, 2, 3];
2. const newLength = arr.push(4, 5); // arr 变为 [1, 2, 3, 4, 5]，newLength 为 5

复制代码

pop()：移除数组的最后一个元素，并返回该元素

1. const arr = [1, 2, 3];
2. const lastElement = arr.pop(); // arr 变为 [1, 2]，lastElement 为 3

复制代码

unshift()：在数组开头添加一个或多个元素，并返回新的长度

1. const arr = [1, 2, 3];
2. const newLength = arr.unshift(0); // arr 变为 [0, 1, 2, 3]，newLength 为 4

复制代码

shift()：移除数组的第一个元素，并返回该元素

1. const arr = [1, 2, 3];
2. const firstElement = arr.shift(); // arr 变为 [2, 3]，firstElement 为 1

复制代码

splice()：可用于添加、删除或替换数组中的元素。splice()会改变原数组。

1. /*
2.     数组.splice(n,m,x):对数组进行增/删/改操作
3.     @params:
4.         n:从索引n开始（必填）
5.         m:向后截取m个元素，没有填写则默认截取到数组末尾（非必填）。
6.         x:代替截取掉的部分（非必填）
7.     @return:将截取到的部分以新数组的方式返回
8. */
10. //增：
11. let arr = [0,1,2,3,4,5,6],
12.     newArr = arr.splice(arr.length-1,0,7); //从数组末尾开始向后截取0个元素，并在此插入新元素7
13. console.log(newArr,arr)// => [],[0,1,2,3,4,5,7,6]
15. //删：
16. let arr2 = [0,1,2,3,4,5,6],
17.     newArr2 = arr2.splice(0,1);//从索引0开始向后截取1个元素
18. console.log(newArr2,arr2)// => [0],[1,2,3,4,5,6]
20. //改：
21. let arr3 = [0,1,2,3,4,5,6],
22.     newArr3 = arr3.splice(0,1,0.5)//从索引0开始向后截取1个元素，并在此插入元素0.5
23. console.log(newArr3,arr3)// => [0],[0.5,1,2,3,4,5,6]

复制代码

slice()：返回一个新的数组，包含从开始到结束（不包括结束）的元素

1. /*
2.     数组.slice(n,m)：查询数组
3.     @params:
4.         n:从索引n开始（必填）
5.         m:查询到索引m为止，不包含m，如果m不填或大于arr.length，默认查询到末尾（非必填）
6.     @return:将查找到的元素以新数组的方式返回，如果没有查找到，返回空数组
7. */
9. //1.当n和m都为正整数：
10. let arr = [0,1,2,3,4,5],
11.     newArr = arr.slice(0,arr.length);//从索引0开始查询到数组末尾的后一项（复制数组）
12. console.log(newArr,arr)// => [0,1,2,3,4,5],[0,1,2,3,4,5]
14. //2.当n和m为小数时，会先通过parseInt转换为整数在进行查询操作
15. let arr2 = [0,1,2,3,4,5],
16.     newArr2 = arr2.slice(1.9,2.1);//从索引1开始查询到索引为2的元素
17. console.log(newArr2,arr2)// => [1],[0,1,2,3,4,5]
19. //3.当n是负数时，m不能大于n 否则返回空数组；表示从数组的末尾开始查找，数组最后一项索引为-1，越往前越小（原正数索引-arr.length=当前的负数索引）
20. let arr3 = [0,1,2,3,4,5],
21.     newArr3 = arr3.slice(-3,-1);//从索引-2开始向前查找到索引为-1的元素
22. console.log(newArr3,arr3);// => [3,4],[0,1,2,3,4,5],
24. //4.当n或m不是有效数字时，先通过parseInt转换为有效数字，转换为NaN则默认为0
25. let arr4 = [0,1,2,3,4,5],
26.     newArr4 = arr4.slice('1.9','哈哈哈');//从索引1开始向后查询到索引为0的元素，返回空数组
27. console.log(newArr4,arr4)// => [],[0,1,2,3,4,5]
29. let arr5 = [0,1,2,3,4,5],
30.     newArr5 = arr4.slice('1.9','3.1');//从索引1开始向后查询到索引为3的元素，返回空数组
31. console.log(newArr4,arr4)// => [1,2],,[0,1,2,3,4,5]

复制代码

3.数组查找与过滤
indexOf()：返回指定元素在数组中第一次出现的索引，如果不存在则返回-1

1. const arr = [1, 2, 3, 2];
2. const index = arr.indexOf(2); // index 为 1

复制代码

lastIndexOf()：返回指定元素在数组中最后一次出现的索引，如果不存在则返回-1

1. const arr = [1, 2, 3, 2];
2. const lastIndex = arr.lastIndexOf(2); // lastIndex 为 3

复制代码

includes()：判断数组是否包含指定元素，返回布尔值

1. const arr = [1, 2, 3];
2. const hasTwo = arr.includes(2); //  为 true

复制代码

find()：数组的循环，查找符合条件的值，并打断循环返回找到的值

1. let arr = ['张三','李四','王五','马六'];
2. let str = arr.find(item => item == '李四');
3. console.log(str); // -> '李四'

复制代码

findIndex()：返回数组中满足测试的函数的第一个索引，否则返回-1

1. const arr = [1, 2, 3, 4, 5];
2. const foundIndex = arr.findIndex(item => item > 3); // foundIndex 为 3

复制代码

filter()：
(1) 同forEach功能；
(2) filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）

1. // 注意：filter(callback);callback默认有三个参数，分别为value，index，self。
2. let arr = [1,2,3,4,5,6];
3. let arr1 = arr.filter((item,index,self)=>{
4.     console.log(item) // -> 1,2,3,4,5,6
5.     console.log(index) // -> 0,1,2,3,4,5
6.     console.log(self) // -> [1,2,3,4,5,6]
7.     return item > 3
8. })
10. console.log(arr1) // -> [4,5,6]

复制代码

every()：判断数组中是否每一项都满足条件，只有所有项都满足条件，才返回true

1. // 注意： every()接收一个回调函数作为参数，这个回调函数需要有返回值，
2. // every(callback);callback默认有三个参数，分别为value，index，self。
3. let arr = [1,2,3,4,5,6];
4. let bool = arr.every(item => item > 0);
5. console.log(bool); // -> true;
7. let bool = arr.every(item => item > 3);
8. console.log(bool); // -> false;

复制代码

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true，否则返回false

1. // 注意： some()接收一个回调函数作为参数，这个回调函数需要有返回值，
2. // some(callback);callback默认有三个参数，分别为value，index，self。
4. let arr = [1,2,3,4,5,6];
5. let bool = arr.some(item => item > 3);
6. console.log(bool) // -> true;
8. let bool = arr.some(item => item > 6);
9. console.log(bool) // -> false;

复制代码

 
4.数组排序与反转
sort()：对数组的元素进行排序，并返回排序后的数组。默认按字符串unicode编码排序

1. /*
2.     数组.sort(fn => fn()):将数组按照指定的顺序进行排序
3.     @params:
4.         函数（可有可无），如果需要实现多位数正常排序，需要传递函数，并使返回值为a-b(升序)或者b-a（降序），属于冒泡排序机制
5.     @return:
6.         排序后的新数组
7. */
9. let arr = [12,45,6,21,51,81],
10.     //升序：
11.     newArr = arr.sort((a,b) => (a-b));
12. console.log(newArr,arr)

复制代码

reverse()：反转数组中元素的顺序，会改变原数组

1. /*
2.     数组.reverse():将数组的元素倒过来排序
3.     @params:
4.     @return:重新排序后的新数组
5. */
7. let arr = [1,2,5,4,3,6,7],
8.     newArr = arr.reverse();
9. console.log(newArr,arr)

复制代码

5.数组迭代与映射
forEach()：遍历数组，没有返回值

1. // 注意：forEach(callback);callback默认有三个参数，
2. // 分别为value(遍历到的数组的数据)，index(对应的索引)，self(数组自身)。
4. let arr = ['张三','李四','王五','马六']
5. let a = arr.forEach((item,index,self)=>{
6.     console.log(item + "--" + index + "--" + (arr === self));
7. })
8. // 打印结果为：
9. // 张三--0--true
10. // 李四--1--true
11. // 王五--2--true
12. // 马六--3--true
13. console.log(a); // -> undefined---forEach没有返回值 //该方法为遍历方法，不会修改原数组

复制代码

map()：map的回调函数会将执行结果返回，最后将所有回调函数的返回值组成新数组返回，同forEach

1. //注意：map(callback);callback默认有三个参数，
2. // 分别为value，index，self。
3. // 跟上面的forEach()的参数一样
4. let arr = ['张三','李四','王五','马六'];
5. let arr1 = arr.map(item => {
6.     return '你好：'+item
7. })
8. console.log(arr1) // -> ['你好：张三', '你好：李四', '你好：王五', '你好：马六']<br>

复制代码

？reduce()：数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值

1. // 注意：　参数：reduce()接收一个或两个参数：
2. // 第一个是回调函数，表示在数组的每一项上调用的函数；
3. // 第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。
4. // reduce(callback,initial);
5. // callback默认有四个参数，分别为prev，now，index，self。
6. // callback返回的任何值都会作为下一次执行的第一个参数。
7. // 如果initial参数被省略，那么第一次迭代发生在数组的第二项上，
8. // 因此callback的第一个参数是数组的第一项，第二个参数就是数组的第二项。
10. let arr = [10,20,30,40,50];
11. let sum = arr.reduce((prev,now) => prev+now)
12. console.log(sum); // -> 150;
14. let sum = arr.reduce((prev,now) => prev+now,110)
15. console.log(sum) // 260

复制代码

6.数组合并与扁平化
concat()：合并两个或多个数组，返回一个新数组

1. /*
2.     数组.concat(): 在指定数组后面将多个元素拼接成一个新数组
3.     @params:多个任意类型值
4.     @return:返回拼接后的新数组
5. */
7. let arr = [1,2,3,4],
8.     arr2 = [5,6,7],
9.     newArr = arr.concat(arr2,'morning',{name:"Zack"})
10. console.log(newArr,arr,arr2)

复制代码

flat()：创建一个新数组，将所有子数组元素递归连接到该数组中。
注意事项
如果原数组的元素不是数组（即没有子数组），则 flat() 方法将返回原数组的浅拷贝。
如果指定的深度小于 1，则 flat() 方法将不会进行任何扁平化操作，并返回原数组的浅拷贝。
如果数组中的某个元素是空数组，则扁平化时该空数组会被忽略（即不会作为结果数组的元素）。
flat() 方法不会改变原数组，而是返回一个新的扁平化后的数组

1. let arr = [1, 2, [3, 4], [5, [6, 7]]];  
2.   
3. // 不指定深度，默认深度为 1  
4. let flatArr1 = arr.flat();  
5. console.log(flatArr1); // 输出: [1, 2, 3, 4, [5, [6, 7]]]  
6.   
7. // 指定深度为 2  
8. let flatArr2 = arr.flat(2);  
9. console.log(flatArr2); // 输出: [1, 2, 3, 4, 5, [6, 7]]  
10.   
11. // 指定深度为 Infinity，完全扁平化  
12. let flatArr3 = arr.flat(Infinity);  
13. console.log(flatArr3); // 输出: [1, 2, 3, 4, 5, 6, 7]

复制代码

7.数组转字符串
toString()：不改变原数组

1. /*
2.     数组.toString:将数组转换为字符串
3.     @params:
4.     @return:转换后的字符串
5. */
7. let arr = [1,'2',undefined,{name:"Zack"}],
8.     newArr = arr.toString();<br>

复制代码

join()：不改变原数组

1. /*
2.     数组.join([string]):将数组以指定分隔符的形式分隔成字符串
3.     @params:指定的分隔符（字符串格式）
4.     @return:转换后的字符串
5. */
7. let arr = [0,1,2,3,4,5],
8.     newArr = arr.join('|');
9. console.log(newArr,arr) // 0|1|2|3|4|5，[0,1,2,3,4,5]

复制代码

二、其中比较常用的？

• push()：在数组末尾添加元素。
  
• pop()：移除数组最后一个元素。
  
• map()：对数组元素进行映射转换。
  
• filter()：过滤数组元素。
  
• reduce()：对数组元素进行累加或汇总。
  
• forEach()：遍历数组元素。
  
• sort()：对数组元素进行排序。
  
• includes()：判断数组是否包含指定元素
  

三、其中会改变原数组的方法
push()，pop()，shift()，unshift()，splice()，sort()，reverse()
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！