JavaScript 数组常用方法完整指南

前言

JavaScript 中的数组是高频使用的数据结构，其内置了丰富的 API 用于数据的增删改查与转换。下文将各类常用方法分类详解：

1. 元素增删操作

• push()：在数组尾部追加一个或多个元素，并返回更新后的数组长度。

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

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

  let arr = [1, 2, 3];
  let last = arr.pop(); // arr = [1, 2], last = 3
  

• unshift()：在数组头部插入一个或多个元素，并返回更新后的数组长度。

  let arr = [2, 3];
  arr.unshift(1); // arr = [1, 2, 3]
  

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

  let arr = [1, 2, 3];
  let first = arr.shift(); // arr = [2, 3], first = 1
  

• splice(start, deleteCount, item1, item2, ...)：执行删除、插入或替换操作，返回被移除的元素组成的数组。

  let arr = [1, 2, 3, 4, 5];
  arr.splice(1, 2); // 删除从索引 1 开始的 2 个元素，arr = [1, 4, 5]
  arr.splice(2, 0, 6, 7); // 在索引 2 处插入 6 和 7，arr = [1, 4, 6, 7, 5]
  

• slice(start, end)：截取从 start 至 end（不含 end）的浅拷贝，原数组保持不变。

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

2. 元素查找与定位

• indexOf(item)：返回目标元素首次出现的索引，若未找到则返回 -1。

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

• lastIndexOf(item)：返回目标元素最后一次出现的索引，若未找到则返回 -1。

  let arr = [1, 2, 3, 2];
  arr.lastIndexOf(2); // 3
  

• includes(item)：检测数组是否包含指定元素，返回布尔类型结果。

  let arr = [1, 2, 3];
  arr.includes(2); // true
  

• find(callback)：返回满足回调条件的首个元素，若未找到则返回 undefined。

  let arr = [1, 2, 3, 4];
  let found = arr.find(num => num > 2); // 3
  

• findIndex(callback)：返回满足回调条件的首个元素的索引，若未找到则返回 -1。

  let arr = [1, 2, 3, 4];
  let foundIndex = arr.findIndex(num => num > 2); // 2
  

3. 数组遍历与聚合

• forEach(callback)：对数组每一项执行指定函数，不生成新数组。

  let arr = [1, 2, 3];
  arr.forEach(num => console.log(num)); // 输出：1 2 3
  

• map(callback)：对数组每一项执行函数，并返回由返回值组成的新数组。

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

• filter(callback)：返回由满足条件元素构成的新数组。

  let arr = [1, 2, 3, 4];
  let filteredArr = arr.filter(num => num > 2); // filteredArr = [3, 4]
  

• some(callback)：若存在至少一个元素满足条件，返回 true，否则返回 false。

  let arr = [1, 2, 3];
  arr.some(num => num > 2); // true
  

• every(callback)：若所有元素均满足条件，返回 true，否则返回 false。

  let arr = [1, 2, 3];
  arr.every(num => num > 0); // true
  

• reduce(callback, initialValue)：将数组累减为单一值，callback 接收累计值、当前值、索引及原数组四个参数。initialValue 为可选的初始累计值。

  let arr = [1, 2, 3, 4];
  let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
  

• reduceRight(callback, initialValue)：从数组尾部开始执行 reduce 逻辑。

  let arr = [1, 2, 3, 4];
  let sum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0); // sum = 10
  

4. 排序与结构变换

• sort(compareFunction)：原地排序数组，compareFunction 为可选的比较函数。

  字符串数组排序

  let fruits = ['banana', 'apple', 'mango'];
  fruits.sort();
  console.log(fruits); // 输出 ['apple', 'banana', 'mango']
  

  数字数组默认排序存在缺陷，因默认将元素转为字符串后按字典序比较

  let numbers = [8, 2, 3, 5, 1, 10];
  numbers.sort(); // 默认转换为字符串排序，结果可能不是期望的 [1, 2, 3, 5, 8, 10]
  console.log(numbers); // 输出[ 1, 10, 2, 3, 5, 8 ]
  

  需传入比较函数以确保数值排序正确

  let numbers = [8, 2, 3, 5, 1, 10];
  numbers.sort((a, b) => a - b); 
  console.log(numbers); // 输出[1, 2, 3, 5, 8, 10]
  

  若需降序排列

  let numbers = [8, 2, 3, 5, 1, 10];
  numbers.sort((a, b) => b - a); 
  console.log(numbers); // 输出[10, 8, 5, 3, 2, 1]
  

  对象数组排序若需依据对象属性排序，实现方式如下：

  let people = [
    { name: 'John', age: 23 },
    { name: 'Jane', age: 29 },
    { name: 'Jack', age: 27 }
  ];
  
  // 按年龄排序
  people.sort((a, b) => a.age - b.age);
  console.log(people);
  // 输出：
  // [
  //   { name: 'John', age: 23 },
  //   { name: 'Jack', age: 27 },
  //   { name: 'Jane', age: 29 }
  // ]
  

• reverse()：反转数组元素顺序，修改原数组。

  let arr = [1, 2, 3];
  arr.reverse(); // arr = [3, 2, 1]
  

• join(separator)：将数组拼接为字符串，separator 为可选分隔符。

  let arr = [1, 2, 3];
  let str = arr.join('-'); // str = "1-2-3"
  

• concat()：合并多个数组并返回新数组，原数组不变。

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

• flat(depth)：将嵌套数组展平至指定层级，默认深度为 1。

  let arr = [1, [2, [3, [4]]]];
  let flatArr = arr.flat(2); // flatArr = [1, 2, 3, [4]]
  

• flatMap(callback)：对元素执行映射函数后展平一层结果。

  let arr = [1, 2, 3];
  let flatMapped = arr.flatMap(num => [num, num * 2]); // flatMapped = [1, 2, 2, 4, 3, 6]
  

5. 其他实用方法

• Array.isArray()：判定值是否为数组类型。

  Array.isArray([1, 2, 3]); // true
  

• fill(value, start, end)：用固定值填充数组，start 与 end 为可选的起止索引（不含结束位）。

  let arr = [1, 2, 3, 4];
  arr.fill(0, 1, 3); 
  console.log(arr) // 会改变原数组输出：[1, 0, 0, 4]
  

• from()：基于类数组或可迭代对象生成新数组。

  let arr = Array.from('hello'); 
  console.log(arr) // 输出：['h', 'e', 'l', 'l', 'o']
  

• of()：依据给定参数创建新数组实例。

   let arr = Array.of(1, 2, 3); 
   console.log(arr) // [ 1, 2, 3 ]

总结

本文梳理了 JavaScript 数组的核心方法，更多内容可查阅本站过往文章或继续阅读后续章节，感谢支持！