ECMAScript 2017 中的 Array.prototype.flat() 和 Array.prototype.flatMap()：更好的数组处理
JavaScript 数组是一种基本数据结构，相信前端工程师都在自己的项目中有过相当多的应用。在 ECMAScript 2017 中，我们发现了两个有趣的新方法：Array.prototype.flat() 和 Array.prototype.flatMap()。
这两个方法可以将一个嵌套数组 “拍平” 或者根据原数组按需返回一个新数组，使数组处理变得更加高效、快捷和清晰。下面，让我们分别来深入学习和掌握这两个数组方法的使用。
一、Array.prototype.flat()
方法定义：
-------------------
参数说明：
depth：可选参数，即展开的深度，默认值为 1。如果需要完全展开，则可以使用Infinity。
方法作用：
- 将一个嵌套数组 “拍平”，返回一个新数组。
举个例子，现在我们有一个嵌套数组：
--- --- - --- -- --- --- --- --- -----
如果需要将 arr 数组拍平，即将所有嵌套数组里的元素提取到一个新的数组中，可以使用 flat() 方法：
--- ------- - ----------- --------------------- -- --- -- -- -- -- --- ---
flat() 方法可以将嵌套数组“拍平”，逐层提取内部嵌套数组的元素，并形成一个新的一维数组。当然，这个过程是根据 depth 深度进行的。
如果我们希望展开所有嵌套，可以把 depth 设置为 Infinity：
--- --- - --- -- --- --- --- --- ----- --- ------- - ------------------- --------------------- -- --- -- -- -- -- -- --
正如这个例子所示，Infinity 可以将所有嵌套拆分到一维数组中。使用 flat() 方法可以大大提升数组的操作效率。
二、Array.prototype.flatMap()
方法定义：
-------------------------------
参数说明：
callbackFunction(element, index, array)：使用方式与 map() 方法相似，其中处理函数必须返回一个数组，也就是说，该函数的返回值可以是一个一维数组，也可以是一个嵌套数组。flatMap() 会将这些返回值自动‘拍平’成一个数组（默认展开深度为1）。
方法作用：
- 根据原数组按需返回一个新数组，较为高效
举个例子，现在我们有一个数组：
--- --- - --- -- -- -- ---
如果将数组中每个元素都乘 2 并返回新数组，可以使用 map() 方法，它会返回一个新的数组，添加了所有项修改后的新值：
--- ------ - --------- -- - - --- -------------------- -- --- -- -- -- ---
现在，如果我们希望将它们嵌套在不同的数组中，并返回一个一维数组，可以使用 flat() 方法：
--- ---------- - --------- -- -- - ----------- ------------------------ -- --- -- -- -- ---
在这个例子中，我们使用 map() 方法和一个含有单个元素（即每个元素都被乘以 2）的数组，然后使用 flat() 方法，它会将整个数组 ‘拍平’，生成一个一维数组。但是这里，确实是需要两次方法调用才能实现的。
而使用 flatMap() 方法，可以减少方法调用次数：
--- ------------- - ------------- -- -- - ---- --------------------------- -- --- -- -- -- ---
利用 flatMap() 方法，只需一次调用，就能达到 map() 和 flat() 同时实现的结果。可以看出，当处理函数已经返回一个嵌套数组时，使用 flatMap() 方法会更简单、更清晰，并且更加高效。
总结
ECMAScript 2017 引入的 Array.prototype.flat() 和 Array.prototype.flatMap()，可以将嵌套数组‘拍平’，或者根据原数组按需返回一个新数组，从而降低了数组处理的复杂度，同时提高了效率和清晰度。在实际开发中，熟练掌握这两个方法的使用，有助于提高代码的质量和效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f5b805f6b2d6eab3e8bc40