for-of 循环是 ES6 新增的循环，它支持新的迭代协议。一般认为用来代替 for-in 循环和 forEach() 循环。

for-of 循环用于遍历一个可迭代的对象。在新的迭代协议中，数组 Array 、字符串 String、哈希表 Map 、集合 Set 等都是可迭代的对象。

例如，我们可以按照下面的方式，使用 for-of 迭代一个数组

const iterable = ['a','b'];
for ( const x of iterable ) {
    console.log(x);
}

运行结果如下

a
b

而且，我们还可以在 for-of 循环中使用 break 和 continue 关键字。

例如下面的代码，当数组中的元素是一个空字符串时退出

for (const x of ['a', '', 'b']) {
    if (x.length === 0) break;
    console.log(x);
}

输出结果如下

a

我们知道，数组除了保存的元素外，还有数组下表，这个可以通过 of 之前的两个键值对参数来解决，不过这个键值对的语法有点特别，看起来就像是另一个数组。

const arr = ['a', 'b'];
for (const [index, element] of arr.entries()) {
    console.log(index,' =>', element);
}

输出结果如下

0 " =>" "a"
1 " =>" "b"

注意到 [index,element] 这个语法没，这个语法也称之为解构语法。

源于解构语法的知识，我们有空再来讲解。现在你只需要知道，如果想要使用 for-of 循环获取数组中的键值对，那么就要使用 [index,element] 语法。

当然了，这种解构语法同样使用于哈希表 ( Map ）。也就是说我们可以在 for-of 循环中使用这个解构语法来遍历一个哈希表。

const map = new Map([
    [false, 'no'],
    [true, 'yes'],
]);
for (const [key, value] of map) {
    console.log(`${key} => ${value}`);
}

运行结果如下

false => no
true => yes

for-of 只适用于可迭代对象

注意，for-of 只适用于可迭代对象。虽然可迭代和对象看起来没差几个字。但是，for-of 严格来说，是不可以迭代一个对象的。

const arrayLike = { length: 2, 0: 'a', 1: 'b' };

for (const x of arrayLike) { // TypeError
    console.log(x);
}

运行上面这个脚本，会报 TypeError 错误。

但是，我们可以通过其它一些帮助函数来迭代对象，比如 Array.of() 函数，可以先把对象转换成数组，然后再使用 for-of 迭代

const arrayLike = { length: 2, 0: 'a', 1: 'b' };

for (const x of Array.from(arrayLike)) { // OK
    console.log(x);
}

输出结果如下

a
b
undefined

你能否猜到，为什么输出了 undefined ?