这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

迭代器 for...of

ES2015的标准增加了：Iterators + For..Of即迭代器 for...of，这篇文章我们就来了解一下什么是迭代器 for...of。

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

如何使用

在每次迭代中，将不同属性的值分配给变量。其实和for循环类似，可类比学习。

迭代数组

let iterable = ['也笑', 'slifree'];

for (let value of iterable) {
    console.log(value);
}

迭代数组，输出如下：

也笑
slifree

迭代字符串

let iterable = "也笑";

for (let value of iterable) {
  console.log(value);
}

迭代字符串，输出如下：

也
笑

迭代 TypedArray

一个类型化数组（TypedArray） 对象描述了一个底层的二进制数据缓冲区（binary data buffer）的一个类数组视图（view），使用如下：

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}

迭代 TypedArray，输出如下：

0
255

迭代 Map

首先让我们看下 Map 作用后的输出，如下：

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
console.log(iterable); // Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

*第一种迭代方式：

for (let entry of iterable) {
  console.log(entry);
}

输出为：

["a", 1]
["b", 2]
["c", 3]

我们可以看到它的遍历值是个对象，所以我们可以用第二种方式，只拿我们想要的结果，如下:

for (let [key, value] of iterable) {
  console.log(value);
}

输出为：

1
2
3

迭代 Set

首先让我们看下 Set 作用后的输出，如下：

let iterable = new Set([1, 1, 2, 2, 3, 3]);
console.log(iterable); // Set(3) { 1, 2, 3 }

开始迭代，使用如下：

for (let value of iterable) {
  console.log(value);
}

输出为：

1
2
3

注意事项

我们需要注意的是：对于for...of的循环，可以由break, throw  continue 或return终止。在这些情况下，迭代器关闭。

总结

在项目开发中，我们用for...of的场景一般是去遍历的去拿到数据值。

如果你想了解ES的其他特性，请移步到 ES2015+碎片化学习，每天都在向前走一步，这是所有文章的目录入口。