ES12 中引入了许多新的语言特性和语法糖，其中包括了两种新的数组扩展操作符：flat() 和 flatMap()。这两种操作符可以让我们在处理数组时更加高效和方便，不仅能够提高代码的可读性，还能够简化代码逻辑。本文将详细介绍这两种操作符的使用方法，并提供示例代码以供参考。
flat() 操作符的使用方法
flat() 操作符是一个用来将嵌套数组“展平”为一维数组的方法。它可以将多维数组转换为一维数组，避免在处理多层嵌套数组时产生冗长的代码。
flat() 方法可以接受一个参数，表示展开嵌套数组的层数。如果不传参，则默认将数组完全展开成一维数组。
基本用法
const arr = [1, 2, [3, 4], [5, [6, 7]]]; console.log(arr.flat()); // expected output: [1, 2, 3, 4, 5, [6, 7]] console.log(arr.flat(2)); // expected output: [1, 2, 3, 4, 5, 6, 7]
在上面的例子中，我们定义了一个多层嵌套的数组 arr，使用 flat() 操作符将其展开为一维数组。我们可以看到，如果没有传参，展开后的数组中仍然包含了一个二维数组。
但是如果在 flat() 方法中传递一个参数 2，表示将数组展开成两层，那么最终展开后的数组就是一维的了。
使用 Infinity 参数完全展开数组
如果不确定数组嵌套的层数，我们可以使用 Infinity 参数，将数组完全展开成一维数组。
const arr = [1, 2, [3, [4, 5]]]; console.log(arr.flat(Infinity)); // expected output: [1, 2, 3, 4, 5]
使用 flat() 实现数组过滤和数据去重
利用 flat() 方法还可以实现数组过滤和数据去重。例如，我们可以将多维数组转换成一维数组后，再调用数组的方法，如 filter() 和 reduce() 等。
const arr = [1, 2, [3, 4], [5, [6, 7]]]; const filteredArray = arr.flat().filter((item) => item > 3); console.log(filteredArray); // expected output: [4, 5, 6, 7] const uniqueArray = arr.flat().reduce((prev, curr) => prev.includes(curr) ? prev : [...prev, curr], []); console.log(uniqueArray); // expected output: [1, 2, 3, 4, 5, 6, 7]
在上面的例子中，我们首先使用 flat() 方法将多维数组转换为一维数组。然后我们调用了 filter() 和 reduce() 方法进行数组过滤和数组去重操作。利用 flat() 方法使我们的代码更加简洁和高效。
flatMap() 操作符的使用方法
flatMap() 操作符是 Array.prototype 中的一个新方法，它类似于 map() 方法，但返回的值是一个“展平”的数组。
基本用法
const arr = [1, 2, 3, 4]; const result = arr.flatMap((x) => [x * 2]); console.log(result); // expected output: [2, 4, 6, 8]
在上面的例子中，我们将原始数组 arr 中的每个元素乘以 2，然后返回一个新的展平数组。由于唯一的参数是一个函数，因此该函数必须返回一个数组。
使用 flatMap() 方法实现数据转换和扁平化操作
与 flat() 方法一样，flatMap() 方法也可以用来扁平化和转换嵌套数组。
const nestedArray = [[[1], [2]], [[3], [4]]]; const flattenedAndSquaredArray = nestedArray.flatMap(x => x).flatMap(x => x).map(x => x * x); console.log(flattenedAndSquaredArray); // expected output: [1, 4, 9, 16]
在上面的例子中，我们首先使用 flatMap() 方法将嵌套数组扁平化成二维数组，然后再使用数组的 map() 方法逐个将每个元素进行平方操作，最终得到了一个扁平化并且平方的一维数组。
总结
在本文中，我们学习了 ES12 中引入的 flat() 和 flatMap() 两种数组扩展操作符的使用方法。flat() 操作符可以将多维数组转换为一维数组，并且可以利用其进行数组的过滤和去重操作。flatMap() 操作符类似于 map() 方法，但返回的数组是一个“展平”的数组，可以用于数据转换和扁平化操作。这两种操作符的出现，不仅提高了代码的可读性，也使得处理多层嵌套数组的问题变得更加简单和高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e650fadd4f0e0ff75d1ab