[JavaScript] for ... of

1. for ... of

for ... of语句可用于迭代iterable对象。

所谓iterable对象，指的是实现了Symbol.iterator方法的对象，
该方法应当返回一个iterator。

所谓iterator，指的是实现了next方法的对象，
该方法应当返回{value: anything ,done: boolean}。

const iterable = {
    [Symbol.iterator]: () => {
        let i = 0;

        return {
            next: () => {
                ++i;
                if (i == 3) {
                    return { value: i, done: true };
                }

                return { value: i, done: false };
            }
        };
    }
};

for (const item of iterable) {
    console.log(item);    // 1 2
}

注：
（1）不迭代done:true所对应的value值。
（2）for ... of的每次迭代都会新建一个作用域，
每次迭代item在这个作用域中都是全新的。
如果该作用域中需要对item重新赋值，
则可以用let声明item，for (let item of iterable) { }。

2. 常见的iterable对象

Array，String，TypedArray，Map，Set，arguments ，
DOM collection（例如，NodeList）

let iterable;

// Array
iterable = [10, 20, 30];
for (const value of iterable) {
    console.log(value);    // 10 20 30
}

// String
iterable = 'foo';
for (const value of iterable) {
    console.log(value);    // "f" "o" "o"
}

// TypedArray
iterable = new Uint8Array([0x0a, 0x14, 0x1e]);
for (const value of iterable) {
    console.log(value);    // 10 20 30
}

// Map
iterable = new Map([['a', 10], ['b', 20], ['c', 30]]);
for (const entry of iterable) {
    console.log(entry);    // ['a', 10] ['b', 20] ['c', 30]
}
for (const [key, value] of iterable) {
    console.log(value);    // 10 20 30
}

// Set
iterable = new Set([10, 10, 20, 20, 30, 30]);
for (const value of iterable) {
    console.log(value);    // 10 20 30
}

// arguments
(function () {
    for (const argument of arguments) {
        console.log(argument);    // 10 20 30
    }
})(10, 20, 30);

注：
for ... of中可以使用break，continue，return和throw。

3. 用于generator

generator返回的对象，既是一个iterator，又是一个iterable对象。
因此，generator的返回值可用于for ... of。

function* fibonacci() {
    let [prev, curr] = [0, 1];
    while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (const n of fibonacci()) {
    if (n > 10) {
        break;
    }
    console.log(n);
}

注：
在for ... of中使用break中断的generator，会自动结束，
继续使用for ... of，不能从中断处继续迭代。

const gen = function* () {
    console.log('will yield 10');
    yield 10;

    console.log('will yield 20');
    yield 20;

    console.log('will yield 30');    // 不执行
    yield 30;
};
const iter = gen();

for (const v of iter) {
    console.log(`first for ... of: ${v}`);
    if (v == 20) {
        break;    // 中断迭代，导致iter直接结束
    }
}

for (const v of iter) {    // iter已结束，将不再迭代
    console.log(`second for ... of: ${v}`);    // 不执行
}

输出：

will yield 10
first for ... of: 10
will yield 20
first for ... of: 20

4. for ... in 与 for ... of 的区别

for ... in和for ... of都可以用于迭代。

for ... in用于迭代一个对象的所有可枚举属性，以这些属性被创建的顺序。
for ... of用于在iterable对象上进行迭代，以这个iterable对象定义的迭代顺序。

Object.prototype.objCustom = function () { };
Array.prototype.arrCustom = function () { };

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (const i in iterable) {
    console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (const i in iterable) {
    if (iterable.hasOwnProperty(i)) {
        console.log(i); // 0, 1, 2, "foo"
    }
}

for (const i of iterable) {
    console.log(i); // 3, 5, 7
}

---

参考

MDN: for ... of