JavaScript中的三重点语法(...):rest与spread

82 阅读1分钟

在JavaScript中,同样的语法--三点(...)--被用于两种不同的机制。

  • Rest语法是用来接收数据的。
  • spread是用于发送数据。

接收数据:rest语法

休息参数是一种特殊的参数,它通过一个数组接收函数调用的所有剩余参数。

> function myFunc(first, ...remaining) { return {first,remaining} }
> myFunc('a', 'b', 'c')
{ first: 'a', remaining: [ 'b', 'c' ] }

我们也可以在Array-destructuring中使用rest语法。

> const [head, ...tail] = ['a', 'b', 'c'];
> head
'a'
> tail
[ 'b', 'c' ]

而且我们可以在对象结构化中使用它。

> const {first: f, ...remaining} = {first: 'Jane', last: 'Doe', age: 43};
> f
'Jane'
> remaining
{ last: 'Doe', age: 43 }

发送数据:铺展

展开到一个函数调用中,将数组元素变成函数调用参数。

> function returnArgArray(...args) { return args }
> returnArgArray(...['x', 'y', 'z'])
[ 'x', 'y', 'z' ]

我们也可以将数组传播到数组字面。

> [...['a', 'b'], 'c']
[ 'a', 'b', 'c' ]

我们还可以把对象分散到对象字面中。

> {...{a:1, b:2}, c:3}
{ a: 1, b: 2, c: 3 }

Rest和spread不是运算符

操作符如+await 是用来写独立的表达式,这些表达式会被评估为数值。这些表达式可以在许多情况下使用。

相比之下,rest和spread是它们周围环境的一部分。这就是为什么它们不应该被称为运算符。

  • 休止语法:休止参数(函数定义),休止元素(数组重组),休止属性(对象重组)。
  • 对于展开,我通常说。"扩展到......"(函数调用、数组字面、对象字面)。