JS数组遍历的方法和总结

前端绘梦师

已于 2024-08-21 11:35:08 修改

阅读量807

点赞数 23

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-08-21 11:33:40 首次发布

本文链接：https://blog.csdn.net/qq_53911056/article/details/141383964

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

2.for...in和for...of的区别

文章内容：JavaScript 中遍历数组中的每个元素是编程中的常见任务，有多种方法可以实现。以下是一些常用的数组遍历方法。

1.遍历数组的方法

（1）`for` 循环

for循环数组元素，对每个元素执行一次指定代码，是最基本的遍历数组的方法。

语法：for ([初始化表达式]; [条件表达式]; [递增（或递减）表达式]) {  
    // 循环体  
    // 要重复执行的代码块  
}

初始化表达式：在循环开始前执行，设置循环控制变量的初始值。

条件表达式：在每次循环开始判断。如果条件为true，则执行循环体；如果条件为false，则退出循环。

递增（或递减）表达式：在每次循环体执行完毕后执行，通常用于更新或递增循环控制变量。

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

（2）forEach()方法

forEach()数组中的每个元素都执行一次回调函数。forEach() 不会改变原始数组，可以用来遍历数组并根据每个元素执行相应的操作。

语法: array.forEach(function callback(currentValue, index, arr), thisValue)

callback：数组中每个元素需要执行的函数，该函数接收三个参数：
- currentValue：数组中正在处理的当前元素。
- index（可选）：数组中正在处理的当前元素的索引。
- array（可选）：forEach() 方法正在操作的数组。
- thisValue（可选）：执行 callback 函数时使用的 this 值。

let arr2 = [1, 2, 3, 4, 5];
arr2.forEach(function(value, index){
   console.log(value);
});

注意：forEach()不能中断遍历，即没有break语句的等效操作，且不支持return来跳出循环。

`（3）for...in循环`

for...in用于遍历对象的可枚举属性。它遍历数组时，会返回数组中所以可枚举的属性，包括原型链上可枚举的属性。它主要用于遍历对象，不适用遍历数组，也不推荐遍历数组。

let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key, obj[key]);
    }
};

`（4）for...of循环`

for...of 循环用于遍历数组或者可迭代的对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等）。

let arr3 = [1, 2, 3, 4, 5];
for (let value of arr3) {
    console.log(value);
}

（5） `map` 方法

map 方法主要用于创建一个新数组，其元素为原始数组元素调用函数处理后的值，但它也可以用于遍历数组。

语法: array.map(function(currentValue, index, arr), thisValue)

let arr4 = [1, 2, 3, 4, 5];
var newArr = arr4.map(function(value, index){
    return value * 2;
});
console.log(newArr);

`（6）filter` 方法

filter 方法主要用于创建一个新数组，其包含所有在数组中通过所提供条件满足的元素。

语法: array.filter(function(currentValue, index, arr), thisValue)

let arr5 = [1, 2, 3, 4, 5];
var newArr = arr5.filter(function(value, index){
    return value % 2 === 0;
});
console.log(newArr);

（7）some()方法

检查数组中的是否有至少一个元素符合条件。

let arr6 = [1, 2, 3, 4, 5];
var hasEven = arr6.some(function(value, index){
    return value % 2 === 0;
});
console.log(hasEven); // true

（8）every()方法

检查数组中的所有元素是否都符合条件。

let arr7 = [1, 2, 3, 4, 5];
var allEven = arr7.every(function(value, index){
    return value % 2 === 0;
});
console.log(allEven); // false

（9）find()方法

返回数组中第一个符合提供函数的元素的值

let arr8 = [1, 2, 3, 4, 5];
var foundNum = arr8.find(function(value, index){
    return value > 3;
});
console.log(foundNum); // 4

（10）findIndex()方法

返回数组中第一个符合提供函数的元素的索引，如果没有找到则返回 -1

let arr9 = [1, 2, 3, 4, 5];
var foundIndex = arr9.findIndex(function(value, index){
    return value === 2;
});
console.log(foundIndex); // 1

（11）reduce()方法

对数组正序操作，数组中的所有元素调用指定的回调函数并最终汇总为一个值，可以用于遍历数组。

let arr10 = [1, 2, 3, 4, 5]; 
let sum1 = arr10.reduce(function(accumulator, currentValue) { 
    console.log(currentValue); 
    return accumulator + currentValue; 
}, 0); 
console.log(sum1); // 15

// 使用箭头函数 
let sumArrow = arr10.reduce((accumulator, currentValue) => { 
    console.log(currentValue); 
    return accumulator + currentValue; 
}, 0);
console.log(sumArrow); // 15

（12）reduceRight()方法

对数组逆序操作，数组中的元素应用一个函数（从右到左），将其结果归约为单个值。

let arr11 = [1, 2, 3, 4, 5];
var sum = arr.reduceRight(function(accumulator, currentValue, index, arr){
    return accumulator + currentValue;
}, 0);
console.log(sum); // 15

2.for...in和for...of的区别

for...in循环：

遍历对象的可枚举属性（包括原型链上的属性），但主要用于遍历对象的属性，不推荐用于遍历数组。
适用场景：适用于遍历对象的属性，包括可枚举属性和原型链上的属性。
功能：可以遍历对象的所有可枚举属性，但遍历顺序不确定，而且会遍历到原型链上的属性。
性能表现：由于需要遍历原型链上的属性，且遍历顺序不确定，因此性能相对较差，不适合用于遍历数组。

for...of循环：

遍历方式：遍历可迭代对象的值（如数组、字符串、Set、Map等），直接访问数组元素。
适用场景：适用于遍历可迭代对象的值，如数组、字符串等，且需要直接访问元素值的场景。
功能：可以正确响应break、continue和return语句，支持在遍历过程中根据条件跳出循环。
性能表现：性能表现良好，因为它直接访问数组元素，且支持在遍历过程中进行条件判断和控制。

3.map和其他遍历方法的区别

数组遍历中的map方法与其他遍历方法（如for循环、forEach等）在返回值、对原数组的影响、链式调用能力以及适用场景等方面存在一些区别。

（1）返回值

map：会返回一个新数组，该数组的元素为原始数组元素调用函数处理后的值。

其他遍历方法（如for循环、forEach）：这些方法通常不直接返回一个新数组。for循环可以通过手动收集结果来构建新数组；而forEach方法则完全没有返回值（即返回undefined），它主要用于遍历数组并对每个元素执行操作，但不收集结果。

（2）对原数组的影响

map：不会改变原始数组。它返回的是一个新数组，原始数组保持不变。

其他遍历方法（如for循环、forEach，特别是for循环）：这些方法可以修改原始数组。特别是for循环，它允许在遍历过程中直接修改数组元素。虽然forEach本身不直接修改数组，但如果在回调函数中修改了数组元素的属性（对于对象数组），则原数组会被间接修改。然而这种修改并不改变数组的结构（如长度或元素顺序）。

（3）链式调用

map：由于map方法返回一个新数组，所以它可以与其他数组方法（如filter、reduce等）进行链式调用。这种链式调用可以简化代码，提高可读性。

其他遍历方法（如forEach）：forEach方法由于没有返回值，所以无法进行链式调用。

（4）性能和适用场景

性能：在大多数情况下，map方法和其他遍历方法（如for循环、forEach）的性能差异并不明显。但是如果涉及到大量数据处理或对性能有严格要求的应用场景，可能需要根据具体情况选择合适的遍历方法。

适用场景：map方法适用于需要对数组的每个元素进行操作，并希望收集结果到一个新数组的场景。而for循环和forEach方法则更灵活，适用于各种遍历需求，包括需要修改原数组、根据条件跳出循环等场景。

4.总结

forEach 和 for...of 循环主要用于遍历数组或可迭代对象的元素，执行一些简单的操作，如打印每个元素的值或对每个元素执行不返回新值的操作。它们适用于那些不需要基于遍历结果生成新数组或执行复杂计算的场景。

而 map、filter、reduce 等方法则提供了更高级的数据处理能力。map 方法用于将数组的每个元素通过指定的函数进行转换，并返回一个新数组。filter 方法用于创建一个新数组，该数组包含通过所提供函数满足筛选的所有元素。reduce 方法则对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。这些方法在处理或转换数组元素时非常有用，因为它们允许你以声明式的方式表达复杂的逻辑，并生成新的数据结构。