[ES2016] JavaScript 中的 for-of 循环

yufei       3 年, 7 月 前       400

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 循环中使用 breakcontinue 关键字。

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

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 ?

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.