ES11 中数组的 flatMap() 何时使用

ES11 中新增的 flatMap() 方法是一种操作数组的高阶函数，可以将数组扁平化并映射为新的数组，适用于一些不规则的数据处理场景。本文将详细介绍 flatMap() 方法的用法，特性以及实际应用。

flatMap() 方法的特性

首先我们来看看 flatMap() 方法的公式：Array.prototype.flatMap(callback(currentValue[, index[, array]])[, thisArg])

1. 参数

   • callback: 处理数组元素的回调函数，返回一个数组或者值。它接收三个参数：
     • currentValue: 当前遍历到的数组元素。
     • index(可选): 当前遍历元素的下标。
     • array(可选): 要处理的数组。
   • thisArg(可选): 当执行 callback 函数时，用于调用该函数的值。

2. 返回值 flatMap() 方法返回一个新数组，该数组是通过使用 callback 对原来数组中的每个元素进行映射，然后将结果数组压缩成一个新数组。

flatMap() 方法的应用

接下来我们将结合一些具体的例子来讲述 flatMap() 方法的应用。

一维数组扁平化

我们可以使用 flatMap() 方法将一个二维数组扁平化成一维数组。

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

批量修改数组元素

我们可以使用 flatMap() 方法将原数组中的每个元素替换成新的数组。

const arr = ["a", "b", "c"];
const result = arr.flatMap(item => [item, "d"]);
// ['a', 'd', 'b', 'd', 'c', 'd']

过滤数组并将值映射成新数组

我们可以使用 flatMap() 方法将原数组中满足特定条件的元素映射成新的数组。

const arr = [1, 2, 3, 4, 5];
const newArr = arr.flatMap(item => item % 2 === 0 ? [item] : []);
// [2, 4]

使用 flatMap() 实现基于 Promise 的异步并发请求

由于 flatMap() 会压缩子数组，当我们回调函数中返回的是 Promise 对象时，它可以实现链式调用，从而实现基于 Promise 的异步并发请求。

const promiseArr = [promise1, promise2, promise3];
const data = await Promise.all(promiseArr.flatMap((promise, index) => promise.then(res => {
  return { id: index, data: res };
})));

flatMap() 方法的适用场景

• 适用于映射数据，不需要通过新增的变量来储存结果。
• 适用于需要扁平化数组并返回新数组的情况。
• 对于链式调用 Promise 的场景，使用 flatMap() 可以有效地减少代码量和提高可读性。

总结

本文介绍了 ES11 中新增的 flatMap() 方法的特性、应用场景以及实际应用，希望可以帮助读者更加深入地了解该方法的用法和特点，并在实际项目中应用该方法，提高代码质量和可读性。

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