JavaScript数组方法大全：从基础到高阶全面解析

摘要：JavaScript数组是开发中最常用的数据结构之一。本文将全面解析所有数组方法，涵盖ES5到ES2023的新特性，帮助开发者彻底掌握数组操作。

一、基础修改方法（修改原数组）

1. push()

• 作用：在数组末尾添加元素
• 返回值：新数组长度
• 示例：

  let arr = [1, 2];
  arr.push(3); // arr变为[1,2,3], 返回3
  

2. pop()

• 作用：删除并返回最后一个元素
• 示例：

  [1,2,3].pop(); // 返回3，数组变为[1,2]
  

3. shift()

• 作用：删除并返回第一个元素
• 示例：

  [1,2,3].shift(); // 返回1，数组变为[2,3]
  

4. unshift()

• 作用：在数组开头添加元素
• 返回值：新长度
• 示例：

  [2,3].unshift(1); // 返回3，数组变为[1,2,3]
  

5. splice()

• 语法：splice(start, deleteCount, ...items)
• 作用：删除/替换元素
• 示例：

  let arr = [1,2,3,4];
  arr.splice(1, 2, 'a'); 
  // 返回[2,3]，arr变为[1,'a',4]
  

6. reverse()

• 作用：反转数组顺序
• 示例：

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

7. sort()

• 语法：sort(compareFunction)
• 注意：默认按字符串Unicode排序
• 示例：

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

8. fill()

• 语法：fill(value, start, end)
• 作用：填充值（ES6）
• 示例：

  new Array(3).fill(0); // [0,0,0]
  

9. copyWithin()

• 语法：copyWithin(target, start, end)（ES6）
• 作用：内部复制元素
• 示例：

  [1,2,3,4].copyWithin(0, 2); // [3,4,3,4]
  

二、非破坏性方法（返回新数组）

1. concat()

• 作用：合并数组
• 示例：

  [1,2].concat([3,4]); // [1,2,3,4]
  

2. slice()

• 语法：slice(start, end)
• 作用：截取子数组
• 示例：

  [1,2,3].slice(1); // [2,3]
  

3. join()

• 作用：数组转字符串
• 示例：

  [1,2,3].join('-'); // "1-2-3"
  

4. toString()

• 等价于：join()
• 示例：

  [1,2,3].toString(); // "1,2,3"
  

三、遍历与迭代方法

1. forEach()

• 特点：无返回值，单纯遍历
• 示例：

  [1,2,3].forEach(v => console.log(v));
  

2. map()

• 作用：映射新数组
• 示例：

  [1,2,3].map(v => v * 2); // [2,4,6]
  

3. filter()

• 作用：筛选满足条件的元素
• 示例：

  [1,2,3].filter(v => v > 1); // [2,3]
  

4. entries()/keys()/values()（ES6）

• 返回迭代器
• 示例：

  for (let [i, v] of ['a','b'].entries()) {
    console.log(i, v); // 0 'a', 1 'b'
  }
  

四、查找与筛选方法

1. indexOf()/lastIndexOf()

• 作用：查找元素索引
• 示例：

  [1,2,2].indexOf(2); // 1
  

2. includes()（ES6）

• 作用：判断包含元素
• 示例：

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

3. find()/findIndex()（ES6）

• 示例：

  [1,2,3].find(v => v > 1); // 2
  

4. findLast()/findLastIndex()（ES2023）

• 反向查找
• 示例：

  [1,2,3].findLast(v => v > 1); // 3
  

五、归并方法

1. reduce()

• 语法：reduce(callback, initialValue)
• 示例：

  [1,2,3].reduce((sum, v) => sum + v, 0); // 6
  

2. reduceRight()

• 从右向左归并
• 示例：

  [[1], [2]].reduceRight((acc, v) => acc.concat(v)); // [2,1]
  

六、ES6+新特性方法

1. flat()/flatMap()（ES2019）

• 扁平化数组
• 示例：

  [1,[2]].flat(); // [1,2]
  

2. at()（ES2022）

• 支持负索引访问
• 示例：

  [1,2,3].at(-1); // 3
  

3. toReversed()/toSorted()/toSpliced()/with()（ES2023）

• 返回新数组的非破坏性方法
• 示例：

  [1,2,3].toReversed(); // [3,2,1]
  [1,2,3].with(0, 9); // [9,2,3]
  

七、静态方法

1. Array.isArray()

• 判断是否为数组
• 示例：

  Array.isArray([]); // true
  

2. Array.from()

• 类数组转数组
• 示例：

  Array.from('123'); // ['1','2','3']
  

3. Array.of()

• 创建包含参数的数组
• 示例：

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

八、总结与使用场景

最佳实践：优先使用非破坏性方法（如toSorted替代sort）以避免副作用，注意方法的时间复杂度（如includes为O(n)）。

掌握这些方法将显著提升JavaScript开发效率！建议收藏本文作为数组操作的速查手册。