ES7 中新特性：Array.prototype.flat() 和 Array.prototype.flatMap()-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，新增了两个 Array.prototype 上的方法——Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法为前端开发者带来了方便和效率。

Array.prototype.flat()

Array.prototype.flat() 方法用于将一个嵌套多层的数组 "拍平" 成一维数组。在平时的开发中，我们经常会遇到需要将多层数组转化为一维数组的情况。

语法

Array.prototype.flat() 方法的语法如下：

arr.flat(depth)

arr：需要被 "拍平" 的多层数组。
depth：一个可选整数，默认值为 1。表示拍平的层数。

示例

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

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

在上面的代码中， arr 数组是一个嵌套两层的数组。通过调用 arr.flat() 方法，将嵌套层数减少 1 层。在 flatArr 中，最后一个元素仍然是一个数组。而在 flatArr2 中，所有元素都在一维数组中。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法是 map 和 flat 方法的组合体，是 ES7 新增的很有用的方法之一。使用它，我们可以在一个操作中对原始数组进行映射和 "拍扁"。

语法

Array.prototype.flatMap() 的语法如下：

arr.flatMap(callback(currentValue, index, array), thisArg)

callback：它是一个函数，数组的每个元素都会执行该回调函数，并返回一个新的数组。该回调函数可以返回一个数组，也可以返回一个非数组值。flatMap() 方法将返回一个扁平的数组。
thisArg：可选参数，作为 callback 函数执行时 this 值。

示例

const arr = [2, 4, 6];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [2, 4, 4, 8, 6, 12]

在上面的代码中，数组 arr 包含三个元素。通过在 callback 函数内返回一个包含两个元素的数组，我们将每个元素变成了原数组中对应元素的两倍。对于返回的数组元素， flatMap() 方法会将它们展开成一维数组，并将它们合并到最终的结果数组中。

指导意义

通过使用 Array.prototype.flat() 和 Array.prototype.flatMap() 方法，我们可以更加简单和高效地处理多层数组。这不仅能够更加方便地操作数据，而且还能够提高代码的可读性和可维护性。我们在实际开发中应该着重掌握并使用这些新特性。

总结

在本文中，我们介绍了 ES7 中 Array.prototype.flat() 和 Array.prototype.flatMap() 两个新增方法的语法、实际使用、指导意义。这两个方法都可以有效地帮助我们操作多层嵌套的数组。特别是在工作中如果需要用到对多层的操作就可以优先考虑这两个方法，可以有效提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540da467d4982a6eba6bfd3