javascript - 为什么我们不能在 Array.map() 中使用展开运算符,还有什么方法可以展平数组数组?

标签 javascript spread-syntax

<分区>

这是我尝试过的:

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

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

我尝试使用显式 return 语句和带括号的包围值,但都没有用...

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

编辑:现在我看到了this SO question尽管它并没有真正回答关于如何“展平”数组的问题(我修改了问题的标题),但它已经精确地了解了传播运算符的工作方式。

最佳答案

这不是有效的语法,要使其正常工作,您需要将数组的内容展开(“解压缩”)到某种容器(例如数组)中。但是,如果您要执行以下操作:

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)

关于javascript - 为什么我们不能在 Array.map() 中使用展开运算符,还有什么方法可以展平数组数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54746175/

相关文章:

javascript - 来自函数参数的动态 Typescript 对象属性

javascript - JS 与 PHP : if/else

javascript - TypeScript 无法在扩展语法函数调用中推断数组类型

未定义的 JavaScript ES6 扩展运算符

javascript - 循环遍历对象以执行最接近的高整数的数学运算?

javascript - 在 C# 和 JavaScript 之间传递日期

c++ - C++ 有扩展运算符吗?

javascript - 在 Math.max(...arr) 中,我应该使用什么代替 Chrome 的扩展运算符?

javascript - 在 props 赋值中使用扩展运算符时 React Native 接收错误 : "In this environment the target of assign must be an object

javascript - 递归最长公共(public)子序列循环还是永远持续?