JavaScript ES6数组功能：[...data，0]“扩展运算符”

Question

我在一些示例代码中发现了这个，但是我完全不知所措。

const addCounter = (list) => {
    return [...list, 0];  // This is the bit I am lost on, and I don't know about [...list, 0]
}

显然，上面的内容等同于以下内容：

const addCounter = (list) => {
    return list.concat([0]);
}

非常感谢您的建议和解释。

- Bill

---

这个回答解决了你的问题吗？ES2015 / ES6中的Spread语法和Rest参数 - Henke

Answer 1

...list使用扩展语法来展开list的元素。假设列表是[1, 2, 3]。因此[...list, 0]变成：

[1, 2, 3, 0]

这与执行list.concat([0]);的结果相同。

这不是ES6中数组的一个特性，它只是用于数组连接。它还有其他用途。阅读更多MDN上的资料，或查看这个问题。

- Merott

---

所以基本上这是一个连接操作？ - Bill

这不是一个 concat，但在这种情况下它具有相同的结果。请参见此答案。 - Merott

它不是运算符（也不能成为运算符），它只是语法。 - T.J. Crowder

我认为在这种情况下，“语法”和“运算符”这两个术语可以互换使用，至少只要将语法视为在普通JavaScript中抽象或隐藏一些复杂逻辑的语法糖。然而，如果我们指的是JavaScript引擎将数组展开为其各个元素的本机能力，我更喜欢称之为“运算符”，因为它不再仅仅是一个语法上的区别，即可能存在内部实现差异，具有潜在的性能优势。 - Merott

据我所知，扩展语法不是运算符。按照定义，运算符返回/产生一个值。例如，加号运算符产生其操作数的和：var sum = (a + b);，一元减号返回其操作数的负数：var neg = -a;。而扩展语法不会这样做，var res = ...someArray;会抛出错误，因此扩展语法不能被称为运算符，因为它不产生值。尽管在某些网站上似乎将其称为运算符。 - ibrahim mahrir

@ibrahimmahrir 好的，谢谢。我正在更新我的答案来称其为语法。甚至Mozilla已经更新了他们的文档。 - Merott

Answer 2

...list通过展开数组list中的所有元素布局。

因此，[...list, 0]是列表中所有元素加上一个0。

- Simon H