ES10 Array.Flat 和 Array.flatMap 教程

在 JavaScript 的发展历程中，ES10（ECMAScript 2019）带来了许多新的特性，其中包括 Array.Flat 和 Array.flatMap 这两个数组方法的添加。这两个方法能够使我们更方便地操作数组，本文将会详细介绍这两个方法的用法。

Array.Flat

Array.Flat 方法可以将多重数组拍平成单层数组，简化了数组数据的处理流程。

基本用法

Array.Flat 接收一个可选的参数，用于指定拍平的层数。如果不指定参数，默认将多重数组完全拍平成一个单层数组。

let arr = [1, 2, [3, 4]];
let flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4]

如果数组中的元素包含多重数组，则 flat 方法可以递归地将所有数组都拍平。

let arr = [1, 2, [3, [4]]];
let flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, [4]]

如果希望只拍平一层，则需要指定拍平的层数。

let arr = [1, 2, [3, [4]]];
let flatArr = arr.flat(2);
console.log(flatArr); // [1, 2, 3, 4]

注意事项

1. flat 方法只会拍平数组中的可迭代元素。如果数组中的元素不可迭代，则 flat 方法不会对其做任何操作。

let arr = [1, 2, [3, 4], "hello"];
let flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, "hello"]

1. flat 方法会删除数组中的空项。

let arr = [1, 2, , 3, 4];
let flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4]

为了避免删除空项，可以使用 flat 方法的可选参数设置一个高的拍平层数。

1. 对于稀疏数组来说（即数组中存在 empty slot 的情况），flat 方法会自动跳过 empty slot。

let arr = [, , [1, 2], [3, 4]];
let flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4]

Array.flatMap

Array.flatMap 方法结合了 map 和 flat 两种方法的功能，可以在对数组进行映射的同时，将多重数组拍平为单层数组。

基本用法

flatMap 方法接收两个参数：第一个参数是一个回调函数，用于对数组进行映射；第二个参数是可选的，用于指定回调函数中 this 的值。

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

如果回调函数返回的是一个数组，则 flatMap 方法会将其拍平到结果数组中。

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

注意事项

与 flat 方法类似，flatMap 方法也只会拍平数组中的可迭代元素，并自动跳过 empty slot。

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

总结

ES10 中的 Array.Flat 和 Array.flatMap 方法使得数组的处理更加便捷。需要注意的是，在使用这两种方法时需要注意稀疏数组和空项的处理。我们可以根据具体的场景选择合适的方法来处理数组数据，提高代码的可读性和可维护性。

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