ES12：使用更好的 Array.prototype.flatMap 方法

介绍

Array.prototype.flatMap 方法是 ECMAScript 2019 （ES10）中引入的新方法。它提供了一个更好的替代品来处理嵌套的数组。

该方法将一个数组映射到另一个数组，同时平坦化结果数组。这使得它在功能上类似于 Array.prototype.map 和 Array.prototype.flat 方法的组合。它的语法如下：

array.flatMap(callback[, thisArg])

其中，callback 是一个函数，它接受三个参数：当前元素、当前索引和源数组。

用途

flatMap 方法对于操作嵌套数组尤为有用。它将会遍历源数组，并对每个项调用回调函数。这使得它可以方便地处理数组中的数组，并将它们展平成一个数组。

我们可以通过以下示例更好地理解 flatMap 方法：

// 操作嵌套的数组
const nestedArr = [[1], [2, 3], [4, [5, 6]]];

const flattenArr = nestedArr.flatMap((arr) => arr);

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

// 与 map 和 flat 的区别
const arr = [1, 2, 3, 4];

const mapArr = arr.map((x) => [x + 1]);
console.log(mapArr); // [[2], [3], [4], [5]]

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

注意事项

需要注意的是，在使用 flatMap 方法时，callback 函数返回的必须是一个数组或可以迭代的对象，否则会抛出 TypeError。

此外，flatMap 方法与 map 方法具有相同的行为，如果元素为 undefined，则不会被展平到结果中。如果在 nestedArr 中有值为 undefined 的项，则不会出现在 flattenArr 中。

总结

Array.prototype.flatMap 方法是一个强大的工具，可以帮助我们更好地操作嵌套的数组。它的功能类似于 Array.prototype.map 和 Array.prototype.flat 方法的组合，可以对数组中的项进行映射并将结果平坦化。需要注意的是，callback 函数返回的必须是一个数组或可以迭代的对象。

示例代码

以下是一个简单的使用 flatMap 方法的示例代码：

const arr = ["dog", "cat", "bird"];

const newArr = arr.flatMap((item) => {
  if (item === "cat") {
    return ["black cat"];
  } else {
    return item;
  }
});

console.log(newArr); // ["dog", "black cat", "bird"]

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