ES10 中 Array 扩展 flat() 与 flatMap() 函数详解

在 ES10 中，Array 类型新增了两个非常实用的函数：flat() 和 flatMap()。这两个函数能够大大简化数组的操作，使代码更加简洁易读。本文将详细介绍这两个函数的使用方法，以及它们在实际开发中的应用。

flat()

flat() 函数用于将多维数组转换为一维数组。它的语法如下：

array.flat([depth])

其中，array 表示要转换的数组，depth 表示要转换的维度。如果不指定 depth 参数，则默认将所有维度转换为一维数组。

下面是一个简单的例子：

const arr1 = [1, 2, [3, 4]];
const arr2 = arr1.flat();

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

在上面的例子中，arr1 是一个包含两个元素的数组，其中第二个元素是一个包含两个元素的数组。调用 arr1.flat() 后，返回一个包含四个元素的一维数组。

如果要将多维数组转换为更深的维度，可以使用 depth 参数。例如：

const arr1 = [1, 2, [3, 4, [5, 6]]];
const arr2 = arr1.flat(2);

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

在这个例子中，arr1 是一个包含三个元素的数组，其中第三个元素是一个包含两个元素的数组，再嵌套一个包含两个元素的数组。调用 arr1.flat(2) 后，返回一个包含六个元素的一维数组。

值得注意的是，flat() 函数会自动过滤掉数组中的空项。例如：

const arr1 = [1, 2, , 4];
const arr2 = arr1.flat();

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

在这个例子中，arr1 包含四个元素，其中第三个元素是一个空项。调用 arr1.flat() 后，返回一个包含三个元素的一维数组，自动过滤掉了空项。

flatMap()

flatMap() 函数是 map() 和 flat() 函数的组合，可以对数组进行映射和转换。它的语法如下：

array.flatMap(callback)

其中，array 表示要转换的数组，callback 表示对数组元素进行处理的回调函数。flatMap() 函数会先对数组元素执行 map() 函数，然后再对返回的数组执行 flat() 函数。

下面是一个简单的例子：

const arr1 = [1, 2, 3];
const arr2 = arr1.flatMap(x => [x * 2]);

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

在这个例子中，arr1 包含三个元素。调用 arr1.flatMap(x => [x * 2]) 后，先对数组元素执行 map() 函数，将每个元素乘以 2，返回一个新的数组。然后再对返回的数组执行 flat() 函数，将多维数组转换为一维数组，最终返回一个包含三个元素的一维数组。

需要注意的是，flatMap() 函数会自动过滤掉数组中的空项，与 flat() 函数的行为相同。

应用场景

flat() 和 flatMap() 函数的应用场景非常广泛，特别是在处理多维数组时更是如此。下面列举几个常见的应用场景：

1. 数组去重

使用 flat() 函数可以方便地将多维数组转换为一维数组，然后再使用 Set 对象进行去重。例如：

const arr1 = [1, 2, [3, 4, [5, 6]]];
const arr2 = [...new Set(arr1.flat())];

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

在这个例子中，arr1 是一个包含三个元素的数组，其中第三个元素是一个包含两个元素的数组，再嵌套一个包含两个元素的数组。使用 arr1.flat() 将多维数组转换为一维数组，然后使用 Set 对象进行去重，最终返回一个包含六个元素的一维数组。

2. 数组扁平化

使用 flatMap() 函数可以方便地对数组进行扁平化操作。例如：

const arr1 = [[1, 2], [3, 4], [5, 6]];
const arr2 = arr1.flatMap(x => x);

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

在这个例子中，arr1 是一个包含三个元素的数组，每个元素都是一个包含两个元素的数组。使用 arr1.flatMap(x => x) 对数组进行扁平化操作，最终返回一个包含六个元素的一维数组。

3. 数组转换

使用 flatMap() 函数可以方便地对数组进行转换操作。例如：

const arr1 = ['hello', 'world'];
const arr2 = arr1.flatMap(x => x.split(''));

console.log(arr2); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

在这个例子中，arr1 是一个包含两个元素的数组，每个元素都是一个字符串。使用 arr1.flatMap(x => x.split('')) 对数组进行转换操作，将每个字符串转换为包含每个字符的数组，最终返回一个包含十个元素的一维数组。

总结

flat() 和 flatMap() 函数是 ES10 中 Array 类型新增的两个非常实用的函数，能够大大简化数组的操作，使代码更加简洁易读。使用这两个函数可以方便地对数组进行去重、扁平化和转换等操作。在实际开发中，这两个函数的应用场景非常广泛，特别是在处理多维数组时更是如此。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e401961886fbafa4035c1a