ES10 新增功能介绍：flat,flatMap 无限展开数组-JavaScript中文网-JavaScript教程资源分享门户

ES10 新增功能介绍：flat,flatMap 无限展开数组

在前端开发中，我们经常需要处理数组数据。ES10 中，新增了两个非常实用的方法 flat 和 flatMap，可以帮助我们便捷地处理数组的嵌套层级，使其展开到一维数组。本文将详细介绍这两个方法的使用及其示例代码。

flat 方法

flat 方法用于将多维数组转换为一维数组，可指定展开的层数。该方法会将数组内的每个元素检测为一个数组，如果是一个多维数组，则将其展开并返回一个新的数组。如果没有指定展开深度，则默认展开一层。

语法：

array.flat([depth])

参数说明：

depth：可选参数，指定数组展开的深度，默认是 1。

示例代码：

const arr = [[1, 2], [3, [4, 5]]];

// 按默认展开一层
console.log(arr.flat()); // [1, 2, 3, [4, 5]]

// 按展开两层
console.log(arr.flat(2)); // [1, 2, 3, 4, 5]

flatMap 方法

flatMap 方法结合了 map 和 flat 两个方法的功能，可将多个数组映射为一个数组，并将其展开到一维数组上。该方法首先会将每个数组映射为一个新的数组，然后将这些数组合并为一个新的数组，并返回一个一维数组。

语法：

array.flatMap(callback[, thisArg])

参数说明：

callback：函数，用于将每个元素映射为新的数组。
thisArg：可选参数，指定回调函数里 this 的值。

示例代码：

// javascriptcn.com 代码示例
const arr = [1, 2, 3];

// 使用 map 和 flat 两个方法分别实现
const newArr1 = arr.map(x => [x * 2]).flat();
console.log(newArr1); // [2, 4, 6]

// 使用 flatMap 方法实现
const newArr2 = arr.flatMap(x => [x * 2]);
console.log(newArr2); // [2, 4, 6]

总结

在开发中，对于数组的嵌套层级处理经常会遇到，而原生的数组处理方法往往不够便捷。ES10 中新增的 flat 和 flatMap 方法，不仅提供了便捷的数组层级展开方式，同时也让我们的代码更加简洁优雅。希望本文能给开发者们带来一些实用的指导意义。

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