JavaScript ES5 数组五大迭代方法详解与应用

通用参数与特性准备

所有上述迭代方法在处理数组时遵循统一的接口规范：

• 回调函数参数：传入的函数会接收到三个固定参数：item（当前项的值）、index（当前项的索引位置）和 array（数组对象本身）。
• 非修改性：这些迭代方法本身不会改变原始数组的内容，而是基于原数组生成新的返回值或执行副作用操作。
• 作用域控制：第二个可选参数用于指定回调函数执行时的上下文对象（即 this 的值）。

条件判定类：every 与 some

every() 和 some() 主要用于判断数组中的元素是否满足特定条件，二者逻辑相反但结构相似。

第1步：使用 every() 进行全量验证

目的：确认数组中所有元素是否都符合某个条件。
动作：调用 array.every(callback)。
结果：仅当回调函数对每一项返回 true 时，整体返回 true；若遇到任何一项返回 false，则立即终止并返回 false。

var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 检查所有项是否大于 2
var result = nums.every(function (item, index, array) {
    return item > 2;
});
console.log(result); // 输出: false（因为存在小于等于2的项）

第2步：使用 some() 进行存在性检测

目的：快速判断数组中是否存在至少一个满足条件的元素。
动作：调用 array.some(callback)。
结果：只要有一项回调返回 true，整体立即返回 true；仅当所有项均返回 false 时才返回 false。

var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 检查是否存在大于 2 的项
var result = nums.some(function (item, index, array) {
    return item > 2;
});
console.log(result); // 输出: true

数据变换类：filter 与 map

这两个方法都会返回一个新的数组，但 filter 侧重于过滤，map 侧重于转换。

第3步：使用 filter() 筛选子集

目的：从原数组中提取符合特定条件的元素组成新数组。
入口：array.filter(callback)。
参数：回调需返回布尔值，决定该元素是否保留在新数组中。
完成状态：返回包含所有“真值”项的新数组，原数组不变。

var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 筛选出大于 2 的元素
var result = nums.filter(function (item, index, array) {
    return item > 2;
});
console.log(result); // 输出: [3, 4, 5, 4, 3]

第4步：使用 map() 创建映射数组

目的：将原数组的每一项经过计算后，生成一一对应的新值。
入口：array.map(callback)。
参数：回调返回任意类型的值，该值将成为新数组对应位置的元素。
完成状态：返回长度与原数组相同的新数组，包含每次函数调用的结果。

var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 将所有元素乘以 2
var result = nums.map(function (item, index, array) {
    return item * 2;
});
console.log(result); // 输出: [2, 4, 6, 8, 10, 8, 6, 4, 2]

纯遍历类：forEach

第5步：使用 forEach() 执行副作用操作

目的：对数组中的每个元素执行一次性操作（如 DOM 渲染、日志打印），无需返回值。
入口：array.forEach(callback)。
特点：始终返回 undefined。本质等同于传统的 for 循环，但语法更简洁且不易受闭包陷阱影响。

var nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
nums.forEach(function (item, index, array) {
    console.log(item);
});
// 该方法不返回数组，无法链式调用

上述五种迭代方法在现代浏览器（IE9+、Firefox 2+、Safari 3+、Opera 9.5+、Chrome 等）中均得到广泛支持，已成为 JavaScript 数据处理的标准实践。

以上就是 JavaScript ES5 数组五大迭代方法（every, filter, forEach, map, some）的详细解析与代码演示，更多关于 JavaScript 数组高级技巧的资料请关注本站其它相关文章！