在 ES7 中，JavaScript 引入了两个新的数组方法： Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法对于进行数组操作和转换非常有用，本文将对它们进行详细介绍和讲解。
Array.prototype.flat()
Array.prototype.flat() 是一个非常常用的数组方法，它允许我们将高维数组打平成一维数组。
语法
let newArray = arr.flat(depth);
其中，arr 表示需要被打平的数组，depth 表示打平深度，如果没有设置 depth，默认值为 1。
示例
const arr = [1, 2, 3, [4, 5]]; console.log(arr.flat()); // [1, 2, 3, 4, 5]
在这个例子中，arr 数组中包含一个子数组 [4,5]，通过调用 arr.flat()，我们会得到一个被打平的数组 [1, 2, 3, 4, 5]。
此外，flat() 方法还可以传入一个可选的整数参数来指定展开的深度。我们可以通过传递一个大于 1 的值来打平多维数组。
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]] console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]
在这个例子中，我们传递了一个 2 的参数，这表示要打平的深度为 2，从而得到了打平的一维数组 [1, 2, 3, 4, 5, 6]。
Array.prototype.flatMap()
Array.prototype.flatMap() 方法结合了 Array.prototype.map() 和 Array.prototype.flat() 的功能，它可以在一个步骤中对数组进行映射和打平操作。
语法
let newArray = arr.flatMap(callback);
其中，arr 表示需要被转化的原数组，callback 回调函数用来映射元素。
示例
let arr = [1, 2, 3, 4]; let newArray = arr.flatMap(x => [x * 2]); console.log(newArray); // [2, 4, 6, 8]
在这个例子中，我们通过回调函数 x => [x * 2] 将每个元素 x 转化为一个数组 [x * 2]，然后使用 flatMap() 方法将结果数组打平为一维数组。
此外， flatMap() 方法还可以对单个元素返回多个数组。下面是一个更复杂的示例，它使用 flatMap() 方法计算数组中每个元素的平方根。
-- -------------------- ---- -------
--- --- - --- -- -- ---
----- -------- - ------------- -- -
-- -- - - -- -- -
------ --- --------------
- ---- -
------ ---
-
---
---------------------- -- --- ------------------- -- -- -------------------在这个例子中，如果元素 x 是偶数，我们就将它和它的平方根返回一个包含两个元素的数组 [x, Math.sqrt(x)]，然后再调用 flatMap() 方法将所有这类子数组打平为一个数组。
总结
ES7 提供了两个非常有用的数组方法： Array.prototype.flat() 和 Array.prototype.flatMap()。前者可以将高维数组打平为一维数组，后者则提供了一种快速转换数组元素的方法，并在一个步骤中实现映射和打平操作。与 ES6 中的箭头函数和展开操作符一起使用，它们可以使我们在数组操作和转换方面做得更好，提高代码效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464fa47968c7c53b05cf636