es6 for...of循环

for...of循环

for...of

循环可以自动遍历 Generator函数时生成的

Iterator

对象，且此时不再需要调用

next()

方法。

function *foo() {

yield 1;

yield 2;

yield 3;

yield 4;

yield 5;

return 6;

}

for (let v of foo()) {

console.log(v);

}

// 1 2 3 4 5

上面代码使用

for...of

循环，依次显示 5 个

yield

表达式的值。这里需要注意，一旦

next()

方法的返回对象的

done

属性为

true

，

for...of

循环就会中止，且不包含该返回对象，所以上面代码的

return

语句返回的

6

，不包括在

for...of

循环之中。

下面是一个利用 Generator函数和

for...of

循环，实现斐波那契数列的例子。

function* fibonacci() {

let [prev, curr] = [0, 1];

for (;;) {

[prev, curr] = [curr, prev + curr];

yield curr;

}

}

for (let n of fibonacci()) {

if (n > 1000) break;

console.log(n);

}

从上面代码可见，使用

for...of

语句时不需要使用

next()

方法。

利用

for...of

循环，可以写出遍历任意对象（object）的方法。原生的 JavaScript 对象没有遍历接口，无法使用

for...of

循环，通过
Generator函数为它加上这个接口，就可以用了。

function* objectEntries(obj) {

let propKeys = Reflect.ownKeys(obj);

for (let propKey of propKeys) {

yield [propKey, obj[propKey]];

}

}

let jane = { first: 'Jane', last: 'Doe' };

for (let [key, value] of objectEntries(jane)) {

console.log(`${key}: ${value}`);

}

// first: Jane

// last: Doe

上面代码中，对象

jane

原生不具备 Iterator 接口，无法用

for...of

遍历。这时，我们通过
Generator函数

objectEntries

为它加上遍历器接口，就可以用

for...of

遍历了。加上遍历器接口的另一种写法是，将
Generator函数加到对象的

Symbol.iterator

属性上面。

function* objectEntries() {

let propKeys = Object.keys(this);

for (let propKey of propKeys) {

yield [propKey, this[propKey]];

}

}

let jane = { first: 'Jane', last: 'Doe' };

jane[Symbol.iterator] = objectEntries;

for (let [key, value] of jane) {

console.log(`${key}: ${value}`);

}

// first: Jane

// last: Doe

除了

for...of

循环以外，扩展运算符（

...

）、解构赋值和

Array.from

方法内部调用的，都是遍历器接口。这意味着，它们都可以将
Generator函数返回的 Iterator 对象，作为参数。

function* numbers () {

yield 1

yield 2

return 3

yield 4

}

// 扩展运算符

[...numbers()] // [1, 2]

// Array.from 方法

Array.from(numbers()) // [1, 2]

// 解构赋值

let [x, y] = numbers();

x // 1

y // 2

// for...of 循环

for (let n of numbers()) {

console.log(n)

}

// 1

// 2