JavaScript中for...in、for...of与forEach()遍历方法的区别与用法

JavaScript遍历方法概述

for...in 、 for...of 和 forEach 均用于遍历集合元素，但存在关键差异。

for...in 循环

1.for...in 循环：

• for...in 主要遍历对象的属性，通常包括可枚举属性（含继承属性），而非数组或集合元素。
• 它遍历对象的属性名（键名），而非属性值。遍历对象属性时，包含继承属性和原型链上的属性。
• 适用于遍历普通对象（Object）的属性，不适用于数组或类似数据集合的遍历。

示例：

const person = {
  name: 'John',
  age: 30,
  job: 'Engineer'
};
for (let key in person) {
  console.log(key + ': ' + person[key]);
}

输出：

name: John age: 30 job: Engineer

for...of 循环

2.for...of 循环：

• for...of 用于遍历可迭代对象（如数组、字符串、Map、Set 等），并访问它们的值。
• 它不会遍历对象的属性，只会遍历集合中的元素。
• 适用于遍历数据集合，而不是对象的属性。

示例：

const colors = ['red', 'green', 'blue'];
for (let color of colors) {
  console.log(color);
}

输出：

red green:blue

forEach 方法

3.forEach：

• 用于遍历数组的元素，对每个元素执行一个回调函数。
• 提供了更高级别的抽象，让你可以更容易地执行数组操作，如映射、筛选、累加等。
• 不适用于普通对象，只适用于数组。示例：

Copy code
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

主要区别总结

主要区别总结：

• for…in 用于遍历对象的属性，for…of 用于遍历可迭代对象的元素，而 forEach 用于遍历数组元素。
• for…in 适用于对象，for…of 和 forEach 适用于数组。
• forEach 允许你传递一个回调函数，更容易进行复杂的操作，而 for…in 和 for…of 较为基础，只能用于遍历。
• 注意遍历对象时，for…in 会遍历继承的属性，这可能需要额外的处理。

到此这篇关于JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的文章就介绍到这了,更多相关js遍历元素内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！