一篇梳理清楚JS中数组的常用方法和区别

在 JavaScript 中，数组是一种非常重要的数据结构，它提供了多种方法用于操作和处理数组的数据。随着 ES6的推出，很多新的数组方法得到了增加，这些方法使得数组操作更加简洁和强大。接下来我将梳理出常用的数组方法，特别是 ES6 新增的部分，并结合代码详细说明各自的特点和区别。

一、基本的数组方法（ES5及之前）

1. push() 和 pop()

   • push()：向数组末尾添加一个或多个元素，并返回新数组的长度。
   • pop()：移除数组末尾的一个元素，并返回该元素。

   let arr = [1, 2, 3];
   arr.push(4); // [1, 2, 3, 4]
   console.log(arr.pop()); // 4
   console.log(arr); // [1, 2, 3]
   

2. shift() 和 unshift()

   • shift()：移除数组的第一个元素，并返回该元素。
   • unshift()：向数组开头添加一个或多个元素，并返回新数组的长度。

   let arr = [1, 2, 3];
   arr.unshift(0); // [0, 1, 2, 3]
   console.log(arr.shift()); // 0
   console.log(arr); // [1, 2, 3]
   

3. concat()

   • 合并两个或多个数组，并返回一个新的数组。

   let arr1 = [1, 2];
   let arr2 = [3, 4];
   let result = arr1.concat(arr2); // [1, 2, 3, 4]
   

4. slice()

   • 返回一个新的数组，包含原数组中指定位置的元素（不修改原数组）。

   let arr = [1, 2, 3, 4, 5];
   let result = arr.slice(1, 3); // [2, 3]
   

5. splice()

   • 对数组进行增、删、改操作，直接修改原数组。

   let arr = [1, 2, 3, 4, 5];
   arr.splice(2, 1, 'a'); // 从索引 2 开始删除 1 个元素，并插入 'a'
   console.log(arr); // [1, 2, 'a', 4, 5]
   

二、ES6 新增的数组方法

1. find()

   • 用于查找数组中第一个满足条件的元素，返回该元素，否则返回 undefined。

   let arr = [1, 2, 3, 4, 5];
   let result = arr.find(x => x > 3); // 4
   

2. findIndex()

   • 用于查找数组中第一个满足条件的元素的索引，返回该索引，否则返回 -1。

   let arr = [1, 2, 3, 4, 5];
   let result = arr.findIndex(x => x > 3); // 3
   

3. includes()

   • 检查数组是否包含某个元素，返回布尔值。

   let arr = [1, 2, 3, 4, 5];
   console.log(arr.includes(3)); // true
   console.log(arr.includes(6)); // false
   

4. map()

   • 遍历数组，返回一个新数组，数组中的元素是对原数组中每个元素应用给定函数后的结果。

   let arr = [1, 2, 3];
   let result = arr.map(x => x * 2); // [2, 4, 6]
   

5. filter()

   • 遍历数组，返回一个新数组，其中包含所有满足条件的元素。

   let arr = [1, 2, 3, 4, 5];
   let result = arr.filter(x => x % 2 === 0); // [2, 4]
   

6. reduce() 和 reduceRight()

   • reduce()：将数组中的元素按顺序“归纳”成单一的值（从左到右）。
   • reduceRight()：与 reduce() 类似，但是是从右到左。

   let arr = [1, 2, 3, 4];
   let result = arr.reduce((acc, cur) => acc + cur, 0); // 10
   

7. forEach()

   • 遍历数组中的每一个元素，执行给定的函数，不返回任何值。

   let arr = [1, 2, 3];
   arr.forEach(x => console.log(x)); // 1 2 3
   

8. some()

   • 检查数组中是否至少有一个元素满足条件，返回布尔值。

   let arr = [1, 2, 3, 4, 5];
   console.log(arr.some(x => x > 3)); // true
   

9. every()

   • 检查数组中的所有元素是否都满足条件，返回布尔值。

   let arr = [1, 2, 3, 4];
   console.log(arr.every(x => x > 0)); // true
   

10. sort()

    • 对数组进行排序，修改原数组，默认为按字符串的字典顺序排序。

    let arr = [4, 2, 5, 1, 3];
    arr.sort(); // [1, 2, 3, 4, 5]
    arr.sort((a, b) => b - a); // [5, 4, 3, 2, 1]
    

11. flat() 和 flatMap()

    • flat()：将嵌套数组“拍平”成一个新数组。
    • flatMap()：先执行映射操作，再将结果“拍平”。

    let arr = [1, [2, 3], [4, 5]];
    let result = arr.flat(); // [1, 2, 3, 4, 5]
    
    let arr2 = [1, 2, 3];
    let result2 = arr2.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
    

12. from()

    • 将类数组对象或可迭代对象转换为数组。

    let str = 'hello';
    let result = Array.from(str); // ['h', 'e', 'l', 'l', 'o']
    

13. keys() 和 values()

    • keys()：返回一个包含数组索引的新的数组迭代器。
    • values()：返回一个包含数组值的新的数组迭代器。

    let arr = ['a', 'b', 'c'];
    let keys = arr.keys(); // [0, 1, 2]
    let values = arr.values(); // ['a', 'b', 'c']
    

14. fill()

    • 用给定的值填充数组中的所有元素，直到指定的索引位置。

    let arr = [1, 2, 3, 4];
    arr.fill(0, 1, 3); // [1, 0, 0, 4]
    

15. copyWithin()

    • 从数组的指定位置复制部分内容到另一个位置。

    let arr = [1, 2, 3, 4, 5];
    arr.copyWithin(0, 3, 5); // [4, 5, 3, 4, 5]
    

三、方法的特点和区别

• map() vs forEach()：

  • map() 返回一个新的数组，不修改原数组，而 forEach() 不返回任何值，只是执行操作。

• reduce() vs map()：

  • reduce() 通过累加和累积数组元素的值，最终返回一个单一值，而 map() 返回的是处理后元素组成的新数组。

• some() vs every()：

  • some() 只要有一个元素满足条件就返回 true，而 every() 要求所有元素都满足条件。

• flat() vs concat()：

  • flat() 会“拍平”嵌套数组，concat() 只是简单地将数组连接在一起，不会改变

数组的深度。

• find() vs filter()：
  • find() 返回第一个满足条件的元素，filter() 返回一个包含所有符合条件的元素的新数组。

总结

ES6 引入的数组方法极大地丰富了数组操作的功能，使得操作更加简洁和灵活。理解这些方法的使用场景和特性，对于提升 JavaScript 编程效率非常有帮助。