ES6中for...of和for...in的比较指南

2023-10-24 19:53:28

在ES6中，for...of和for...in循环是遍历数据结构的两种常见方法。虽然这两种循环都用于遍历，但它们在语义和行为上有根本的不同。本文旨在通过深入探讨这两种循环之间的差异，帮助开发者了解何时使用for...of，何时使用for...in。

语义差异

for...of循环旨在遍历可迭代对象中的值，而for...in循环旨在遍历可枚举对象中的键。这一语义差异决定了它们各自的适用场景。

for...of循环：

使用for...of循环遍历数组、集合、字符串等可迭代对象。
循环变量获取的是对象的值。
不会遍历对象的原型链。

for...in循环：

使用for...in循环遍历对象的可枚举属性，包括自身的和从原型链继承的。
循环变量获取的是对象的键（属性名）。
会遍历对象的原型链。

行为差异

除了语义差异外，for...of和for...in循环在行为上也有所不同。

for...of循环：

仅遍历对象的可迭代属性。
按照插入顺序遍历对象。
不能用于遍历null和undefined值。
不能用于遍历函数。

for...in循环：

遍历对象的所有可枚举属性，包括从原型链继承的。
遍历顺序不受插入顺序影响，而是由引擎决定。
可以用于遍历null和undefined值，但会引发TypeError异常。
可以用于遍历函数。

何时使用`for...of`

一般来说，应在以下情况下使用for...of循环：

需要遍历可迭代对象的值。
需要按插入顺序遍历对象。
对象没有自定义的迭代器。

何时使用`for...in`

一般来说，应在以下情况下使用for...in循环：

需要遍历对象的键。
需要遍历对象的原型链。
对象有自定义的迭代器。
需要遍历null或undefined值（不推荐）。

代码示例

下面的代码示例展示了for...of和for...in循环的用法：

// for...of循环
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number); // 输出：1 2 3 4 5
}

// for...in循环
const person = { name: 'John', age: 30 };
for (const key in person) {
  console.log(key); // 输出：name age
}