在日常的前端开发中，我们经常需要对数组进行操作，而其中一个比较常见的操作就是将多维数组转换为一维数组，也被称为数组扁平化。在 ECMAScript 2019 中，新增了一个数组扁平化方法 flat()，本文将深入探讨该方法的使用方法与技巧，同时给出一些优秀的示例代码。
介绍
首先，我们来了解一下 flat() 方法。
在 MDN（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat）中的定义：
flat() 方法会按照一个可指定的深度递归遍历数组，将所有元素与子元素的元素合并为一个新的数组并返回。
简单来说，flat() 方法可以将多维数组变成一维数组。指定一个可选参数depth，表示嵌套数组的递归层数。默认值为1，即只展开一层。
使用方法与技巧
下面，我们探究一下 flat() 方法的使用方法及相关技巧。
flat() 方法的基本使用
它的基本使用方法很简单，只需要在数组后加上.flat() 就可以了，如下所示：
--- --- - ------------ --- ------ - ----------- -------------------- -- ---------
其中，[3,4] 是 arr 中一个嵌套的数组，使用 flat() 将它展开并合并到一维数组中。
flat() 方法的嵌套使用
当数组是多层嵌套的情况下，则需要使用 flat() 的嵌套调用方式。例如，将以下三维数组转换为一维数组：
--- --- - ---------------- --- ------ - ------------ -------------------- -- -----------
第二个参数 2 表示的是扁平化的深度，即将数组中的嵌套数组全部展开为一维数组。
flat() 方法的应用
flat() 方法不仅仅可以将某个维度的数组叠加到上一个维度，还可以将多个维度的数组合并，并通过数组的相关方法对其进行一些操作，如以下示例：
通过 flat() 方法获取不重复的数组
--- --- - -------------------- --- ------ - ------------------------ ------ ---- -- ----------------- --- ------- -------------------- -- --- -- --
通过 flat() 将二维数组变为一维数组后，再使用 filter()、indexOf() 方法获取不重复的元素。
通过 flatMap() 方法改变数组元素
--- --- - --- -- --- --- ------ - --------------- -- ---- - ---- -------------------- -- -------
通过 flatMap() 方法，将原数组的每个元素都乘以2并返回一个新的数组。
将字符串转换为数组
--- --- - ---------- --- ------ - ---------------------- -------------------- -- ----- ---- ---- ----
先使用 split() 将字符串转化成数组，再使用 flat() 方法使数组扁平化。
总结
数组扁平化是前端开发中常见的操作，在 ECMAScript 2019 中新增的 flat() 方法可以很方便地处理扁平化操作。通过本文的介绍，我们可以了解 flat() 方法的使用方法及技巧，如嵌套使用、应用技巧等。希望以上内容对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664e3a0cd3423812e4e6893f