JavaScript中有多种遍历数组的方法,每种方法都有其特点和适用场景。以下是几种常见的遍历数组的方法及其区别:
- for循环:是最基本的遍历数组的方法,适用于任何情况。但代码不够简洁,支持提前跳出循环。break跳出循环,continue跳出当前分支继续下一个循环。
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- for...of循环:是ES6新增的遍历语法,适用于遍历可迭代对象(如数组、字符串、Map等)。语法简洁,但无法获取索引。支持提前跳出循环。
let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
console.log(value);
}
- forEach方法:也是数组提供的方法之一,会依次处理数组中的每个元素,但无法跳出循环。同时,无法获取当前元素的索引。可以使用return的方式跳出当前循环分支.不支持break和continue
let arr = [1, 2, 3, 4, 5];
arr.forEach(value => {
if (value === 2) {
return;
}
console.log(value);
});
// 打印
1
3
4
5
- map方法:会返回一个新的数组,原始数组不变。主要用于对数组中的每个元素进行操作并返回处理后的新数组。可以跳出循环,但会生成新的数组。不支持break和continue
let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(value => {
if (value % 2 === 0) { // 只处理偶数,相当于跳出循环
return value;
}
});
console.log(newArr); // [2, 4]
- filter方法:会返回一个新的数组,只包含符合条件的元素。与map方法类似,可以跳出循环,但会生成新的数组。不支持break和continue
let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(value => {
if (value % 2 === 0) { // 只保留偶数,相当于跳出循环
return true;
}
});
console.log(newArr); // [2, 4]
- for...in循环:用于遍历对象的属性或数组的索引。但通常不用于遍历数组元素,因为会遍历到原型链上的属性。且无法跳出循环。
- for...of循环与for...in循环的区别:for...in循环会遍历对象所有可枚举的属性(包括原型链上的),而for...of循环只会遍历对象自身的可枚举属性(不包括原型链上的)。因此,for...of循环更适合遍历数组或类数组对象。