ES5新增数组方法详解:isArray、map、forEach、filter、reduce及索引查找

作者:异步漫步

时间:2026-10-23

浏览:588

本文详细介绍ES5标准中新增的数组操作方法。涵盖静态方法isArray判断数组类型,以及实例方法map、forEach、filter和reduce的用法与区别。同时解析indexOf与lastIndexOf的索引查找机制及NaN处理限制,帮助开发者高效处理数组数据。

文章目录

判断数组类型:Array.isArray

Array.isArray() 是ES5引入的静态方法,用于判断一个对象是否为数组实例。


Array.isArray()
// Array.isArray方法返回一个布尔值,表示参数是否为数组。
// 它可以弥补typeof运算符的不足。
var arr = [1, 2, 3];
 console.log(typeof arr); // "object"
 Array.isArray(arr) // true
// 上面代码中,typeof运算符只能显示数组的类型是Object,
// 而Array.isArray方法可以识别数组。

数组映射与遍历:map与forEach

map() 是数组实例方法,用于对数组元素进行映射处理。

该方法遍历数组所有成员,将每个成员传入回调函数执行,并将每次执行的结果收集到一个新数组中返回。


var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
 return n + 1;
});
res:  // [2, 3, 4]
numbers:// [1, 2, 3]
// 上面代码中,numbers数组的所有成员依次执行参数函数,
// 运行结果组成一个新数组返回,原数组没有变化。

map() 接收一个回调函数作为参数。该回调函数在调用时,会依次接收三个参数:当前处理元素的值、当前元素的位置索引以及数组本身。


[1, 2, 3].map(function(elem, index, arr) {
 return elem * index;
});
// [0, 2, 6]
// 上面代码中,map方法的回调函数有三个参数,elem为当前成员的
// 值,index为当前成员的位置,arr为原数组([1, 2, 3])

forEach() 是ES5新增的数组遍历方法。

forEach() 与 map() 类似,都是依次对数组成员执行回调函数。主要区别在于,forEach() 不返回新数组,仅用于执行副作用操作。若需获取处理后的返回值,应使用 map();若仅需遍历执行逻辑,则使用 forEach()。其回调函数同样接收三个参数:当前值、当前位置和整个数组。


function log(elem, index, array) {
 console.log('[' + index + '] = ' + elem );
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

注意:forEach() 无法通过 break 或 return 提前终止遍历,它总会遍历完所有成员。若需根据条件中断遍历,应使用传统的 for 循环。


var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
 if (arr[i] === 2) break;
 console.log(arr[i]);  // 1
}

数组过滤与归并:filter与reduce

filter() 是用于过滤数组的方法。

filter() 接收一个回调函数,遍历所有数组成员。只有当回调函数返回 true 的成员才会被保留,并组成一个新数组返回。该方法不会修改原数组。回调函数同样接收三个参数:当前成员值、当前位置索引和整个数组。


// filter方法的参数函数可以接受三个参数:当前成员,当前位置和整个数组。
var res = [1, 2, 3, 4, 5].filter(function (elem, index, arr) {
 return index % 2 === 0;
});
console.log(res); // [1, 3, 5]
// 上面代码返回偶数位置的成员组成的新数组。

reduce() 是用于数组归并计算的方法。

reduce() 从左至右依次处理数组成员,最终累计为一个单一值。该方法接收一个回调函数,回调函数接收两个参数:累积变量(默认为数组第一个成员)和当前变量(默认为数组第二个成员)。


var res = [1, 2, 3, 4, 5].reduce(function (a, b) {
 console.log(a, b);
 return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
res//最后结果:15

以计算数组元素之和为例:第一次执行时,累积变量 a 为第一个成员 1,当前变量 b 为第二个成员 2;第二次执行时,a 为上一轮返回值 3,b 为第三个成员 3;第三次执行时,a 为 6,b 为 4;第四次执行时,a 为 10,b 为 5。遍历结束后,方法返回最后一轮的累计值 15。

元素索引查找:indexOf与lastIndexOf

indexOf() 和 lastIndexOf() 是用于查找元素索引的方法。

indexOf() 返回指定元素在数组中第一次出现的位置索引。若未找到,则返回 -1。


var a = ['a', 'b', 'c'];
a.indexOf('b'); // 1
a.indexOf('y'); // -1
// indexOf方法还可以接受第二个参数,表示搜索的开始位置。
['a', 'b', 'c'].indexOf('a', 1); // -1
// 上面代码从1号位置开始搜索字符a,结果为-1,表示没有搜索到。

lastIndexOf() 返回指定元素在数组中最后一次出现的位置索引。若未找到,返回 -1。两者的主要区别在于搜索方向:lastIndexOf() 从数组尾部向前搜索,而 indexOf() 从头部向后搜索。此外,lastIndexOf() 可接受第二个参数,指定开始搜索的位置。


var a = [2, 5, 9, 2];
 a.lastIndexOf(2); // 3
 a.lastIndexOf(7); // -1

注意:这两个方法无法正确搜索 NaN 值,即无法通过它们确定数组是否包含 NaN。


[NaN].indexOf(NaN);   // -1
[NaN].lastIndexOf(NaN);// -1

原因在于内部使用了严格相等运算符(===)进行比较。由于 NaN 与自身不相等(NaN !== NaN),导致无法匹配。

以上为ES5新增数组方法的核心内容,更多相关技术细节可参考本站其他文章。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章