JavaScript 数组方法总结

JavaScript 数组方法总结

JavaScript 数组提供了丰富的方法来操作数组数据。这些方法可以分为两大类：改变原数组的方法和不改变原数组的方法。

改变原数组的方法

以下方法会直接修改原始数组：

1. push() - 在数组末尾添加一个或多个元素，返回新数组长度

   const arr = [1, 2, 3];
   arr.push(4, 5); // 返回 5
   console.log(arr); // [1, 2, 3, 4, 5]
   

2. pop() - 删除并返回数组的最后一个元素

   const arr = [1, 2, 3, 4, 5];
   const lastItem = arr.pop(); // 返回 5
   console.log(arr); // [1, 2, 3, 4]
   

3. unshift() - 在数组开头添加一个或多个元素，返回新数组长度

   const arr = [1, 2, 3];
   arr.unshift(-1, 0); // 返回 5
   console.log(arr); // [-1, 0, 1, 2, 3]
   

4. shift() - 删除并返回数组的第一个元素

   const arr = [1, 2, 3, 4, 5];
   const firstItem = arr.shift(); // 返回 1
   console.log(arr); // [2, 3, 4, 5]
   

5. splice() - 添加、删除或替换数组中的元素

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

6. reverse() - 反转数组中元素的顺序

   const arr = [1, 2, 3, 4, 5];
   arr.reverse();
   console.log(arr); // [5, 4, 3, 2, 1]
   

7. sort() - 对数组元素进行排序

   const arr = [5, 2, 3, 1, 4];
   arr.sort();
   console.log(arr); // [1, 2, 3, 4, 5]
   

8. fill() - 用固定值填充数组

   const arr = [1, 2, 3, 4, 5];
   arr.fill(0, 1, 4); // 用0填充索引1到3的位置
   console.log(arr); // [1, 0, 0, 0, 5]
   

9. copyWithin() - 复制数组的一部分到同一数组中的另一个位置

   const arr = [1, 2, 3, 4, 5];
   arr.copyWithin(0, 3, 5); // 将索引3到4的元素复制到索引0开始的位置
   console.log(arr); // [4, 5, 3, 4, 5]
   

不改变原数组的方法

以下方法不会修改原始数组，而是返回一个新数组或其他值：

1. concat() - 合并两个或多个数组，返回一个新数组

   const arr1 = [1, 2, 3];
   const arr2 = [4, 5];
   const newArr = arr1.concat(arr2);
   console.log(newArr); // [1, 2, 3, 4, 5]
   console.log(arr1); // [1, 2, 3] (未改变)
   

2. slice() - 提取数组的一部分，返回一个新数组

   const arr = [1, 2, 3, 4, 5];
   const newArr = arr.slice(1, 4);
   console.log(newArr); // [2, 3, 4]
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

3. map() - 对数组中的每个元素执行函数，返回新数组

   const arr = [1, 2, 3, 4, 5];
   const newArr = arr.map((x) => x * 2);
   console.log(newArr); // [2, 4, 6, 8, 10]
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

4. filter() - 创建一个新数组，包含通过测试的所有元素

   const arr = [1, 2, 3, 4, 5];
   const newArr = arr.filter((x) => x > 3);
   console.log(newArr); // [4, 5]
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

5. reduce() - 对数组中的每个元素执行函数(从左到右)，将其减少为单个值

   const arr = [1, 2, 3, 4, 5];
   const sum = arr.reduce((acc, cur) => acc + cur, 0);
   console.log(sum); // 15
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

6. reduceRight() - 类似于 reduce，但从右到左执行

   const arr = [1, 2, 3, 4, 5];
   const result = arr.reduceRight((acc, cur) => acc + cur, 0);
   console.log(result); // 15
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

7. find() - 返回数组中满足测试函数的第一个元素的值

   const arr = [1, 2, 3, 4, 5];
   const found = arr.find((x) => x > 3);
   console.log(found); // 4
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

8. findIndex() - 返回数组中满足测试函数的第一个元素的索引

   const arr = [1, 2, 3, 4, 5];
   const foundIndex = arr.findIndex((x) => x > 3);
   console.log(foundIndex); // 3
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

9. includes() - 判断数组是否包含指定的元素

   const arr = [1, 2, 3, 4, 5];
   console.log(arr.includes(3)); // true
   console.log(arr); // [1, 2, 3, 4, 5] (未改变)
   

10. join() - 将数组的所有元素连接成一个字符串

    const arr = [1, 2, 3, 4, 5];
    const str = arr.join("-");
    console.log(str); // "1-2-3-4-5"
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
    

11. indexOf() - 返回数组中指定元素第一次出现的索引

    const arr = [1, 2, 3, 4, 5, 3];
    console.log(arr.indexOf(3)); // 2
    console.log(arr); // [1, 2, 3, 4, 5, 3] (未改变)
    

12. lastIndexOf() - 返回数组中指定元素最后一次出现的索引

    const arr = [1, 2, 3, 4, 5, 3];
    console.log(arr.lastIndexOf(3)); // 5
    console.log(arr); // [1, 2, 3, 4, 5, 3] (未改变)
    

13. every() - 测试数组中的所有元素是否都通过了指定函数的测试

    const arr = [1, 2, 3, 4, 5];
    const allPositive = arr.every((x) => x > 0);
    console.log(allPositive); // true
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
    

14. some() - 测试数组中是否至少有一个元素通过了指定函数的测试

    const arr = [1, 2, 3, 4, 5];
    const hasEven = arr.some((x) => x % 2 === 0);
    console.log(hasEven); // true
    console.log(arr); // [1, 2, 3, 4, 5] (未改变)
    

15. flat() - 将嵌套数组展平

    const arr = [1, [2, [3, 4]]];
    const flatArr = arr.flat(2);
    console.log(flatArr); // [1, 2, 3, 4]
    console.log(arr); // [1, [2, [3, 4]]] (未改变)
    

16. flatMap() - 先映射每个元素，然后将结果展平，相当于先 map 再 flat(1)

    const arr = [1, 2, 3];
    const result = arr.flatMap((x) => [x, x * 2]);
    console.log(result); // [1, 2, 2, 4, 3, 6]
    console.log(arr); // [1, 2, 3] (未改变)
    

方法对比表格

下面的表格提供了 JavaScript 数组方法的快速参考：

方法名	改变原数组	返回值	描述
push()	✅	新数组长度	在数组末尾添加一个或多个元素
pop()	✅	被删除的元素	删除数组的最后一个元素
unshift()	✅	新数组长度	在数组开头添加一个或多个元素
shift()	✅	被删除的元素	删除数组的第一个元素
splice()	✅	包含被删除元素的数组	添加、删除或替换数组中的元素
reverse()	✅	颠倒后的数组	反转数组中元素的顺序
sort()	✅	排序后的数组	对数组元素进行排序
fill()	✅	填充后的数组	用固定值填充数组
copyWithin()	✅	修改后的数组	复制数组的一部分到同一数组中的另一个位置
concat()	❌	新数组	合并两个或多个数组
slice()	❌	新数组	提取数组的一部分
map()	❌	新数组	对数组中的每个元素执行函数
filter()	❌	新数组	创建一个包含通过测试的所有元素的新数组
reduce()	❌	单个值	将数组减少为单个值(从左到右)
reduceRight()	❌	单个值	将数组减少为单个值(从右到左)
find()	❌	元素值或 undefined	返回满足测试函数的第一个元素的值
findIndex()	❌	索引或-1	返回满足测试函数的第一个元素的索引
includes()	❌	布尔值	判断数组是否包含指定的元素
join()	❌	字符串	将数组的所有元素连接成一个字符串
indexOf()	❌	索引或-1	返回指定元素第一次出现的索引
lastIndexOf()	❌	索引或-1	返回指定元素最后一次出现的索引
every()	❌	布尔值	测试数组中的所有元素是否都通过了指定函数的测试
some()	❌	布尔值	测试数组中是否至少有一个元素通过了指定函数的测试
flat()	❌	新数组	将嵌套数组展平
flatMap()	❌	新数组	先映射每个元素，然后将结果展平

总结

改变原数组的方法

• push()
• pop()
• unshift()
• shift()
• splice()
• reverse()
• sort()
• fill()
• copyWithin()

不改变原数组的方法

• concat()
• slice()
• map()
• filter()
• reduce()
• reduceRight()
• find()
• findIndex()
• includes()
• join()
• indexOf()
• lastIndexOf()
• every()
• some()
• flat()
• flatMap()

在使用数组方法时，了解它们是否会修改原数组非常重要，特别是在处理不可变数据或需要保留原始数据时。