如何展平嵌套Javascript数组

To flatten an array means to reduce the dimensionality of an array. In simpler terms, it means reducing a multidimensional array to a specific dimension.

展平数组意味着减小数组的维数 。 用更简单的术语讲，这意味着将多维数组缩减为特定的维。

There are certain situations in which the elements of an array are an array, generally referred to as nested arrays. For instance, the two-dimensional array below which represents student ids

在某些情况下，数组的元素是数组，通常称为嵌套数组 。 例如，下面的二维数组表示学生ID

let arr = [[1, 2],[3, 4],[5, 6, 7, 8, 9],[10, 11, 12]];

and we need to return a new flat array with all the elements of the nested arrays in their original order.

并且我们需要返回一个新的平面数组，其中嵌套数组的所有元素均按其原始顺序排列。

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

We can achieve this using different ways but we will focus on a few. Let’s see how they work.

我们可以使用不同的方法来实现这一目标，但我们将重点介绍几种方法。 让我们看看它们是如何工作的。

1：concat()和apply() (1: concat() and apply())

In this example,this is an empty array as seen in apply([], arr) and arr is the argument list we are passing (we’ve defined it above). So, we are saying take this argument and merge it with what you already got - another empty array, in this case. MSDN really explains concat() and apply()

在此示例中， this是一个空数组，如apply([], arr)并且arr是我们要传递的参数列表 (我们已经在上面进行了定义)。 因此，我们要说的是接受这个参数并将其与您已经获得的参数合并-在这种情况下为另一个空数组 。 MSDN真正解释了concat()和apply()

let flattened = [].concat.apply([], arr);// 

2：ES6中的传播算子 (2: spread operator in ES6)

Here, we are using the spreadoperator to spread out the array. Then concatenate it with an empty array.

在这里，我们使用spread运算符散布数组。 然后将其与一个空数组连接。

let flattened = [].concat(...arr);// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

3：array.reduce() (3: array.reduce())

The reduce() method as the name suggests reduces an array to a single value. I have explained in great detail what it is and how to use it. check out the article here

reduce() 顾名思义，此方法将数组减少为单个值。 我已经详细解释了它是什么以及如何使用它。 在这里查看文章

let flattened = arr.reduce((acc, curVal) => {return acc.concat(curVal)}, []);// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

What if we were working with deeply nested arrays?

如果我们正在使用深度嵌套的数组怎么办？

While the above solutions flatten down to one level or can be modified to work for higher dimensions, let’s try a simpler approach 😄

虽然上述方案拼合到一个级别，也可以进行修改，以获得更高层面的工作，让我们尝试一个更简单的方法😄

Array.prototype.flat() (Array.prototype.flat())

The flat()method has an optional argument known as depth (the number of levels to flatten the array) and returns a new array - flattened version of the original array, removing any array hole (empty slot(s) in the array).

flat()方法具有一个可选参数，称为深度 (使数组变平的级别数)，并返回一个新数组-原始数组的变平版本，删除了任何数组Kong(数组中的空插槽)。

The default depth is 1. Otherwise, the passed argument defines the depth for flattening the array. You can also set the depth as Infinity (unlimited levels).

默认深度为1。否则，传递的参数定义用于展平数组的深度。 您还可以将深度设置为无限 (无限级别)。

Let’s see some working examples.

让我们看一些可行的例子。

浏览器支持 (Browser Support)

Array.flat()works in all modern browsers, but not IE. To support all browsers, you can use Babel to transpile your code to a previous ES version or use a polyfill to push back support.

Array.flat()在所有现代浏览器中均可，但不适用于IE。 为了支持所有浏览器，你可以用巴贝尔来transpile代码到以前的ES版或使用填充工具推回的支持。

If you don’t want to deal with Babel, or you don’t have a build step set up already, it might useful to try the flatten(),flattenDeep(),flattenDepth() functions provided by Lodash. You can use them individually without importing the whole library.

如果您不想使用Babel，或者尚未设置构建步骤，那么尝试使用flattenDepth()提供的flatten() ， flattenDeep() ， flattenDepth()函数可能会很有用。 您可以单独使用它们，而无需导入整个库。

结论 (Conclusion)

We have seen what flattening an array means, when we need to flatten an array and the various ways we can achieve it, using the different methods provided in the example.

我们已经看到了扁平化数组的含义，何时需要扁平化数组以及使用示例中提供的不同方法来实现扁平化的各种方法。

进一步阅读 (Further Reading)

• Understanding array dimensions

  了解数组尺寸

• Array.prototype.flatMap()

  Array.prototype.flatMap()

• Reducing an array to a single data type

  将数组简化为单一数据类型

Feel free to leave your comments and suggestions. Let’s keep the conversation going!

随时留下您的意见和建议。 让我们继续对话吧！

翻译自: https://codeburst.io/how-to-flatten-a-nested-javascript-array-628e01b85512