在 ES7 中，我们迎来了一些新的特性，其中一个是 Array.prototype.flat()。这个方法可以让我们更方便地将嵌套的数组扁平化，即将多维数组转化为一维数组。
语法
arr.flat([depth]);
其中，arr 表示要进行扁平化的数组，depth 表示扁平化的深度，默认为 1。
示例
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]] console.log(arr.flat(1)); // [1, 2, 3, 4, [5, 6]] console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]
在上面的示例中，我们可以看到，当 depth 为 1 时，只有一层的嵌套被扁平化了，而当 depth 为 2 时，所有的嵌套都被扁平化了。
深入理解
除了上面的示例外，我们还可以进行更深入的理解。
首先，当 depth 为 0 时，不会进行任何扁平化操作，直接返回原数组。
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat(0)); // [1, 2, [3, 4, [5, 6]]]
其次，当 depth 为负数时，会将所有的嵌套数组都扁平化。
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat(-1)); // [1, 2, 3, 4, 5, 6]
最后，我们还可以使用 Infinity 来表示无限深度的扁平化。
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6]
应用场景
Array.prototype.flat() 方法在实际开发中有很多应用场景，比如：
- 将多维数组转化为一维数组，以方便进行数据处理；
- 将多层嵌套的数组进行展开，以方便进行渲染。
下面是一个实际的应用场景，我们可以使用 Array.prototype.flat() 方法来将多层嵌套的菜单数据扁平化，以方便进行渲染。
-- -------------------- ---- -------
----- ---- - -
-
----- -------
--------- -
- ----- ----------- --
- ----- ------------ --
--
--
-
----- -----------
--------- -
-
----- ---------
--------- -
- ----- -------- --
- ----- --------- --
--
--
-
----- ---------
--------- -
- ----- --------- --
- ----- ------ --
--
--
--
--
--
----- -------- - --------------------
----------------------
-- -
-- - ----- ------ --
-- - ----- ----------- --
-- - ----- ------------ --
-- - ----- ---------- --
-- - ----- -------- --
-- - ----- -------- --
-- - ----- --------- --
-- - ----- -------- --
-- - ----- --------- --
-- - ----- ------ --
-- -总结
Array.prototype.flat() 方法是 ES7 中的一个新特性，它可以让我们更方便地将多维数组转化为一维数组。在实际开发中，我们可以将其应用于各种场景，如数据处理、渲染等。在使用时，我们需要注意 depth 参数的取值，以达到我们想要的扁平化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6576df51d2f5e1655d05e2ba