JavaScript 将运算符扩展到可变数量的参数？

Question

JavaScript 展开运算符可以像这样组合数组：

const a = [1,2,3];
const b = [4,5,6];
console.log([...a,...b]);

当 "compile time" 参数个数未知时我也可以使用它吗？

在下面的示例中，我不知道如何使用扩展运算符，所以我使用了 reduce 和 concat。

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.reduce((a,b)=>a.concat(b)));

这是预期的方式还是我可以以某种方式使用扩展运算符和可变数量的参数？

Answer 1

这是我能想到的最简洁的：

console.log(...[].concat(...arrays));

最内层的传播将把所有数组作为 concat 的参数，而不需要 reduce。

另一种方法是使用 ES2019 Array.prototype.flat:

console.log(...arrays.flat())

编辑：我刚刚注意到您将其作为数组输出。为此更改为 console.log([].concat(...arrays)) 和 console.log(arrays.flat()) :)

Answer 2

如果你不知道你传播了多少东西，你就无法编写代码来传播它们...。就像+那样：你可以把三个东西加在一起（a + b + c），但是如果你不知道你加了多少，你就不能直接写代码给它.

您的 reduce 可以使用点差而不是 concat（但请继续阅读）：

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.reduce((a,b)=>[...a, ...b]));

但是 concat 和 concat 都是低效的（这可能重要也可能无关紧要）因为它们创建了一个 new 数组并重新复制了已经存在的元素为每个输入复制。如果效率是一个约束条件，只需使用一个简单的循环：

const arrays = [[1,2,3],[4,5,6]];
const result = [];
for (const entry of arrays) {
  result.push(...entry);
}
console.log(result);

或者如果你真的喜欢用一个表达式来做，你可以把它硬塞进 reduce（因为基本上任何数组操作都可以硬塞进 reduce）：

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.reduce((acc,entry) => {
  acc.push(...entry);
  return acc;
}, []));

我支持 Brian Terlson，不过：对我来说，reduce 被过度使用了。

最后，对于这个特定问题，我们现在 flat：

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.flat());

Answer 3

您可以使用array.flat代替，如果您不传递参数深度被认为是1并且您可以手动定义深度或者您可以使用Infinity覆盖任何深度

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.flat());

JavaScript spread operator over a variable number of arguments?