ECMAScript 2019 中的 flat 和 flatMap 方法详解

ECMAScript 2019 中的 flat 和 flatMap 方法详解

在 ECMAScript 2019 中，新增了两个数组方法 flat 和 flatMap。这两个方法可以让我们更方便地处理嵌套数组，提高代码的可读性和可维护性。本文将详细介绍这两个方法的用法和实际应用。

1. flat 方法

flat 方法可以将嵌套的数组“展平”，即将多维数组转化为一维数组。这个方法非常实用，尤其是在处理嵌套数组时。flat 方法有一个可选参数，表示展开的层数，默认为 1。

示例代码：

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

在上面的例子中，原数组 arr 包含两个数字和一个嵌套数组。调用 flat 方法后，得到的 flatArr 数组就是将原数组展开后的结果。如果原数组中还有嵌套数组，可以使用 flat 方法的可选参数指定展开的层数。

示例代码：

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

在上面的例子中，原数组 arr 包含两个数字和一个两层嵌套的数组。调用 flat 方法并指定可选参数为 2 后，得到的 flatArr 数组就是将原数组展开两层后的结果。

1. flatMap 方法

flatMap 方法可以对数组进行“展开”和“映射”两个操作，具体来说，它会先调用数组的 map 方法，然后对返回的数组使用 flat 方法。这个方法非常实用，尤其是在需要对数组进行“展开”和“映射”两个操作时。

示例代码：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x, x * 2]);
console.log(flatMapArr); // [1, 2, 2, 4, 3, 6]

在上面的例子中，原数组 arr 包含三个数字。调用 flatMap 方法后，得到的 flatMapArr 数组就是将原数组中的每个元素进行“展开”和“映射”操作后得到的结果。

需要注意的是，flatMap 方法对于返回值为数组的回调函数，会将其返回值“展开”后再进行处理。因此，如果回调函数返回的是一个嵌套数组，那么 flatMap 方法会将其展开为一维数组。

示例代码：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [[x, x * 2]]);
console.log(flatMapArr); // [[1, 2], [2, 4], [3, 6]]

在上面的例子中，回调函数返回的是一个嵌套数组，调用 flatMap 方法后得到的 flatMapArr 数组就是将嵌套数组展开后得到的结果。

总结

ECMAScript 2019 中的 flat 和 flatMap 方法可以让我们更方便地处理嵌套数组。flat 方法可以将多维数组转化为一维数组，flatMap 方法可以对数组进行“展开”和“映射”两个操作。这两个方法的使用非常简单，但是在实际应用中非常实用。我们可以根据实际需求灵活使用这两个方法，提高代码的可读性和可维护性。

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