ES10 新特性 flat+flatMap-JavaScript中文网-JavaScript教程资源分享门户

在最新的 ECMAScript 2019 标准中，Array 增加了两个新的实例方法：flat 和 flatMap。这两个方法可以帮助开发者更方便地处理嵌套的数组结构，从而提高开发效率。在本篇文章中，我们将重点介绍这两个方法的使用和应用。

flat 方法

flat 方法用于将嵌套的数组结构“扁平化”，将多维数组转换为一维数组。这个方法默认只能“扁平化”一层嵌套，同时会删除数组中的空位（undefined 等值）。

用法：

const arr = [1, 2, [3, 4]];
const flattenedArr = arr.flat();

console.log(flattenedArr); // [1, 2, 3, 4]

在上面的代码中，我们定义了一个嵌套数组 arr，然后使用 flat 方法将其“扁平化”。最终得到的结果是一维数组 flattenedArr。

但是，如果数组中还有更深层的嵌套结构，我们需要指定 flat 方法的参数 depth，该参数用于指定要“扁平化”的深度。

参数：

depth：可选参数，表示要“扁平化”的深度。默认值为 1，只“扁平化”一层嵌套。如果传递 Infinity，则“扁平化”所有嵌套的数组。

用法：

const arr = [1, 2, [3, [4]]];
const deepFlattenedArr = arr.flat(Infinity);

console.log(deepFlattenedArr); // [1, 2, 3, 4]

在上面的代码中，我们定义了一个更深层的嵌套数组 arr，然后使用 flat 方法将其“扁平化”。由于 depth 参数被设置为 Infinity，因此可以“扁平化”所有嵌套的数组，最终得到一维数组 deepFlattenedArr。

flatMap 方法

flatMap 方法是在 map 方法的基础上进行了扩展，它首先将原数组中的每个元素，使用 map 方法进行转换，然后“扁平化”成一维数组。这个方法只“扁平化”一层嵌套。

用法：

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

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

在上面的代码中，我们定义了一个数组 arr，然后使用 flatMap 方法将每个元素都乘以 2，最终得到一维数组 flattenedMapArr。

需要注意的是，当 map 方法返回的是一个空数组时，flatMap 方法会自动将它“扁平化”成一个空的一维数组。

用法：

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

console.log(flattenedEmptyMapArr); // []

在上面的代码中，我们定义了一个数组 arr，然后使用 flatMap 方法返回一个空数组，flatMap 方法会将其“扁平化”成一个空的一维数组。

总结

flat 和 flatMap 方法是 ECMAScript 2019 新增的实例方法，用于处理数组中的嵌套结构。使用这两个方法可以简化代码、提高开发效率。需要注意的是，flat 方法有一个可选的 depth 参数，用于指定要“扁平化”的深度；flatMap 方法会自动“扁平化”空数组，因此也可以用于删除数组中的空位。

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