JavaScript使用 for...in 、 for...of 或者 forEach() 遍历元素的示例

for...in 、 for...of 和 forEach 都是用于循环遍历集合元素的方法，但它们之间有一些重要的区别：

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

2.for...of 循环：

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

示例：

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

输出：

red
green
blue

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遍历元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！