ES6 语法：理解 for-of 与 for-in 的区别-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，for-of 和 for-in 是两种常用的循环遍历方式。虽然它们都可以使用来遍历数组或对象，但却有着不同的使用场景以及区别。

for-of 循环

for-of 循环是 ES6 新增的一种循环遍历方式，它的作用是用来遍历可迭代对象（Iterable Object），例如数组、Set 等。

for-of 循环不仅可以遍历数组中的元素，也可以遍历字符串中的字符，甚至还可以遍历一个 Map 的键值对。

下面是 for-of 的语法格式：

for (let variable of iterable) {
  // 循环体代码块
}

其中，variable 是遍历过程中的变量，它会在每一次循环中被赋值为当前迭代中的元素值；iterable 则是被遍历的可迭代对象。

下面是一个使用 for-of 遍历数组的示例代码：

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

for-in 循环是一种旧的循环遍历方式，在 ES6 中依然保留。它的作用是用来遍历一个对象中的属性名，例如遍历一个对象的属性或遍历一个数组的索引（实际上，for-in 循环可以用来遍历任意对象的属性）。

下面是 for-in 的语法格式：

for (variable in object) {
  // 循环体代码块
}

其中，variable 是遍历过程中的变量，它会在每一次循环中被赋值为当前迭代中的属性名（或索引）；object 则是被遍历的对象。

需要注意的是，for-in 循环遍历数组时，变量获取的是数组中的索引值（也就是属性名），而不是数组中的元素值。

下面是一个使用 for-in 遍历对象的示例代码：

const obj = { a: 1, b: 2, c: 3 };
for (const prop in obj) {
  console.log(prop); // 输出：a b c
}

接下来，我们来看一下 for-of 和 for-in 的区别，主要有以下几点：

遍历对象：for-in 循环能够遍历任意对象的属性，包括继承的属性，而 for-of 循环只能遍历可迭代对象（Iterable Object），例如数组、Set 等。
遍历顺序：for-in 循环遍历对象时，每一次迭代返回的是一个属性名（或索引），而 for-of 循环遍历数组或字符串时，每一次迭代返回的是一个元素值。因此，for-in 循环的迭代顺序是不确定的，可能会导致遍历顺序与预期不一致，而 for-of 循环的迭代顺序是固定的，总是按照数组或字符串的顺序进行遍历。
能否获取元素索引：for-in 循环遍历数组时，返回的是数组中的索引值（即属性名），因此它可以用来遍历数组中的索引。而 for-of 循环无法获取数组的索引，因此不能用来遍历数组中的索引。

对于需要遍历数组或字符串中的元素，以及遍历 Set、Map 等 Iterable Object，我们应该优先选择使用 for-of 循环。而对于需要遍历一个对象中的属性，不论是自身属性还是继承属性，我们应该使用 for-in 循环。

不同的循环方式在不同的场景中有着不同的使用价值，因此我们需要根据实际情况进行选择。同时，在使用 for-in 循环时，要注意它的遍历顺序不确定的问题，避免在遍历时产生错误。

希望以上内容对您对于 for-in 与 for-of 的区别有所了解，在实际开发中能够更好地选择使用合适的遍历方式。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6493fdbc48841e989418bb1c