这表明传播语法可以做什么？

Question

查看此 MDN page 传播语法，它使用以下示例：

function myFunction(v, w, x, y, z) {
  console.log(v);
  console.log(w);
  console.log(x);
  console.log(y);
  console.log(z);
}

const args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

我知道 ...args 复制了 args (0, 1) 项的值。

查看 ...[3] 我看看我是否记录它解析为 3。但是 ...[3] 是什么？它是如何工作的，它的目的是什么，为什么它解析为 3?

Answer 1

相同：

let myArray = [3]

console.log( ...myArray ) // ->  3
console.log( ...[3] ) // ->  3

Answer 2

关于 ...[3]，这只是说明这样一个事实，即在具有单个元素的数组上使用展开运算符只会 return 该数组中的一个元素。

[3]和...[3]的区别在于第一个例子是一个数组，只有3这个元素，而第二个例子只是原始值3。

这样看：

console.log(...[3,4,5])  // logs 3,4,5
console.log(...[3,4]) // logs 3,4
console.log(...[3]) // logs 3
console.log(3) // logs 3 (same as previous example)
console.log([3]) // logs an array with 3 as the only element

Answer 3

...[3]是数3存入一个数组，马上展开。数组运算符 [] 优先于展开运算符。在这种特定情况下，您基本上可以说 3 而不是打包然后再解包。

在某些情况下，您可能希望根据条件向数组添加单个元素。例如：

const myArray = [
  1,
  2,
  ...(shallAddThree ? [3] : []),
  4
];

取决于 shallAddThree 是否为真，它可能会将三个添加到数组中。散布空数组不会向数组添加任何内容。所以这两个分支可能导致：

如果 shallAddThree 是真实的

const myArray = [
  1,
  2,
  ...[3], // no `()` necessary
  4
];

如果 shallAddThree 是假的

const myArray = [
  1,
  2,
  ...[], // no `()` necessary
  4
];

这表明传播语法可以做什么？

What is this demonstrating the spread syntax can do?

javascript

spread