JavaScript 数组方法详解

JavaScript 数组提供了许多内置方法，用于处理数组的各种操作，如添加、删除、查找、排序、过滤等。以下是一些常用的数组方法及其作用和示例。

1. 添加和删除元素

• push：在数组末尾添加一个或多个元素，并返回新的长度。

  let arr = [1, 2, 3];
  let newLength = arr.push(4, 5);
  console.log(arr); // 输出: [1, 2, 3, 4, 5]
  console.log(newLength); // 输出: 5

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

  let arr = [2, 3, 4];
  let newLength = arr.unshift(1, 0);
  console.log(arr); // 输出: [1, 0, 2, 3, 4]
  console.log(newLength); // 输出: 5

• pop：删除数组的最后一个元素，并返回该元素。

  let arr = [1, 2, 3, 4];
  let lastElement = arr.pop();
  console.log(arr); // 输出: [1, 2, 3]
  console.log(lastElement); // 输出: 4

• shift：在数组的开头删除一个元素，并返回该元素。

  let arr = [1, 2, 3, 4];
  let firstElement = arr.shift();
  console.log(arr); // 输出: [2, 3, 4]
  console.log(firstElement); // 输出: 1

• splice：在任意位置添加或删除元素，返回被删除的元素组成的数组。

  let arr = [1, 2, 3, 4, 5];
  let removedElements = arr.splice(2, 1, 6, 7); // 从索引 2 开始删除 1 个元素，然后插入 6 和 7
  console.log(arr); // 输出: [1, 2, 6, 7, 4, 5]
  console.log(removedElements); // 输出: [3]

2. 查找元素

• indexOf：返回第一个匹配元素的索引，如果没有找到则返回 -1。

  let arr = [1, 2, 3, 4, 5];
  let index = arr.indexOf(3);
  console.log(index); // 输出: 2

• lastIndexOf：从数组末尾向前搜索，返回第一个匹配元素的索引，如果没有找到则返回 -1。

  let arr = [1, 2, 3, 2, 5];
  let lastIndex = arr.lastIndexOf(2);
  console.log(lastIndex); // 输出: 3

• find：返回第一个满足条件的元素，否则返回 undefined。

  let arr = [1, 2, 3, 4, 5];
  let found = arr.find(element => element > 3);
  console.log(found); // 输出: 4

• findIndex：返回第一个满足条件的元素的索引，否则返回 -1。

  let arr = [1, 2, 3, 4, 5];
  let foundIndex = arr.findIndex(element => element > 3);
  console.log(foundIndex); // 输出: 3

• findLast：从最后一个元素开始查找数组项。

  let arr = [1, 2, 3, 4, 5];
  let found = arr.findLast(element => element > 3);
  console.log(found); // 输出: 5

3. 遍历和映射

• forEach：遍历数组，对每个元素执行一个函数，没有返回值。

  let arr = [1, 2, 3, 4, 5];
  arr.forEach((element, index, array) => {console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
  });

• map：创建一个新数组，其结果是该函数处理原数组每个元素的结果。

  let arr = [1, 2, 3, 4, 5];
  let squared = arr.map(element => element * element);
  console.log(squared); // 输出: [1, 4, 9, 16, 25]

• filter：创建一个新数组，包含通过测试的所有元素。

  let arr = [1, 2, 3, 4, 5];
  let even = arr.filter(element => element % 2 === 0);
  console.log(even); // 输出: [2, 4]

• reduce：将数组元素迭代地减少为单个值。

  let arr = [1, 2, 3, 4, 5];
  let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
  console.log(sum); // 输出: 15

• reduceRight：从右到左迭代地应用一个函数并合并结果。

  let arr = [1, 2, 3, 4, 5];
  let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
  console.log(sum); // 输出: 15

• some：测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回一个布尔值。

  let arr = [1, 2, 3, 4, 5];
  let hasEven = arr.some(element => element % 2 === 0);
  console.log(hasEven); // 输出: true

• every：测试所有元素是否都通过了某个测试。它返回一个布尔值。

  let arr = [2, 4, 6, 8];
  let allEven = arr.every(element => element % 2 === 0);
  console.log(allEven); // 输出: true

4. 排序和反转

• sort：对数组的元素进行排序。

  let arr = [3, 1, 4, 1, 5, 9];
  arr.sort((a, b) => a - b);
  console.log(arr); // 输出: [1, 1, 3, 4, 5, 9]

• reverse：颠倒数组中元素的顺序。

  let arr = [1, 2, 3, 4, 5];
  arr.reverse();
  console.log(arr); // 输出: [5, 4, 3, 2, 1]

• toSorted：ES2023 支持 sort() 的不可变版本。

  let arr = [3, 1, 4, 1, 5, 9];
  let sorted = arr.toSorted((a, b) => a - b);
  console.log(sorted); // 输出: [1, 1, 3, 4, 5, 9]
  console.log(arr); // 输出: [3, 1, 4, 1, 5, 9] （原数组不变）

• toReversed：ES2023 支持 reverse() 的不可变版本。

  let arr = [1, 2, 3, 4, 5];
  let reversed = arr.toReversed();
  console.log(reversed); // 输出: [5, 4, 3, 2, 1]
  console.log(arr); // 输出: [1, 2, 3, 4, 5] （原数组不变）

5. 分割和合并

• concat：用于连接两个或多个数组并返回一个新的数组，不改变原数组。

  let arr1 = [1, 2, 3];
  let arr2 = [4, 5, 6];
  let combined = arr1.concat(arr2);
  console.log(combined); // 输出: [1, 2, 3, 4, 5, 6]
  console.log(arr1); // 输出: [1, 2, 3] （原数组不变）

• join：将数组的所有元素连接成一个字符串，可以指定分隔符。

  let arr = [1, 2, 3, 4, 5];
  let str = arr.join(', ');
  console.log(str); // 输出: "1, 2, 3, 4, 5"

• slice：返回数组的一个片段，不改变原数组。

  let arr = [1, 2, 3, 4, 5];
  let subArr = arr.slice(1, 3);
  console.log(subArr); // 输出: [2, 3]
  console.log(arr); // 输出: [1, 2, 3, 4, 5] （原数组不变）

• toSpliced：ES2023 支持 splice() 的不可变版本。

  let arr = [1, 2, 3, 4, 5];
  let spliced = arr.toSpliced(2, 1, 6, 7);
  console.log(spliced); // 输出: [1, 2, 6, 7, 4, 5]
  console.log(arr); // 输出: [1, 2, 3, 4, 5] （原数组不变）

6. 其他方法

• fill：用静态值填充一个数组的元素。

  let arr = [1, 2, 3, 4, 5];
  arr.fill(0, 2, 4); // 从索引 2 到 4（不包括 4）填充 0
  console.log(arr); // 输出: [1, 2, 0, 0, 5]

• flat：将多维数组“拉平”为一维数组。

  let arr = [1, [2, [3, 4]], 5];
  let flattened = arr.flat(2); // 深度为 2
  console.log(flattened); // 输出: [1, 2, 3, 4, 5]

• flatMap：先映射后拉平，即映射每个元素到新数组，然后将所有这些新数组拉平成一个新数组。

  let arr = [1, 2, 3];
  let mappedAndFlattened = arr.flatMap(x => [x, x * 2]);
  console.log(mappedAndFlattened); // 输出: [1, 2, 2, 4, 3, 6]

• copyWithin：将数组的一部分复制到同一数组中的另一个位置并返回它，不增加其长度。

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

• at 和 with：用于单元素数组修改和访问的函数式和不可变版本，允许使用负索引获取和更改元素值。

  let arr = [1, 2, 3, 4, 5];
  console.log(arr.at(-1)); // 输出: 5
  arr = arr.with(0, 0); // 使用 with 修改数组
  console.log(arr); // 输出: [0, 2, 3, 4, 5]

总结

这些数组方法提供了丰富的功能，可以帮助开发者高效地处理数组数据。每种方法都有其特定的用途，了解和熟练使用这些方法可以使代码更加简洁和高效。希望这些分类和示例能帮助您更好地掌握和使用 JavaScript 数组方法。