ES10 新特性：数组新增方法 flat()，让多维数组更易处理-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，数组是一个非常常见的数据类型，而现实中的数据往往是多维的，这就使得操作数组变得很麻烦。为了解决这个问题，ES10 新增了一个方法：flat()，用来将多维数组转变为一维数组，让数组的处理更加便捷。

flat() 方法的基本用法

在 ES10 中，Array 对象新增了一个实例方法 flat()，这个方法是用来将一个多维数组转换为一个一维数组的。它的基本用法如下：

array.flat([depth])

其中，array 是要处理的数组，depth 是一个可选的参数，用来指定要递归展开的深度，默认为 1，也就是只展开一层。

flat() 方法的指导意义

flat() 方法大大提高了多维数组的处理效率，尤其是在数据处理和数据可视化方面更为实用。利用 flat() 方法，可以将一个多维数组展开为一维数组，便于进行数据分析和图表绘制。

flat() 方法的示例代码

下面我们通过几个示例代码来了解 flat() 方法的具体用法。

1. 将多维数组展开为一维数组

const arr = [1, [2, [3, [4, [5]]]]];
const flattened = arr.flat();
console.log(flattened); // [1, 2, [3, [4, [5]]]]

上面的代码中，我们首先定义了一个多维数组，然后利用 flat() 方法将它展开为一维数组。输出结果为 [1, 2, [3, [4, [5]]]]。

2. 利用 flat() 方法进行数据统计

const arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const sum = arr.flat().reduce((a, b) => a + b, 0);
console.log(sum); // 45

上面的代码中，我们首先定义了一个二维数组，然后利用 flat() 方法将它展开为一维数组，并计算其中的元素之和。输出结果为 45。

3. 使用 flat() 方法展示 hierarchical 数据

-- -------------------- ---- -------
----- ---- - -
  - ----- ------- --------- -- ----- ----- -- --
  - ----- ---------- --------- -- ----- ------ -- - ----- ------- -- -
--
----- ----- - ----------------- -- -
  ------ -- ----- ---------- ------ - -- -------------------------- -- -
    ------ - ----- ----------- ------ - -
  ----
---
-------------------

上面的代码中，我们有一个 hierarchical 数据，这类数据通常用于组织结构展示和分类展示。利用 flat() 方法，我们可以将其转化为一组 nodes 数据，便于在 UI 组件中展示。输出结果为：

[
  { name: 'John', level: 0 }, { name: 'Sam', level: 1 },
  { name: 'Michael', level: 0 }, { name: 'Mary', level: 1 }, { name: 'Peter', level: 1 }
]

总结

flat() 是 ES10 中新增的一个数组方法，用来将多维数组转化为一维数组。这个方法在数据处理和数据可视化方面非常实用，可以大大提高多维数组的处理效率和易用性。我们可以利用 flat() 方法处理二维和三维数组，将数据转换为适合展示在 UI 中的结构化数据。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f814b6f6b2d6eab3039108