在 ES6 中，for...of 和 for...in 讲解

在 ES6 中，for...of 和 for...in 是两种用于遍历不同数据结构的循环结构。它们各自有不同的用途和适用场景。

for...of

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

语法

for (variable of iterable) {  
  // 执行语句  
}

示例

const array = [1, 2, 3, 4, 5];  
for (const value of array) {  
  console.log(value); // 输出每个数组元素的值  
}

遍历字符串：

const str = "hello";  
for (const char of str) {  
  console.log(char); // 输出字符串的每个字符  
}

遍历 Map 对象：

const map = new Map();  
map.set('key1', 'value1');  
map.set('key2', 'value2');  
for (const [key, value] of map) {  
  console.log(key, value); // 输出 Map 中的每个键值对  
}

for...in

for...in 循环用于遍历对象的可枚举属性（包括对象自身的和继承的属性）。

语法

for (variable in object) {  
  // 执行语句  
}

示例

遍历对象的属性：

const obj = { a: 1, b: 2, c: 3 };  
for (const key in obj) {  
  console.log(key); // 输出对象的每个属性名  
  console.log(obj[key]); // 输出对象的每个属性值  
}

注意：for...in 循环不仅遍历对象自身的属性，还会遍历其原型链上的属性。如果你只想遍历对象自身的属性，可以使用 Object.prototype.hasOwnProperty.call() 方法来检查属性是否是对象自身的。

区别

• for...of 用于遍历可迭代对象的值，而 for...in 用于遍历对象的可枚举属性。
• for...of 更适用于数组、字符串、Map、Set 等可迭代对象，而 for...in 更适用于对象的属性遍历。
• for...in 还会遍历对象原型链上的属性，而 for...of 不会。

使用建议

• 当需要遍历数组、字符串、Map、Set 等可迭代对象的值时，使用 for...of。
• 当需要遍历对象的属性时，使用 for...in，但需要注意可能遍历到原型链上的属性。
• 如果只想遍历对象自身的属性，可以使用 Object.keys(), Object.values(), 或 Object.entries() 方法与 for...of 结合使用。

  const obj = { a: 1, b: 2, c: 3 };  
  for (const key of Object.keys(obj)) {  
    console.log(key); // 只输出对象自身的属性名  
  }