ES6中for of怎么用

在ES6（ECMAScript 2015）中，for...of 循环是一种新的迭代语法，用于遍历可迭代对象（如数组、字符串、Map、Set等）。与传统的 for 循环和 for...in 循环相比，for...of 提供了更简洁、直观的方式来遍历集合中的元素。本文将详细介绍 for...of 的用法及其与其它循环语法的区别。

1. for...of 的基本语法

for...of 循环的基本语法如下：

for (variable of iterable) {
  // 循环体
}

• variable：每次迭代时，variable 会被赋值为 iterable 中的当前元素。
• iterable：一个可迭代对象，如数组、字符串、Map、Set等。

示例：遍历数组

const arr = [1, 2, 3, 4, 5];

for (const item of arr) {
  console.log(item);
}

输出：

1
2
3
4
5

在这个例子中，for...of 循环遍历了数组 arr 中的每一个元素，并将其赋值给 item，然后在循环体中打印出来。

2. for...of 与 for...in 的区别

for...of 和 for...in 都是用于遍历的循环语法，但它们的行为有所不同。

• for...in：遍历对象的可枚举属性（包括原型链上的属性），通常用于遍历对象的键（key）。
• for...of：遍历可迭代对象的值（value），适用于数组、字符串、Map、Set等。

示例：for...in 遍历数组

const arr = [1, 2, 3, 4, 5];

for (const index in arr) {
  console.log(index);
}

输出：

0
1
2
3
4

在这个例子中，for...in 遍历的是数组的索引（index），而不是数组的值。

示例：for...of 遍历对象

const obj = { a: 1, b: 2, c: 3 };

for (const key of obj) {
  console.log(key);
}

输出：

TypeError: obj is not iterable

在这个例子中，for...of 无法直接遍历普通对象，因为普通对象不是可迭代对象。如果需要遍历对象的属性，可以使用 for...in 或 Object.keys() 等方法。

3. for...of 遍历字符串

for...of 也可以用于遍历字符串中的字符。

示例：遍历字符串

const str = "hello";

for (const char of str) {
  console.log(char);
}

输出：

h
e
l
l
o

在这个例子中，for...of 遍历了字符串 str 中的每一个字符。

4. for...of 遍历 Map 和 Set

for...of 还可以用于遍历 Map 和 Set 等数据结构。

示例：遍历 Map

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);

for (const [key, value] of map) {
  console.log(key, value);
}

输出：

a 1
b 2
c 3

在这个例子中，for...of 遍历了 Map 中的每一个键值对。

示例：遍历 Set

const set = new Set([1, 2, 3, 4, 5]);

for (const item of set) {
  console.log(item);
}

输出：

1
2
3
4
5

在这个例子中，for...of 遍历了 Set 中的每一个元素。

5. for...of 与迭代器

for...of 循环的背后是迭代器（Iterator）机制。任何实现了 [Symbol.iterator] 方法的对象都可以被 for...of 遍历。

示例：自定义可迭代对象

const myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const item of myIterable) {
  console.log(item);
}

输出：

1
2
3

在这个例子中，myIterable 对象实现了 [Symbol.iterator] 方法，使其成为一个可迭代对象，因此可以使用 for...of 进行遍历。

6. for...of 的优势

• 简洁直观：for...of 语法简洁，直接遍历集合中的值，不需要手动处理索引或键。
• 支持多种数据结构：for...of 不仅适用于数组，还适用于字符串、Map、Set 等可迭代对象。
• 避免 for...in 的陷阱：for...in 会遍历对象的原型链上的属性，而 for...of 只遍历集合中的值，避免了不必要的麻烦。

7. 总结

for...of 是 ES6 中引入的一种强大的循环语法，适用于遍历数组、字符串、Map、Set 等可迭代对象。与 for...in 相比，for...of 更加简洁直观，且避免了遍历对象属性时的潜在问题。掌握 for...of 的使用，可以让你在处理集合数据时更加得心应手。

希望本文能帮助你更好地理解和使用 for...of 循环。如果你有任何问题或建议，欢迎在评论区留言讨论。