在编写代码时，处理数组层级的问题是前端开发中经常遇到的问题。在 JavaScript 中，ES6 提供了一种新的方法来解决这个问题：数组扁平化。本文将通过讲解数组扁平化的概念和使用方法，以及涉及的相关知识点，提供详细的指导和学习意义。
什么是数组扁平化
数组扁平化是指将嵌套的数组展开成一维数组的操作。在实际开发中，数组扁平化可以帮助我们处理多层次的嵌套数组中的数据，便于数据的处理和操作。比如将多层嵌套的数组展开后，可以直接使用 forEach()、map() 等常见的数组方法，也可用来将多层次的数据进行联合查询。
举个例子，假如我们有一个数组：
const arr = [1, [2, [3, 4]]];
这个数组里面包含了两个元素，其中第二个元素是一个嵌套的数组。如果我们想要将这个数组展开成一维数组，可以使用 ES6 的数组扁平化方法：
const flatArr = arr.flat(Infinity); // [1, 2, 3, 4]
使用 flat() 方法，传入参数 Infinity 就可以对数组进行无限次扁平化操作，将嵌套的数组展开成一维的数组。
数组扁平化的使用方法
ES6 中提供了两种方法来实现数组扁平化操作：flat() 和 flatMap()。
flat()
flat() 方法用来将嵌套的数组展开成一维数组。该方法会返回一个新的、扁平化后的数组，并不会修改原数组。
const arr = [1, [2, [3, 4]]]; const flatArr = arr.flat(Infinity); console.log(flatArr); // [1, 2, 3, 4]
在调用 flat() 方法时，可以传入一个参数，表示要扁平化的层数。如果不传入参数，默认值是 1，表示只扁平化一层。如果要扁平化多层嵌套的数组，可以传入 Infinity 或者一个非常大的数字表示。
const arr = [[1, 2], [3, [4, 5]]]; const flatArr = arr.flat(2); console.log(flatArr); // [1, 2, 3, 4, 5]
flatMap()
flatMap() 方法与 flat() 方法类似，也用来将多层嵌套的数组展开成一维数组。不同的是，flatMap() 方法在扁平化的同时，可以对每个元素进行处理，并返回一个新的数组。
const arr = [1, 2, 3]; const flatMapArr = arr.flatMap(item => [item * 2]); console.log(flatMapArr); // [2, 4, 6]
在调用 flatMap() 方法时，需要传入一个回调函数，该函数会遍历扁平化后的数组，并对每个元素进行处理。在回调函数里面，可以进行任意的操作，也可以返回一个新的数组或者一个值。最终，flatMap() 方法会将处理后的数组重新组合成一个新的数组，并返回。
解决数组层级问题
除了基本的扁平化操作外，数组扁平化还可以帮助我们解决数组层级的问题。在实际开发中，我们可能需要对多层嵌套的数组进行查找、筛选或者操作等操作。这时，我们可以先将数组扁平化，再使用常见的数组方法进行操作。
举个例子，假如我们有一个多层嵌套的对象数组：
-- -------------------- ---- -------
----- --- - -
-
----- ----
--------- -
-
----- ----
--------- -
-
----- ----
--------- ---
--
--
--
-
----- ----
--------- ---
--
--
--
-
----- ----
--------- ---
--
--如果我们想要找出所有的叶子节点，该怎么做呢？这时，就可以使用数组扁平化操作：
-- -------------------- ---- -------
----- ------ - ---
------------- -- -------
------------- ---- -- -
-- -------------------- --- -- -
-------------------
-
------ ----
-- ----
-------------------- -- ----- ---- ----首先，使用 flatMap() 方法扁平化数组。由于 flatMap() 方法会将数组中的 undefined、null 等变量过滤掉，所以可以使用一个数组包裹每个元素。这样，即使是空数组，也会变成一个包含空数组元素的数组，不会被过滤掉。
然后，使用 reduce() 方法对每个元素进行筛选处理。如果当前元素的 children 属性为空数组，那么就代表该元素为叶子节点，我们将其 name 属性存入结果数组中。
最后，可以得到一个数组，包含了所有的叶子节点的 name 属性值。
总结
本文介绍了数组扁平化的概念和使用方法，以及如何利用数组扁平化来解决数组层级的问题。数组扁平化是一种常见的操作，可以在前端开发中帮助我们更方便地处理多层次嵌套的数组，并进行查找、筛选、操作等操作。学习并掌握数组扁平化的相关知识点，有助于提高我们的开发效率，减少代码出错的概率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518e1bf95b1f8cacd124f5e