ECMAScript 2019 中的 Array.prototype.flatMap() 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2019 中，新加入了 Array.prototype.flatMap() 方法，它可以让我们更加方便地处理嵌套数组，并且简化代码逻辑。本文将详细介绍 flatMap() 方法的用途、用法及示例。

1. 什么是 Array.prototype.flatMap() 方法？

flatMap() 方法是 Array.prototype 上的一个方法，它可以对原数组进行一些操作，最终返回一个新的数组。与 map() 方法不同的是，flatMap() 方法可以将嵌套的数组展开成一维数组，并在展开过程中进行一些操作。

flatMap() 方法的定义如下：

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 是一个函数，它接受三个参数：currentValue 表示当前元素的值，index 表示当前元素的索引，array 表示原数组。thisArg 是可选的，表示在执行 callback 函数时，this 的指向。

2. `flatMap()` 方法的用途

flatMap() 方法的用途非常广泛，包括但不限于以下几个方面：

2.1 将嵌套的数组展开成一维数组

有时候我们会遇到嵌套的数组，例如：

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

如果我们想将这个数组展开成一维数组，可以使用 flatMap() 方法：

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

2.2 对每个元素进行操作并返回新的数组

flatMap() 方法还可以对每个元素进行操作，并返回一个新的数组，例如：

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

2.3 过滤数组中的元素

我们可以通过 flatMap() 方法来过滤掉数组中的某些元素，例如：

const arr = [1, 2, 3, 4, 5];
const newArr = arr.flatMap(item => {
  if (item % 2 === 0) {
    return [];
  } else {
    return [item];
  }
});
console.log(newArr); // [1, 3, 5]

在上面的例子中，我们过滤掉了数组中的偶数。

3. `flatMap()` 方法的示例

下面是一些 flatMap() 方法的示例：

3.1 将字符串转换成数组

const str = 'hello world';
const arr = str.split(' ').flatMap(item => item.split(''));
console.log(arr); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

3.2 将对象数组转换成数组

const arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const newArr = arr.flatMap(item => Object.values(item));
console.log(newArr); // [1, 'Alice', 2, 'Bob', 3, 'Charlie']

3.3 将多维数组展开成一维数组

const arr = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
const flatArr = arr.flatMap(item => item).flatMap(item => item);
console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]

4. 总结

flatMap() 方法是一个非常实用的方法，它可以让我们更加方便地处理嵌套数组，简化代码逻辑。在实际开发中，我们可以根据具体需求来使用 flatMap() 方法，例如将嵌套的数组展开成一维数组、对每个元素进行操作并返回新的数组、过滤数组中的元素等。希望本文对大家有所帮助，谢谢阅读！

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

ECMAScript 2019 中的 Array.prototype.flatMap() 方法详解