for...of

该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性。

for...of语句在可迭代对象(包括 ArrayMap, Set, 参数 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.

语法

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);
}

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? 13 (13) bug 699565 ? ? ?
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 13.0 (13) bug 699565 ? ? ?

相关链接

文档标签和贡献者

 此页面的贡献者: iamchenxin, teoli, ziyunfei
 最后编辑者: iamchenxin,