for...of

概述

该语句用来遍历一个可迭代对象(包括数组,类数组对象,迭代器和生成器 ),针对每个属性的属性值,调用一个自定义的语句块.

语法

for (variable of object)
  statement

参数

variable

每一次迭代,不同属性的属性值会被赋值给该变量.

object

一个可迭代对象.

例子

下面的例子演示了for...of 循环和 for...in 循环的区别.for...in 遍历每一个属性名称,而 for...of遍历每一个属性值:

let arr = [ 3, 5, 7 ];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

遍历Dom元素集合,比如一个NodeList对象: 下面的例子演示给每一个article标签的p子标签添加一个 "read" class.

let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

您还可以遍历一个生成器：

// 注意: Firefox目前还不支持 "function*".
// 删除该*号可以让下面的代码在Firefox 13中正常运行.
 
function* fibonacci() { // 一个生成器函数
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}
 
for (let n of fibonacci()) {
    // 当n大于1000时跳出循环
    if (n > 1000)
        break;
    print(n);
}

浏览器兼容性

相关链接

• for each...in - E4X中的语法,遍历对象的属性值,还不是属性名.
• Array.forEach()