TypeScript入门教程之点差算子/散布运算符/...运算符/剩余参数/...参数

点差算子/散布运算符

散布运算符的主要目标是散布数组或对象的元素。最好用示例说明。

应用

一个常见的用例是将数组散布到函数参数中。以前，您需要使用Function.prototype.apply：

function foo(x, y, z) { }
var args = [0, 1, 2];
foo.apply(null, args);

现在，您只需在参数前面加上前缀即可，...如下所示：

function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args);

在这里，我们将数组扩展args为position arguments。

解构

我们已经看到了这种在销毁中的用法：

var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1,2,[3,4]

这样做的动机是让您在分解时轻松捕获数组的其余元素。

阵列分配

扩展运算符使您可以轻松地将一个数组的扩展版本放置到另一个数组中。在下面的示例中对此进行了演示：

var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]

您可以将扩展数组放在任何位置，并获得预期的效果：

var list = [1, 2];
list = [0, ...list, 4];
console.log(list); // [0,1,2,4]

对象传播

您还可以将一个对象散布到另一个对象中。一个常见的用例是简单地向对象添加属性，而无需更改原始属性：

const point2D = {x: 1, y: 2};
/** Create a new object by using all the point2D props along with z */
const point3D = {...point2D, z: 3};

对于对象，价差的放置顺序很重要。它的工作方式类似于Object.assign，并且执行您期望的工作：先出现的内容被后出现的内容“覆盖”：

const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}

另一个常见的用例是一个简单的浅扩展：

const foo = {a: 1, b: 2, c: 0};
const bar = {c: 1, d: 2};
/** Merge foo and bar */
const fooBar = {...foo, ...bar};
// fooBar is now {a: 1, b: 2, c: 1, d: 2}

剩余参数/...参数

剩余参数（由...argumentName最后一个参数表示）使您可以快速接受函数中的多个参数并将它们作为数组获取。在下面的示例中对此进行了演示。

function iTakeItAll(first, second, ...allOthers) {console.log(allOthers);
}
iTakeItAll('foo', 'bar'); // []
iTakeItAll('foo', 'bar', 'bas', 'qux'); // ['bas','qux']

其余参数可以以任何功能可使用是它function/ ()=>/ class member。

摘要

apply是什么，你经常在JavaScript中使用，所以它的好，有更好的语法，你没有那个难看null的this说法。还具有用于将数组移出（解构）或移入（分配）其他数组的专用语法，为在部分数组上进行数组处理时提供了一种简洁的语法。

翻译来源：https://gitee.com/yunwisdoms/typescript-book/blob/master/docs/spread-operator.md