ES9 中新增的 Array 实例方法: Array.prototype.flat() 和 Array.prototype.flatMap()

随着 Web 技术的不断发展，前端开发的需求也在不断地变化和增加。在 ES9 中，新增了两个 Array 实例方法：Array.prototype.flat() 和 Array.prototype.flatMap()。这两个方法可以帮助开发者更方便地处理数组数据，提高开发效率和代码可读性。

Array.prototype.flat()

Array.prototype.flat() 方法可以将嵌套的数组“扁平化”，即将多层嵌套的数组变为一层。这个方法非常实用，可以在处理数据时减少代码量和提高代码可读性。

语法

arr.flat([depth])

参数：

• depth：可选，指定要扁平化的层数，默认值为 1。

示例代码

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

console.log(flatArr); // [1, 2, 3, 4, [5, 6]]

const flatArr2 = arr.flat(2);

console.log(flatArr2); // [1, 2, 3, 4, 5, 6]

在这个示例代码中，我们首先定义了一个嵌套的数组 arr，它包含了三层嵌套。我们调用了 arr.flat() 方法，将其扁平化为一层数组，并将结果赋值给了 flatArr 变量。打印 flatArr 变量的值，可以看到多层嵌套的数组已经被扁平化为了一层。

我们还调用了 arr.flat(2) 方法，将嵌套的数组扁平化为两层。同样地，打印 flatArr2 变量的值，可以看到多层嵌套的数组已经被扁平化为了两层。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法可以将数组中的每个元素映射为一个新的数组，并将所有数组“扁平化”为一个新数组。这个方法非常实用，可以在处理数据时减少代码量和提高代码可读性。

语法

arr.flatMap(callback[, thisArg])

参数：

• callback：必需，一个函数，用于对数组中的每个元素进行映射操作。该函数可以返回一个数组或一个值。
• thisArg：可选，执行 callback 函数时使用的 this 值。

示例代码

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(item => [item * 2]);

console.log(flatMapArr); // [2, 4, 6]

在这个示例代码中，我们首先定义了一个数组 arr，它包含了三个元素。我们调用了 arr.flatMap() 方法，并传入一个回调函数作为参数。该回调函数对数组中的每个元素进行了乘以 2 的操作，并返回了一个新的数组 [item * 2]。

调用 arr.flatMap() 方法后，该方法会对数组中的每个元素都执行一次回调函数，并将所有回调函数返回的数组“扁平化”为一个新数组。最终，我们将结果赋值给了 flatMapArr 变量，并打印了该变量的值。

总结

ES9 中新增的 Array 实例方法 Array.prototype.flat() 和 Array.prototype.flatMap()，可以帮助开发者更方便地处理数组数据，提高开发效率和代码可读性。在实际开发中，我们可以根据具体的业务需求，灵活运用这两个方法，发挥它们的最大作用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65619e86d2f5e1655dba67b8