详解JavaScript遍历:掌握for、forEach、for in、for of和map等方法

1,561 阅读10分钟

1.for循环

for循环是一种常用的遍历方法,特别适用于已知遍历次数的情况。它由三个部分组成:初始化表达式、循环条件和循环迭代器。这三个表达式用分号分隔。可以使用临时变量将数组的长度缓存起来,避免重复获取数组长度,当数组较大时优化效果会比较明显。

const array = [1,2,3,4,5];
for(let i = 0, len = array.length; i < len; i++ ){ //(初始化表达式; 循环条件; 循环迭代器)
    console.log(array[i]);
}

for循环非常灵活,你可以根据需要自定义循环变量的初始值、循环条件和迭代方式。它适用于各种遍历需求,包括遍历数组、对象的属性等。

2.forEach方法

forEach方法是JavaScript数组对象的一个内置方法,用于遍历数组的每个元素并执行指定的回调函数。以下是forEach方法的基本语法:

array.forEach(function(element, index, array) {});

forEach方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array

下面是一个使用forEach方法遍历数组的示例:

array.forEach(function(element, index) {// 对每个元素执行操作
    console.log(element);
});

需要注意的是:

  • forEach方法不会改变原数组,也没有返回值;
  • forEach方法无法在遍历过程中中止或跳出循环。如果你需要在遍历过程中进行条件判断或中断循环,可以考虑使用其他遍历方法,如for循环或for...of循环,使用 return 时,效果和在 for 循环中使用 continue 一致;
  • forEach方法无法遍历对象,仅适用于数组的遍历。

3.for...of循环(适用于数组和可迭代对象)

for...of循环是一种用于遍历可迭代对象(如数组、字符串、Set、Map等)的循环结构。它提供了一种简洁的语法来遍历对象的每个元素,而无需使用索引或迭代器。

以下是for...of循环的基本语法:

for (let element of iterable){// 对每个元素执行操作 }

for...of循环中,我们使用of关键字来指定要遍历的可迭代对象,并将每个元素赋值给一个变量(这里是element)。循环体内的代码将针对每个元素执行操作。下面是一个使用for...of循环遍历数组的示例:

for (let element of array) { // 对每个元素执行操作
    console.log(element);
}

需要注意的是:

  • for...of方法只会遍历当前对象的属性,不会遍历其原型链上的属性;
  • for...of循环不能用于遍历普通对象(Plain Object),因为普通对象不是可迭代对象。如果你需要遍历普通对象的属性,可以考虑使用for...in循环。
  • 可以使用break、continue、return来中断循环遍历。

4.for...in循环(适用于对象)

for...in循环是一种用于遍历对象的属性的循环结构。它可以用于遍历对象的可枚举属性(包括自身属性和继承的属性)。以下是for...in循环的基本语法:

for (let key in object) { // 对每个属性执行操作 }

for...in循环中,我们使用in关键字来指定要遍历的对象,并将每个属性的键赋值给一个变量(这里是key)。循环体内的代码将针对每个属性执行操作。

下面是一个使用for...in循环遍历对象的示例:

for (let key in object) { // 对每个属性执行操作 
    console.log(key + ": " + object[key]);
}

在上述示例中,我们使用for...in循环遍历对象object的每个属性,并在循环体内打印每个属性的键和对应的值。

需要注意的是:

  • for...in循环遍历的是对象的属性,而不是值。
  • 它会遍历对象的可枚举属性,包括自身属性和其原型链上的属性。如果只需要遍历对象自身的属性,可以使用Object.hasOwnProperty()方法进行过滤。
  • for...in循环不保证属性的遍历顺序,因此在遍历过程中不要依赖属性的顺序。

5.map方法

map方法用于对数组的每个元素执行指定的操作,并返回一个新的数组,新数组的元素是原数组经过操作后的结果。

以下是map方法的基本语法:

const newArray = array.map(function(element, index, array) { // 对每个元素执行操作,并返回新的值
    return modifiedElement;
});

map方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array

在回调函数中,我们对每个元素执行操作,并返回经过操作后的新值modifiedElementmap方法会遍历数组的每个元素,并将每个元素经过回调函数处理后的结果组成一个新的数组。

下面是一个使用map方法的示例:

const newArray = array.map(function(element) { // 对每个元素执行操作,并返回新的值
    return element * 2;
});

在上述示例中,我们使用map方法对数组array的每个元素进行操作,将每个元素乘以2,并将操作后的结果组成一个新的数组newArray

map方法是一种非常有用的方法,它可以方便地对数组的每个元素进行操作,并生成一个新的数组。 需要注意的是:

  • map方法不会修改原始数组,而是返回一个新的数组。
  • map方法无法遍历对象,仅适用于数组的遍历。
  • map方法不会对空数组进行检测;

6.reduce方法

reduce方法用于对数组的每个元素进行累积操作,并返回一个最终的累积结果。

以下是reduce方法的基本语法:

// 对每个元素执行累积操作,并返回累积结果
const result = array.reduce(function(accumulator, element, index, array) {
    return accumulatedValue;
}, initialValue);

reduce方法中,我们传入一个回调函数作为参数。该回调函数接受四个参数:累积值accumulator、当前元素的值element、当前元素的索引index和正在遍历的数组array

在回调函数中,我们对每个元素执行累积操作,并将累积结果返回。reduce方法会遍历数组的每个元素,并将每个元素经过回调函数处理后的累积结果作为下一次迭代的累积值。

下面是一个使用reduce方法的示例:

const array = [1, 2, 3, 4, 5];
const result = array.reduce(function(accumulator, element) { // 对每个元素执行累积操作,并返回累积结果
    return accumulator + element;
}, 0);
console.log(result); // 输出: 15

在上述示例中,我们使用reduce方法对数组array的每个元素进行累积操作,将所有元素相加得到最终的累积结果。

需要注意的是:

  • reduce方法不会改变原数组。
  • reduce方法可以接受一个可选的初始值initialValue作为第二个参数。如果提供了初始值,累积值accumulator的初始值将为该值;如果未提供初始值,则累积值将为数组的第一个元素,且从数组的第二个元素开始进行累积操作。
  • 如果数组为空,且未提供初始值,则reduce方法会抛出一个TypeError。在处理可能为空的数组时,要确保提供了合适的初始值或进行适当的错误处理。

7.filter方法

filter方法用于筛选数组中满足指定条件的元素,并返回一个新的数组。

以下是filter方法的基本语法:

const newArray = array.filter(function(element, index, array) { // 返回一个布尔值,表示是否保留该元素 },thisArg);

filter方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组arraythisArg是可选的参数,用于指定回调函数中的this值。如果省略了thisArg参数,回调函数中的this将指向全局对象(在浏览器中为window对象)。

在回调函数中,我们根据指定的条件判断是否保留该元素。如果回调函数返回true,则该元素将被保留在新的数组中;如果返回false,则该元素将被过滤掉。

下面是一个使用filter方法的示例:

const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(element) { // 返回一个布尔值,表示是否保留该元素
    return element % 2 === 0; // 保留偶数元素
});
console.log(newArray); // 输出: [2, 4]

在上述示例中,我们使用filter方法筛选数组array中的偶数元素,并将满足条件的元素组成一个新的数组newArray

filter方法非常灵活,可以根据不同的条件筛选数组中的元素。回调函数应该返回一个布尔值,表示是否保留该元素。返回true表示保留,返回false表示过滤掉。

需要注意的是:

  • filter方法会返回一个新的数组,该数组包含满足指定条件的元素。请确保在回调函数中返回一个布尔值,表示是否保留该元素。
  • filter方法不会对空数组进行检测。

8.some方法

some方法用于检测数组中是否至少有一个元素满足指定条件。

以下是some方法的基本语法:

const result = array.some(function(element, index, array) { // 返回一个布尔值,表示是否满足条件 });

some方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array

在回调函数中,我们根据指定的条件判断是否满足条件。如果回调函数返回true,则表示至少有一个元素满足条件;如果所有元素都不满足条件,回调函数返回false

下面是一个使用some方法的示例:

const array = [1, 2, 3, 4, 5];
const result = array.some(function(element) { // 返回一个布尔值,表示是否满足条件
    return element > 3; // 判断是否存在大于3的元素
});
console.log(result); // 输出: true

在上述示例中,我们使用some方法检测数组array中是否存在大于3的元素。由于数组中存在元素4和5满足条件,所以some方法返回true

some方法可以用于检测数组中是否满足某个条件的元素。它提供了一种简洁的方式来进行条件判断。

需要注意的是:

  • some方法在找到满足条件的元素后会立即停止遍历,不会继续遍历剩余的元素。
  • some方法不会改变原数组,会返回一个布尔值。

9.every方法

every方法用于检测数组中的所有元素是否都满足指定条件。

以下是every方法的基本语法:

const result = array.every(function(element, index, array) { // 返回一个布尔值,表示是否满足条件 });

every方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array

在回调函数中,我们根据指定的条件判断是否满足条件。如果回调函数对数组中的所有元素都返回true,则every方法返回true;如果有任何一个元素返回false,则every方法返回false

下面是一个使用every方法的示例:

const array = [1, 2, 3, 4, 5];
const result = array.every(function(element) { // 返回一个布尔值,表示是否满足条件
    return element > 0; // 判断是否所有元素都大于0
});
console.log(result); // 输出: true

在上述示例中,我们使用every方法检测数组array中的所有元素是否都大于0。由于数组中的所有元素都大于0,所以every方法返回true

every方法可以用于检测数组中的所有元素是否满足某个条件。它提供了一种简洁的方式来进行条件判断。

需要注意的是:

  • every方法在找到不满足条件的元素后会立即停止遍历,不会继续遍历剩余的元素。
  • every方法不会改变原数组,会返回一个布尔值。