请解释TypeScript中的...运算符

Question

以下教程（https://dojo.io/tutorials/1010_containers_and_injecting_state/）包含代码片段：

我不了解，也从未见过。它看起来有点像TypeScript中的“剩余参数”。 “ ...”到底是什么意思？有文件吗？我什么都找不到。

Answer 1

这是spread operator。它实质上是解包正在散布的对象/数组，并将所有属性放在散布运算符所在的位置。一个非常简单的对象示例：

const a = { foo: 'bar' };
const b = { ...a };

这会在对象常量内“传播” a的属性。因此，可以将其视为执行两个步骤：获取所有属性：

{ { foo: 'bar' } }

...并删除对象包装器：

{ foo: 'bar' }

结果是a等效于b。

您可以使用它来将属性复制到对象中并设置默认值

const a = { a: 1, b: 2 };
const b = { a: 2, c: 3 };
const c = { a: 0, z: 4, ...a, ...b };

c将是{ a: 2, z: 4, b: 2, c: 3 }。我们可以再次分两个步骤进行操作：

{ a: 0, z: 4, { a: 1, b: 2 }, { a: 2, c: 3 } }

现在解开内部对象：

{ a: 0, z: 4, a: 1, b: 2, a: 2, c: 3 }

上次声明属性的优先级高，因此请删除a: 0和a: 1。

您也可以使用数组来执行此操作，并且工作原理相同：

const a = [2, 3];
const b = [1, ...a];

这将是[1, 2, 3]。执行步骤：

[1, [2, 3] ]

然后解开内部数组以获取[1, 2, 3]。

请注意，当您展开包装时，需要将其展开，这样：

const a = [1, 2, 3]
const b = ...a

这是不允许的，因为我们不能使用b = 1, 2, 3 －这只是无效的语法。但是，它确实适用于带有数组的函数参数。