在前端开发中，循环是一个基础且重要的部分。ES7 中引入的 for...of 和 for...in 循环提供了新的遍历方式，可以让我们更加高效和灵活地处理数据结构。但如果不理解其使用方式，就会导致代码出现错误，影响代码的可读性和性能。因此，在本文中，我们将详细介绍如何合理使用 ES7 中的 for...of 和 for...in 循环。
for...of 循环
for...of 循环提供了一种新的遍历方式，可以让我们更加简单和高效地遍历数组、类数组对象、字符串、集合和映射等数据结构。
数组的遍历
在传统的循环中，我们可以使用 for 循环和数组下标的方式遍历数组元素，代码如下：
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}但使用 for...of 循环可以更加简单和高效，代码如下：
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item);
}类数组对象的遍历
类数组对象是指拥有 length 属性和索引元素的对象，如 arguments 对象、NodeList 对象等。在传统的循环中，我们需要将类数组对象转换为数组对象，然后使用 for 循环和数组下标的方式遍历元素，代码如下：
-- -------------------- ---- -------
-------- ----- -
--- ----- - --
----- ---- - --------------------------------------
--- ---- - - -- - - ------------ ---- -
----- -- --------
-
------ ------
-
------------------ -- -- -- ---- -- --但使用 for...of 循环可以直接遍历类数组对象中的元素，代码如下：
-- -------------------- ---- -------
-------- ----- -
--- ----- - --
--- ------ --- -- ---------- -
----- -- ----
-
------ ------
-
------------------ -- -- -- ---- -- --字符串的遍历
在传统的循环中，我们可以使用 for 循环和字符串下标的方式遍历字符串的字符，代码如下：
const str = 'hello world';
for (let i = 0; i < str.length; i++) {
console.log(str[i]);
}但使用 for...of 循环可以更加简单和高效，代码如下：
const str = 'hello world';
for (const char of str) {
console.log(char);
}集合和映射的遍历
集合和映射是 ES6 新增的数据结构，它们都具有迭代器（Iterator）接口。在 ES7 中，可以使用 for...of 循环遍历集合和映射中的元素，代码如下：
-- -------------------- ---- ------- ----- --- - --- ------- -- -- -- ---- --- ------ ---- -- ---- - ------------------ - ----- --- - --- ------------- ------- ------- ------ --- ------ ----- ------ -- ---- - ---------------- ------- -
for...in 循环
for...in 循环也是一种遍历方式，可以用来遍历对象的属性。但与 for...of 循环不同的是，for...in 循环遍历的是对象的可枚举属性，包括对象自身的属性和继承的属性。
遍历对象属性
在传统的循环中，我们可以使用 for...in 循环遍历对象的属性，代码如下：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ---- --- ------- ------ -- --- ------ --- -- ------- - --------------- - -- - - ------------- -
但需要注意的是，for...in 循环也会遍历对象继承的属性，例如 Object.prototype 上的 toString 方法，代码如下：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ---- --- ------- ------ -- --- ------ --- -- ------- - --------------- - -- - - ------------- -
如果只想遍历对象自身的属性，可以使用 Object.keys 方法获取对象的所有可枚举属性，然后使用 for...of 循环遍历属性，代码如下：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ---- --- ------- ------ -- --- ------ --- -- -------------------- - --------------- - -- - - ------------- -
总结
在合理使用 ES7 中的 for...of 和 for...in 循环的过程中，需要注意以下几点：
- for...of 循环只能遍历具有 Iterator 接口的数据结构；
- for...in 循环遍历的是对象的可枚举属性，包括对象自身的属性和继承的属性；
- 在使用 for...in 循环遍历对象的同时要注意避免遍历对象原型上的属性；
- 在使用 for...of 循环遍历元素时，避免在循环体内修改被遍历的数据结构。
正确使用 for...of 和 for...in 循环将会大大提高代码效率和可读性，降低出错的概率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653a4f277d4982a6eb43e050