在前端开发中，我们经常需要处理数组中的数据。但是，有时候数组中的数据可能会出现嵌套的情况，这时候我们就需要将其扁平化，以便更好地处理数据。在 ES10 中，新增了一个 flat 方法，可以方便地将深嵌套的数组扁平化。
flat 方法的用法
flat 方法可以将一个数组扁平化，也就是将嵌套的数组拉平为一维数组。它接受一个可选的参数，用于指定要拉平的深度。如果不指定参数，则默认只拉平一层。
const arr = [1, 2, [3, 4]]; const flatArr = arr.flat(); console.log(flatArr); // [1, 2, 3, 4]
在上面的例子中，原数组 arr 中包含一个嵌套数组 [3, 4]，使用 flat 方法将其扁平化后得到的结果为 [1, 2, 3, 4]。
如果我们想将嵌套的数组全部扁平化，可以使用 Infinity 作为参数。
const arr = [1, 2, [3, [4, 5]]]; const flatArr = arr.flat(Infinity); console.log(flatArr); // [1, 2, 3, 4, 5]
在上面的例子中，原数组 arr 中包含两层嵌套数组，使用 flat 方法并指定 Infinity 作为参数将其全部扁平化后得到的结果为 [1, 2, 3, 4, 5]。
flat 方法的实现原理
flat 方法的实现原理其实很简单，它使用递归的方式遍历数组，将嵌套的数组依次展开，直到达到指定的深度或没有嵌套数组为止。
下面是一个简单的实现：
Array.prototype.flat = function(depth = 1) {
return depth > 0
? this.reduce((acc, val) => acc.concat(Array.isArray(val) ? val.flat(depth - 1) : val), [])
: this.slice();
};在上面的实现中，我们使用了 reduce 方法来遍历数组，如果当前元素是一个数组，则递归调用 flat 方法，将其展开为一维数组，否则直接将其添加到结果数组中。
实际应用场景
flat 方法在实际开发中有很多应用场景，例如：
1. 扁平化多层分类数据
在开发中，我们经常需要处理多层分类数据，例如商品分类或者组织架构等。使用 flat 方法可以将多层嵌套的分类数据扁平化为一维数组，方便进行数据处理和展示。
-- -------------------- ---- -------
----- ---- - -
-
--- --
----- ------
--------- -
-
--- --
----- --------
--------- -
-
--- --
----- ---------
--
-
--- --
----- ---------
-
-
--
-
--- --
----- -------
-
-
--
-
--- --
----- -----
-
--
----- -------- - --------------------
----------------------输出结果：
[
{ id: 1, name: '分类1' },
{ id: 2, name: '分类1-1' },
{ id: 3, name: '分类1-1-1' },
{ id: 4, name: '分类1-1-2' },
{ id: 5, name: '分类1-2' },
{ id: 6, name: '分类2' }
]2. 合并多个数组
在某些场景下，我们需要将多个数组合并为一个数组，使用 flat 方法可以方便地将多个数组扁平化为一个数组。
const arr1 = [1, 2]; const arr2 = [3, [4, 5]]; const arr3 = [6]; const mergedArr = arr1.concat(arr2, arr3).flat(); console.log(mergedArr); // [1, 2, 3, 4, 5, 6]
在上面的例子中，我们将三个数组合并为一个数组，然后使用 flat 方法将其扁平化为一维数组。
总结
ES10 中的 flat 方法是一个非常实用的数组方法，它可以方便地将深嵌套的数组扁平化为一维数组，应用场景非常广泛。在实际开发中，我们可以灵活运用 flat 方法，提高开发效率和代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660fbde3d10417a222064671