一个数据结构只要部署了Symbol.iterator属性,就被视为具有 iterator 接口,就可以用for…of循环遍历它的成员。也就是说,for…of循环内部调用的是数据结构的Symbol.iterator方法。
for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。
数组
for…of循环可以代替数组实例的forEach方法。
JavaScript 原有的for…in循环,只能获得对象的键名,不能直接获取键值。ES6 提供for…of循环,允许遍历获得键值。
const arr = ['red', 'green', 'blue'];
// for...of
for(let v of arr) {
console.log(v); // red green blue
}
// for...in
for (let v in arr) {
console.log(v); // 0 1 2
console.log(arr[v])//red green blue
}
// forEach
arr.forEach(function (element, index) {
console.log(element); // red green blue
console.log(index); // 0 1 2
});
for…in循环读取键名,for…of循环读取键值。for…of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟for…in循环也不一样。
let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // "3", "5", "7"
}
上面代码中,for…of循环不会返回数组arr的foo属性。
与其它遍历语法的比较
forEach循环:无法中途跳出循环,break命令或return命令都不能奏效。
for…in循环啊有几个缺点:
1. 数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
2. for…in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
3. 某些情况下,for…in循环会以任意顺序遍历键名。
总之,for…in循环主要是为遍历对象而设计的,不适用于遍历数组。
for…of循环相比上面几种做法,有一些显著的优点。
1.
有着同for…in一样的简洁语法,但是没有for…in那些缺点。
2.
不同于forEach方法,它可以与break、continue、和return配合使用。
3.
提供了遍历所有数据结构的统一操作接口。
for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);}
上面的例子,会输出斐波纳契数列小于等于 1000 的项。如果当前项大于 1000,就会使用break语句跳出for…of循环。