剩余与展开 属于

关于 剩余与展开

JavaScript 内置了一个 ... 运算符，让处理数量不定的元素变得更容易。根据上下文的不同，它被称为_剩余运算符_或_展开运算符_。

剩余运算符

剩余元素

当 ... 出现在赋值语句的左侧时，这三个点被称为 rest 运算符。三个点加上一个变量名，合起来称为剩余元素。它会收集零个或多个值，并把它们存进一个数组中。

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

注意，在 JavaScript 中，与其他一些语言不同，rest 元素后面不能有尾随逗号。它_必须_是解构赋值中的最后一个元素。下面的例子会抛出 SyntaxError：

const [...items, last] = [2, 4, 8, 16]

剩余属性

与数组类似，剩余运算符也可以用来收集一个或多个对象属性，并把它们存进一个对象中。

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

剩余形参

当 ... 出现在函数定义中最后一个形参旁边时，该形参被称为_剩余形参_。它让函数能以数组的形式接受数量不定的实参。

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

展开

展开元素

当 ... 出现在赋值语句的右侧时，它被称为 spread 运算符。它把一个数组展开成一个元素列表。与剩余元素不同，它可以出现在数组字面量表达式中的任何位置，而且可以有多个。

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

展开属性

与数组类似，展开运算符也可以用来把一个对象的属性复制到另一个对象中。

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }