展开一个可迭代的...obj[Symbol.iterator](...)

Question

我理解以下大部分代码，但我完全卡在了 [...numbers[Symbol.iterator].

var numbers = {
    *[Symbol.iterator]({
        start = 0,
        stop = 100,
        step = 1
    } = {}) {
        for(let x = start; x <= stop; x+=step) {
            yield x;
        }
    }
};

// should print 0.. 100 in steps of 1
for(let num of numbers) {
    console.log(num);
}

// should print 6..30 in steps of 4
console.log(`My lucky numbers are: ${
    [...numbers[Symbol.iterator]({
        start: 6,
        stop: 30,
        step: 4
    })]}`
);

在我看来。

如果它只是 [...numbers] 它将传播数字0 - 100，因为对象有一个迭代函数generator。numbers[Symbol.iterator]() 它会查找并返回发电机。

但我不知道 [...numbers[Symbol.iterator](...)，这看起来像是两者的奇怪组合。

我在谷歌搜索这个语法时，很难得到结果。如果有人能像我5岁一样解释一下，那将是非常感激的!

Answer 1

这真是奇怪的用法 Symbol.iterator你通常不应该给他们参数。你可以把它拆成

const generatorFunction = numbers[Symbol.iterator];
const iterator = generatorFunction({
    start: 6,
    stop: 30,
    step: 4
});
const array = [...iterator];
console.log(`My lucky numbers are: ${array}`);

请注意 iterator 是可迭代的，它继承了一个 [Symbol.iterator] 方法返回自己，这使得它可以在数组传播元素中使用。生成器方法（在这里是显式调用）被命名为 [Symbol.iterator] 以及无所谓，只会导致混乱。比较好的写法是

const numbers = {
    *range(start, stop, step=1) {
        for(let x = start; x <= stop; x+=step) {
            yield x;
        }
    },
    [Symbol.iterator]() {
        return this.range(0, 100);
    },
};

console.log([...numbers.range(6, 30, 4)]);

Answer 2

我原本不明白Bergi的前半部分回答是什么意思

当被视为将传播操作者留到最后时，它变得很清楚（至少对我的大脑来说），公平地说，这正是他所解释的，但我看不到它。

总之。

[numbers[Symbol.iterator]({...})] 返回生成器，也就是 然后 蔓延。