在 ES10 中，如何使用 Array.flat() 和 Array.flatMap() 解决数组操作遇到的问题-JavaScript中文网-JavaScript教程资源分享门户

数组是前端开发中最常用的数据结构之一，但在实际开发中，我们经常会遇到一些数组操作的问题，比如将多维数组展开成一维数组，或者在操作数组时需要同时对每个元素做一些变换等。在 ES10 中，引入了 Array.flat() 和 Array.flatMap() 两个方法，可以方便地解决这些问题。

Array.flat()

Array.flat() 方法可以用来将多维数组展开成一维数组。例如，我们有一个二维数组 arr：

const arr = [[1, 2], [3, 4, 5], [6, 7, [8, 9]]];

我们想把它展开成一维数组，可以使用 flat() 方法：

const arr1 = arr.flat();
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, [8, 9]]

默认情况下，flat() 方法只会展开一层，如果想要展开多层，可以指定展开的层数：

const arr2 = arr.flat(2);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

如果数组中有空位，flat() 方法会将其删除：

const arr3 = [1, 2, , 4];
const arr4 = arr3.flat();
console.log(arr4); // [1, 2, 4]

Array.flatMap() 方法可以用来对每个数组元素同时做一些变换，并将结果合并成一个数组。例如，我们有一个数组 arr：

const arr = [1, 2, 3];

我们想对每个元素都乘以 2 并加上 1，可以使用 flatMap() 方法：

const arr1 = arr.flatMap(x => [x * 2 + 1]);
console.log(arr1); // [3, 5, 7]

flatMap() 方法的参数是一个函数，该函数接受当前元素、当前索引和原数组作为参数，并返回一个新的数组。返回的数组会被自动展开并合并成一个数组。如果返回的是一个空数组，则会自动过滤掉该元素。例如：

const arr2 = [1, 2, 3, 4];
const arr3 = arr2.flatMap(x => x % 2 === 0 ? [] : [x]);
console.log(arr3); // [1, 3]

Array.flat() 和 Array.flatMap() 两个方法在实际开发中非常实用，可以让我们更加方便地处理数组操作。需要注意的是，这两个方法都是 ES10 新增的方法，在浏览器支持情况下可以直接使用，但需要注意是否需要进行兼容性处理。

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