一文搞定JS数组所有方法

JavaScript 数组提供了丰富的方法来处理数据。下面我整理了这些方法，并用一个表格先来汇总它们的主要特性，方便你快速了解：

方法名	是否会修改原数组	简要描述	返回值
​​修改原数组的方法​​
push(element1, ..., elementN)	是	在数组​​末尾​​添加一个或多个元素	数组的​​新长度​​
pop()	是	删除并返回数组的​​最后一个​​元素	被删除的​​元素​​
unshift(element1, ..., elementN)	是	在数组​​开头​​添加一个或多个元素	数组的​​新长度​​
shift()	是	删除并返回数组的​​第一个​​元素	被删除的​​元素​​
splice(start, deleteCount, ...items)	是	在指定位置​​删除​​、​​添加​​或​​替换​​元素	由被删除元素组成的​​数组​​
sort([compareFunction])	是	对数组元素进行​​排序​​	排序后的​​数组​​（原数组被修改）
reverse()	是	​​反转​​数组中元素的顺序	反转后的​​数组​​（原数组被修改）
fill(value, [start], [end])	是	用固定值​​填充​​数组中指定范围内的所有元素	修改后的​​数组​​
copyWithin(target, start, [end])	是	将数组内部指定位置的元素​​复制​​到另一个位置	修改后的​​数组​​
​​不修改原数组的方法​​
concat(array1, ..., arrayN)	否	​​合并​​两个或多个数组	合并后的​​新数组​​
join([separator])	否	将数组所有元素用分隔符连接成一个​​字符串​​	连接后的​​字符串​​
slice([start], [end])	否	​​提取​​数组指定开始索引到结束索引（不包括结束索引）的部分	由提取元素组成的新​​数组​​
toString()	否	将数组转换为字符串（逗号分隔）	数组的字符串表示
indexOf(searchElement, [fromIndex])	否	返回指定元素在数组中​​第一次出现​​的索引	找到则返回​​索引​​，否则返回 -1
lastIndexOf(searchElement, [fromIndex])	否	返回指定元素在数组中​​最后一次出现​​的索引	找到则返回​​索引​​，否则返回 -1
includes(valueToFind, [fromIndex])	否	判断数组是否包含某个值	true或 false
forEach(callback)	否	对数组每个元素执行一次提供的函数	undefined
map(callback)	否	对数组每个元素执行提供的函数，并​​创建新数组​​	由回调函数结果组成的新​​数组​​
filter(callback)	否	​​过滤​​数组，创建包含所有通过测试的元素的新数组	由通过测试元素组成的新​​数组​​
reduce(callback, [initialValue])	否	对数组每个元素执行一个 ​​“ reducer ”​​ 函数，将其结果汇总为单个值	​​累积​​计算的结果
reduceRight(callback, [initialValue])	否	类似 reduce，但从右向左执行	​​累积​​计算的结果
some(callback)	否	检测数组中是否​​至少有一个​​元素通过测试	有则返回 true，否则返回 false
every(callback)	否	检测数组中的​​所有​​元素是否都通过测试	全部通过则返回 true，否则返回 false
find(callback)	否	返回数组中满足测试函数的​​第一个元素​​	找到的元素值，找不到则返回 undefined
findIndex(callback)	否	返回数组中满足测试函数的​​第一个元素的索引​​	找到的索引，找不到则返回 -1
entries()	否	返回一个包含数组所有键值对的​​迭代器​​对象	新的 Array Iterator 对象
keys()	否	返回一个包含数组所有​​索引​​的迭代器对象	新的 Array Iterator 对象
values()	否	返回一个包含数组所有​​值​​的迭代器对象	新的 Array Iterator 对象
flat([depth])	否	将嵌套数组“​​拉平​​”，变成一维数组	拉平后的新数组
flatMap(callback)	否	先对数组每个元素执行 map，然后将结果​​拉平​​一层	拉平后的新数组
Array.from(arrayLike, [mapFn])	否 (静态方法)	从类数组或可迭代对象创建新数组	新的数组实例
Array.isArray(value)	否 (静态方法)	判断一个值是否为数组	true或 false
Array.of(element0, element1, ...)	否 (静态方法)	创建一个具有可变数量参数的新数组	新的数组实例

---

常用方法简单示例

• ​​forEach​​：遍历数组

  ['a', 'b', 'c'].forEach((item, index) => console.log(index, item));
  // 输出: 0 'a', 1 'b', 2 'c'
  

• ​​map​​：映射新数组

  const nums = [1, 2, 3];
  const doubled = nums.map(num => num * 2); // [2, 4, 6]
  

• ​​filter​​：过滤数组

  const nums = [1, 2, 3, 4, 5];
  const evens = nums.filter(num => num % 2 === 0); // [2, 4]
  

• ​​find​​ 和 ​​findIndex​​：查找元素或索引

  const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
  const user = users.find(u => u.id === 2); // {id: 2, name: 'Bob'}
  const index = users.findIndex(u => u.id === 2); // 1
  

• ​​some​​ 和 ​​every​​：部分或全部满足条件

  const nums = [1, 2, 3, 4];
  const hasEven = nums.some(num => num % 2 === 0); // true
  const allEven = nums.every(num => num % 2 === 0); // false
  

• ​​reduce​​：累积计算

  const nums = [1, 2, 3, 4];
  const sum = nums.reduce((total, num) => total + num, 0); // 10
  

• ​​flat​​ 和 ​​flatMap​​：扁平化数组

  const arr = [1, [2, 3], [4, [5]]];
  const flattened = arr.flat(2); // [1, 2, 3, 4, 5] (参数2代表拉平两层)
  
  const phrases = ["hello world", "goodbye moon"];
  const words = phrases.flatMap(phrase => phrase.split(' ')); // ['hello', 'world', 'goodbye', 'moon']
  

---

使用注意

• ​​修改原数组的方法​​：使用 push, pop, splice, sort等会改变原数组的方法时需特别注意，确保这是你期望的行为

  。

• ​​链式调用​​：由于 filter, map, slice等方法返回新数组，你可以将它们​​链式调用​​，写出更简洁的代码

  ：

  const result = [1, 2, 3, 4, 5]
    .filter(num => num % 2 === 0) // [2, 4]
    .map(num => num * 10) // [20, 40]
    .reduce((sum, num) => sum + num, 0); // 60
  

• ​​稀疏数组​​：使用 new Array(length)或某些操作可能会产生“空槽”的稀疏数组，部分方法处理方式可能与你预期不符

  。

• ​​sort的默认行为​​：sort方法默认将元素​​转换为字符串​​后按 Unicode 码点排序，对数字排序可能产生意外结果。​​对数字排序时应始终提供比较函数​​ (a, b) => a - b（升序）或 (a, b) => b - a（降序）

  。

希望这份详细的列表和说明能帮助你更好地理解和运用 JavaScript 数组方法。