ES10 中新增方法：Array 的 flat() 和 flatMap() 方法

JavaScript 是一种非常流行的编程语言，在 Web 开发中它占据了重要的地位，为使开发者更加容易使用 JavaScript，新版的 ES10 中推出了一系列新的方法，其中包括了 Array 的 flat() 和 flatMap() 方法。本文将详细介绍这两个方法，让大家更好的掌握它们的使用方法。

flat() 方法

Array 的 flat() 方法用于将嵌套的数组展开为单个的数组，它可以将多层嵌套的数组压缩为一个一维的数组。该方法可以接收一个可选参数，表示要压缩的层数，默认为1。

语法

arr.flat([depth]);

参数

depth：可选，表示要压缩的层数，默认为1。

返回值

返回一个一维的数组。

示例

const arr1 = [1, 2, [3, 4]];
const arr2 = [1, 2, [3, 4, [5, 6]]];

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

在上述示例中，数组 arr1 和 arr2 都被 flat() 方法展开为了一维数组。在第三个示例中，指定了压缩的层数为2，因此 arr2 中嵌套的所有数组都被展开为一维数组。

flatMap() 方法

Array 的 flatMap() 方法是在 flat() 方法基础上发展而来的，它在将嵌套的数组展开为单个的数组的同时，也可以对每个元素进行操作。该方法同样可以接收一个可选参数，表示要压缩的层数，默认为1。

语法

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

参数

callback：必选，一个回调函数，用于操作每个数组元素。

currentValue：必选，当前操作的元素。

index：可选，当前数组元素的下标。

array：可选，数组本身。

thisArg：可选，回调函数内部 this 的指向对象。

返回值

返回一个一维的数组。

示例

const arr = [1, 2, 3];

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

在上述示例中，flatMap() 方法对 arr 中的每个元素进行了乘以2的操作，并将处理后的元素作为一个新的数组返回。

总结

ES10 新增的 Array 的 flat() 和 flatMap() 方法的出现，为我们处理数组中的多层嵌套提供了便捷，使得我们能够更加简便的进行数据处理。

通过上述示例，我们可以看出 flat() 方法和 flatMap() 方法的使用非常简单。只需要采用适当的参数，就能完成对数组的展开操作和元素的处理。

学习完这两个方法后，我们不仅能更好地掌握 JavaScript，同时也能在日常开发中为我们提供更好的帮助。

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