JavaScript 数组遍历方法比较

最新推荐文章于 2025-05-27 20:35:07 发布

原创最新推荐文章于 2025-05-27 20:35:07 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

本文详细对比了JavaScript中常见的数组遍历方法，包括for循环、forEach、for...in、for...of、map、reduce、filter、some及every等。深入探讨了每种方法的特点、适用场景及性能考量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript数组遍历方法的对比

for语句

let array = [1, 2, 3, 4, 5, 100000000];
for (let i = 0, length = array.length; i < length; i++) {
	console.log(array[i]);
}

这是最传统的循环语句。这里采用了length = array.length，缓存数组长度，可以减少每次循环访问它的性能开销。

forEach语句

forEach 接收一个函数作为callback，循环时对数组的每一项调用一次 callback 方法，不改变数组本身，总是返回undefined，并且不可链式调用，循环无法中断。

let array = [1, 2, 3, 4, 5, 100000000];
array.forEach((element, index, array) => {
	console.log(element);
});

for in语句

for in 通常用来遍历对象的属性，包括可枚举的属性（enumerable为 true），同时还会遍历原型链上的属性，因此效率较低。目前hasOwnPrototype是唯一可以判断一个对象的属性是自定义属性而不是原型链上的属性。

//遍历数组 => 访问key为 下标
let array = [1, 2, 3, 4, 5, 100000];
for (let key in array) {
	console.log(key, array[key]);
}

//遍历对象，访问key为 属性名
var obj = {
	name: 'xiaoxiao',
    day: '0805',
}
for (let key in obj) {
	if (obj.hasOwnProperty(key)) {
        const element = obj[key];
        console.log(key, element);
    }
}

for of语句

for of 用于遍历可迭代对象，包括 Array、String、Map、Set、arguments 等，只要是可迭代对象，都可用 for of 来遍历。当用来遍历不可迭代对象时会报错。

var array = [{ name: "xixi" }, { year: 21 }, 13, true];
for (const iterator of array) {
    console.log(iterator);
}

map() 语句

map() 方法接收一个函数作为callback，循环时对数组的每一项调用一次 callback 方法，并使用返回的值组合成一个新数组（无返回值为 undefined），并返回该数组，不会改变原数组。

var array = [1,2,3]
var res = array.map((element, index, array) => element * 5) //[5, 10, 15]

reduce()语句

reduce()方法提供一个callback和一个初始值，callback 中让数组中的前项和后项做某种计算，累计并返回最终值。初始值作为第一次调用 callback 函数时的第一个参数值。

var array = [3, 8, 5, 2];
var sum = array.reduce((accumulator, currentValue, currentIndex, array) => {
	return accumulator + currentValue;
}, 2);
console.log(sum); //20

fileter()语句

filter() 方法创建一个新数组，其中包含所有在 callback 中返回为 true 的元素，并返回该数组。

var array = [3, 8, 5, 2];
var res = array.filter((element, index, array) => {
	return element > 3;
}); //[8,5]

some()语句

some() 方法测试数组中是否至少有1个元素通过了被提供的函数测试。当找到通过的元素后，即停止循环，并返回结果 true，否则返回 false。如果是空数组，默认返回false。

var array = [3, 8, 5, 2];
var res = array.some((element, index, array) => {
	return element > 3;
}); //true

every()语句

every() 方法测试一个数组内的所有元素是否都能通过被提供的测试函数。当找到不通过的元素时，即停止循环，并返回 false，否则返回 true。若收到一个空数组，此方法在一切情况下都会返回 true。

var array = [3, 8, 5, 2];
var res = array.every((element, index, array) => {
    return element > 3;
}); //false