为啥我们不能在 Array.map() 中使用扩展运算符，还有啥可以替代展平数组？ [复制]

Posted 2023-02-22

【中文标题】为啥我们不能在 Array.map() 中使用扩展运算符，还有啥可以替代展平数组？ [复制]

【英文标题】：Why can't we use the spread operator within Array.map() and what are the alternative to flatten array of arrays? [duplicate]为什么我们不能在 Array.map() 中使用扩展运算符，还有什么可以替代展平数组？ [复制]

【发布时间】：2019-07-11 18:31:40

【问题描述】：

这是我尝试过的：

let a = [[1,2], [3,4]];

a.map(val => ...val)
// => SyntaxError: expected expression, got '...'
// Expected output: [1,2,3,4]

我尝试使用显式的 return 语句和用括号括起来的值，但没有一个起作用...

我只是想知道是否有一种简单的方法可以返回“扩展数组”？

编辑：现在我已经看到this SO question，它对扩展运算符的工作方式有了精确的了解，尽管 in 并没有真正回答有关如何“展平”数组的问题（我修改了问题的标题）。

【问题讨论】：

传播创建多个值——javascript中的一个函数只能返回一个值

你应该看到Array.prototype.flat()。

你可以做[].concat(...a)

@PatrickHund 不，传播不会“创造”任何价值，它本身不是一个表达式。扩展语法只是具有特定含义的数组字面量和函数调用语法的一部分，并且三个点在其他地方只是语法上无效。

也许我的评论表达有误。我知道什么是传播语法以及它是如何工作的。没关系。

【参考方案1】：

尝试使用a.flatMap(x=>x); 来扁平化数组和映射元素或flat（没有映射）

a.flat();

let a = [[1,2], [3,4]];

let r=a.flat();

console.log(r);

在 flat arg 中，您可以设置扁平化的深层 - 设置 Infinity 将扁平化任何嵌套数组

let a = [[1,2,[3,4,[5,[6]]]], [[7,[8]],9]];

let r=a.flat(Infinity);

console.log(r);

【讨论】：

我喜欢JS的这个新特性

【参考方案2】：

这不是有效的语法，为了让它工作，你需要将你的数组传播（“解包”的内容）到某种容器（例如数组）中。但是，如果您要执行以下操作：

a.map(val => [...val])

你不会对你的数组做很多事情，相反，你最终会得到相同的数组。因此，您可以使用.map 以外的其他方法，例如.reduce 或.flatMap/.flat 来实现您想要的输出：

将.reduce 与展开语法一起使用：

let a = [[1,2], [3,4]];

let res = a.reduce((acc, val) => [...acc, ...val], []);
console.log(res)

使用.flatMap()：

let a = [[1,2], [3,4]];

let res = a.flatMap(val => val); // map the contents (without the holding array) [[1, 2], [3, 4]] -> [1, 2, [3, 4]] -> [1, 2, 3, 4]
console.log(res)

.flatMap() 在这里是无用的，因此使用.flat() 就足够了：

let a = [[1,2], [3,4]];

let res = a.flat();
console.log(res)

如果您只是想展平二维数组，我建议您使用选项一 (.reduce)，因为它具有最好的浏览器支持。 .flat() 和 .flatMap() 没有很好的浏览器支持，但可用于展平 n 维数组（如果您愿意，可以使用 .flat(Infinity)）

【参考方案3】：

在 cmets 中，函数只能返回 一个 值。

但是你可以使用一个简单的技巧：

let a = [[1,2], [3,4]];

a.reduce((a,b) => a.concat(b),[])
// Expected output: [1,2,3,4]