JS：Array.flat() 如何 “几乎” 扁平化嵌套数组
在前端开发中，处理数组是非常常见的操作。而数组中经常会出现嵌套数组的情况，这时候我们需要将其扁平化，使其变成一维数组，以方便进行后续的操作。而在 ES2019 中，新增了一个 Array.flat() 方法，可以帮助我们轻松地实现数组扁平化的功能。
Array.flat() 方法的语法如下：
-------------------
其中，depth 表示扁平化的深度，默认值为 1。如果嵌套数组的层数大于 depth，那么 flat() 方法就会继续扁平化，直到嵌套数组的层数小于等于 depth。
现在，我们来看一下如何使用 Array.flat() 方法。
- 扁平化一维数组
首先，我们来看一个最简单的例子，将一个一维数组扁平化：
----- --- - --- -- -- -- --- ----- ------- - ----------- --------------------- -- --- -- -- -- --
这里的 flat() 方法没有传入任何参数，因此默认只扁平化一层，即将嵌套在 arr 中的数组展开成一维数组。
- 扁平化多维数组
接下来，我们来看一个嵌套多层的数组：
----- --- - --- -- --- -- --- ----- ----- ------- - ----------- --------------------- -- --- -- -- -- --- ---
这里的 arr 数组中嵌套了 3 层的数组，但是由于 flat() 方法默认只扁平化一层，因此只有最外层的数组被展开成了一维数组，而内层的数组并没有被扁平化。
如果我们需要扁平化所有层的数组，可以传入一个大于等于嵌套层数的参数：
----- --- - --- -- --- -- --- ----- ----- ------- - ------------------- --------------------- -- --- -- -- -- -- --
这里的 Infinity 表示扁平化所有层的数组，即使嵌套层数很深，也能将其完全扁平化。
- 扁平化不规则的嵌套数组
在实际开发中，我们可能会遇到一些不规则的嵌套数组，如下所示：
----- --- - --- -- --- -- --- --- ------ ----- ------- - ------------------- --------------------- -- --- -- -- -- -- -- --
这里的 arr 数组中存在不规则的嵌套数组，但是 flat() 方法仍然可以正确地扁平化数组，将其变成一维数组。
需要注意的是，如果数组中存在空元素或者未定义的元素，flat() 方法会将其忽略：
----- --- - --- -- - -- -- --- -- ------------ ----- ------- - ----------- --------------------- -- --- -- -- -- -- --
- 使用 flatMap() 方法
除了 Array.flat() 方法之外，ES2019 还新增了一个 flatMap() 方法，可以帮助我们更方便地对数组进行操作。
flatMap() 方法的语法如下：
------------------------------------- ------- ---------- ---------
其中，callback 函数可以返回一个数组，flatMap() 方法会自动将其扁平化。
下面是一个示例代码：
----- --- - --- -- --- ----- ------- - ------------- -- -- - ---- --------------------- -- --- -- --
这里的 callback 函数返回了一个数组 [x * 2]，而 flatMap() 方法会将其扁平化，最终得到一维数组 [2, 4, 6]。
总结
在实际开发中，处理嵌套数组是非常常见的操作，而 Array.flat() 方法可以帮助我们轻松地实现数组扁平化的功能。需要注意的是，如果数组中存在空元素或者未定义的元素，flat() 方法会将其忽略。另外，ES2019 还新增了一个 flatMap() 方法，可以帮助我们更方便地对数组进行操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f9335bd10417a2224fc974