15个JavaScript核心数组方法详解与实战
本文系统梳理了JavaScript中15个高频使用的数组方法，涵盖遍历、筛选、聚合及排序等场景。详细解析了forEach、map、filter、reduce等核心API的用法、参数差异及可变性注意事项，并结合代码示例说明如何高效处理数组数据，帮助开发者掌握现代JS数组操作的最佳实践。
前言
在开发各类应用程序时，数组是不可或缺的数据结构。尽管数组提供了丰富的操作方法，但其中部分函数的行为容易让人混淆。本文精选了15个实用且高频的数组方法，掌握它们能显著提升开发效率。
使用数组方法时，需特别注意区分可变（修改原数组）与不可变（返回新数组）操作。在编写代码选择合适方法前，明确这一特性至关重要。
列表中的多数数组方法均接受回调函数作为参数，其标准签名通常包含三个参数：当前遍历的元素、当前元素的索引以及整个数组对象。明确这一点后，我们开始逐一介绍这些方法。
1、ForEach
该方法用于遍历数组中的每一个元素，并对每个元素执行指定的回调函数，通常用于执行副作用操作（如打印日志或修改外部状态）。
const arr = [1, 2, 3];
arr.forEach(num => console.log(num));
// Console: 1, 2, 32、Map
遍历数组中的每个元素并执行回调函数，利用回调函数的返回值构建并返回一个全新的数组，原数组保持不变。
const arr = [1, 2, 3, 4, 5];
const areEven = arr.map(num => num % 2 === 0);
console.log(areEven); // Console: [false, true, false, true, false]3、Filter
遍历数组中的每个元素，根据回调函数返回的布尔值筛选出符合条件的元素，并返回包含这些元素的新数组。
const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // Console [2, 4]4、Find
查找数组中第一个满足回调函数指定条件的元素。若未找到匹配项，则返回 undefined。
const arr = [1, 2, 3, 4, 5];
const firstEvenNumber = arr.find(num => num % 2 === 0);
console.log(firstEvenNumber); // Console [2]5、FindIndex
与 Find 方法类似，但它返回的是满足给定条件的第一个元素的索引值。如果数组中不存在满足条件的元素，则返回 -1。
const arr = [1, 2, 3, 4, 5];
const firstEvenNumberIdx = arr.findIndex(num => num % 2 === 0);
console.log(firstEvenNumberIdx);6、Reduce
这是一种高级聚合方法，用于将数组元素组合为单个值。其核心区别在于回调函数的第一个参数是累加器（accumulator），回调函数的返回值将作为下一次迭代时的累加器初始值。
const arr = [1, 2, 3, 4, 5];
// `acc` is the value of the accumulator
// the acccumulator is return value of the previous callback
// the second argument i.e `0` is the default value
const sum = arr.reduce((acc, num) => acc + num, 0);
console.log(sum); // Console: 157、Every
该方法接收一个返回布尔值的回调函数。只有当数组中所有元素都满足该条件时，Every() 才返回 true；否则返回 false。
const arr = [1, 2, 3, 4, 5];
const areAllEven = arr.every(num => num % 2 === 0);
console.log(areAllEven); // Console: false8、Some
与 Every 类似，该方法也接收返回布尔值的回调。只要数组中至少有一个元素满足条件，Some() 即返回 true。
const arr = [1, 2, 3, 4, 5];
const isOneEven = arr.some(num % 2 === 0);
console.log(isOneEven); // true
9、Sort
用于对数组元素进行排序的方法。
默认情况下，Sort 按字符串Unicode码点升序排列。若需自定义排序逻辑，需传入一个比较函数，该函数接收两个参数 a 和 b：若 a 小于 b 返回 -1，若 a 大于 b 返回 1。
若两个元素相等，则比较函数应返回 0。
const arr = [1, 2, 3, 4, 5];
const descendingArr = arr.sort((a, b) => b - a);
console.log(descendingArr);
需特别注意，与其他大多数数组方法不同，Sort 会直接修改原数组。
10、Flat
Flat 方法用于将嵌套数组展平为单层数组。可以通过指定参数来控制展平的深度。
const arr = [[[1, 2], [3]], [4, 5]];
const flattenedArr = arr.flat(4);
console.log(flattenedArr); // Console [1, 2, 3, 4, 5]11、Reverse
用于反转数组中元素的排列顺序，该方法会直接修改原数组。
const arr = [1, 2, 3, 4, 5];
const reversedArr = arr.reverse();
console.log(reversedArr); // Console [5, 4, 3, 2, 1]
12、Include
检查数组中是否存在指定值，若存在则返回 true，否则返回 false。
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(5)); // true
console.log(arr.includes(10)); // false13、Fill
Fill 方法用于将数组的指定范围或全部元素替换为给定值。在需要创建具有特定重复值的新数组以便配合 Map 或 forEach 使用时，此方法非常有用。
const emptyArr = new Array(5);
// The problem with this is that you get `[empty x 10]`
// You need real values to map over it.
const filledArr = emptyArr.fill(3); // Console [3, 3, 3, 3, 3]14、At
该方法返回指定索引处的元素。与传统通过下标访问（如 arr[1]）的区别在于，At 方法支持负数索引，允许从数组末尾向前访问元素。
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(1)); // 2
console.log(arr.at(-1)); // 5
// Important: Negative indices start from `1`, positive indices start from `0`.15、 Concat
该方法用于合并两个或多个数组，返回一个新数组，原数组保持不变。
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
console.log(arr1.concat(arr2)); // Console [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]以上就是对15个JavaScript重要数组方法的详细介绍，更多JS数组相关技巧可参考本站其他文章或继续浏览后续内容，希望本文对大家有所帮助。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19