ES9 新特性：数组.flat() 和 flatMap()-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的新版本 ECMAScript 2019 (ES9) 中，新增了两个有用的数组方法：flat() 和 flatMap()。这两个方法提供了更加便捷和高效的方式来处理多维数组，并且可以大大简化我们的代码。本文将详细介绍这两个方法的使用及其指导意义。

数组.flat()

flat() 方法用于将多维数组扁平化为一维数组。这个新特性非常实用，前端开发中处理多维数组的场景非常多，例如嵌套的 JSON 数据、树形菜单、多层嵌套的表格等等。在 ES6 中，我们已经可以用 reduce() 和 concat() 方法将多维数组扁平化，但是使用 flat() 方法可以更加简洁和易于理解。

使用 flat() 很容易，它接受一个可选参数，代表要扁平化的层数，默认值是 1。如果我们传入一个大于等于 2 的数，就会扁平化多维数组中的多个层级。

示例代码：

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

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

除了传入层数，flat() 方法还接受一个可选参数，代表要忽略空项。如果数组中存在空项，我们可以传入 false 来剔除这些空项。

数组.flatMap()

flatMap() 方法是 map() 方法和 flat() 方法的组合体。它可以对数组中每个元素进行操作，并将操作后的结果扁平化为一维数组。我们可以用它来替代 map() 和 flat() 方法的组合使用，以提高代码的可读性和性能。

示例代码：

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

上述代码中，我们将数组中的每个元素都乘以 2，并将结果扁平化为一维数组。

需要注意的是，flatMap() 方法不支持传递扁平化层数的参数，因此如果需要扁平化多维数组，我们仍可以使用 flat() 方法。

总结

ES9 的新特性 flat() 和 flatMap() 提供了更加便捷和高效的方式处理多维数组，可以大大简化我们的代码。需要注意的是，虽然这两个方法用起来非常简单，但是在实际开发中，我们需要根据具体情况来选择使用哪个方法，以提高代码的可读性和性能。

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