ES9 新增新方法：Array.prototype.{flat,flatMap}

ES9 新增新方法：Array.prototype.{flat,flatMap}

在 ES9 中，Array 原型上新增了两个方法：flat 和 flatMap。这两个方法都是用于数组的操作，能够提高我们在处理数组时的效率和可读性。下面我们分别来介绍一下这两个方法。

flat

flat 方法可以将多维数组变成一维数组，同时还可以控制展开的层数。它的语法如下：

arr.flat([depth])

其中 arr 是要展开的数组，depth 是可选的参数，表示要展开的层数，默认为 1。

下面是一些使用 flat 方法的示例：

const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

const arr2 = [1, 2, [3, [4, 5]]];
arr2.flat(); // [1, 2, 3, [4, 5]]

const arr3 = [1, 2, [3, [4, 5]]];
arr3.flat(2); // [1, 2, 3, 4, 5]

在第一个示例中，arr1 是一个二维数组，使用 flat 方法展开后变成了一维数组。在第二个示例中，arr2 中包含了一个嵌套的二维数组，使用 flat 方法展开后只展开了一层，所以 [4, 5] 还是作为一个数组存在。在第三个示例中，通过传递参数 2，将 arr3 中的二维数组全部展开为一维数组。

flatMap

flatMap 方法可以对数组中的每个元素执行一个函数，然后将结果压缩成一个新数组。它的语法如下：

arr.flatMap(callback)

其中 arr 是要操作的数组，callback 是对每个元素执行的函数，该函数可以返回一个数组，如果返回的是多维数组，flatMap 方法会将其展开为一维数组。

下面是一些使用 flatMap 方法的示例：

const arr1 = [1, 2, 3];
arr1.flatMap(x => [x * 2]); // [2, 4, 6]

const arr2 = ['Hello', 'world'];
arr2.flatMap(x => x.split('')); // ['H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

在第一个示例中，arr1 中的每个元素都乘以 2，然后 flatMap 方法将结果压缩成一个新数组。在第二个示例中，arr2 中的每个字符串都被拆分成一个字符数组，然后 flatMap 方法将所有字符数组压缩成一个新数组。

学习意义

flat 和 flatMap 方法的出现，可以帮助我们更加方便地处理多维数组和数组的扁平化操作。使用这两个方法，可以提高我们的代码效率和可读性。同时，学习这两个方法，也可以帮助我们更好地理解 JavaScript 中的函数式编程思想。

总结

在本文中，我们介绍了 ES9 中新增的两个方法：flat 和 flatMap。flat 方法可以将多维数组变成一维数组，flatMap 方法可以对数组中的每个元素执行一个函数，然后将结果压缩成一个新数组。学习这两个方法，可以提高我们的代码效率和可读性，同时也可以帮助我们更好地理解 JavaScript 中的函数式编程思想。

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