for...of
语句在可迭代对象(包括 Array
, Map
, Set
, String
, TypedArray
,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.
语法
for (variable of object) { statement }
variable
- 每一次迭代,不同属性的属性值会被赋值给该变量.
object
- 一个可迭代对象.
例子
遍历 Array
:
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
如果你不修改语句块中的变量 , 也可以使用 const
代替 let
.
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30
遍历 String
:
let iterable = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
遍历 TypedArray
:
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
// 0
// 255
遍历Map
:
let iterable = new Map([["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
:
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3
遍历 DOM 集合
遍历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; console.log(n); }
遍历另外的可遍历对象
您也可以遍历一个已经明确的可遍历(可迭代)协议。参见 iterable。
var iterable = {
[Symbol.iterator]() {
return {
i: 0,
next() {
if (this.i < 3) {
return { value: this.i++, done: false };
}
return { value: undefined, done: true };
}
};
}
};
for (var value of iterable) {
console.log(value);
}
// 0
// 1
// 2
for...of与
for...in的区别
for...in循环会遍历一个object所有的可枚举属性。
for...of语法是为各种collection对象专门定制的,并不适用于所有的object.它会以这种方式迭代出任何拥有[Symbol.iterator]
属性的collection对象的每个元素。
下面的例子演示了for...of
循环和 for...in
循环的区别。for...in
遍历每一个属性名称,而 for...of遍历每一个属性值
:
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};
let iterable = [3, 5, 7];
iterable.foo = "hello";
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
规范
规范 | 状态 | 注释 |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) for...of statement |
Standard | 初始定义 |
ECMAScript 2017 Draft (ECMA-262) for...of statement |
Draft |
浏览器兼容性
特性 | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 38[1] 51[3] |
13 (13)[2] | 12 | ? | 25 | 7.1 |
特性 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基础支持 | ? | 38 [1] | 13.0 (13) [2] | ? | ? | 8 |
[1]从 Chrome 29 到 Chrome 37 这个特性可以在配置之后使用。配置方法:在 chrome://flags/#enable-javascript-harmony 中激活选项“Enable Experimental JavaScript”。
[2] 从Gecko 17 (Firefox 17 / Thunderbird 17 / SeaMonkey 2.14) 到 Gecko 26 (Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2) 遍历属性可被使用(bug 907077), 从 Gecko 27 到 Gecko 35, "@@iterator"
符号可被使用。在Gecko 36 (Firefox 36 / Thunderbird 36 / SeaMonkey 2.33), @@iterator
symbol 生效 (bug 918828)。
[3] 对遍历对象的支持于 Chrome 51被添加。
相关链接
- for each...in - E4X中的语法,遍历对象的属性值,还不是属性名.
Array.forEach()
- Map.prototype.forEach()