ES10 中新方法 Array.prototype.flatMap() 的使用技巧

在 ES10 中引入了一个新的方法 Array.prototype.flatMap()，它可以帮助我们更容易地处理嵌套的数组。

方法介绍

flatMap() 方法首先对每个元素执行一个映射函数，然后将结果压缩成一个新数组。与 map() 方法不同的是，如果映射函数返回的是一个数组，那么该数组会被展开一层后再被压缩。

以下是该方法的语法：

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

其中，arr 是要操作的数组，callback 是对每个元素进行处理的回调函数。与 map() 方法类似，callback 需要返回一个新值。如果这个值是一个数组，那么它会被和别的子数组一起展开成一个新的数组，否则它会被当成一个元素添加到新的数组中。thisArg 参数可选，表示在执行回调函数时的 this 值。

使用技巧

1. 处理嵌套数组

使用 flatMap() 可以更容易地处理嵌套数组的情况，无需手动展开。例如，可以使用 flatMap() 方法将数组中的嵌套数组扁平化：

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

const flattenedArr = arr.flatMap(x => x);

console.log(flattenedArr); // [1, 2, 3, 4]

1. 移除空值

使用 flatMap() 方法结合 filter() 方法可以更轻松地移除数组中的空值。例如：

const arr = [1, 2, 3, [4, null]];

const filteredArr = arr.flatMap(x => x).filter(Boolean);

console.log(filteredArr); // [1, 2, 3, 4]

这里的 Boolean 函数会将数组中的所有“假”值（如 false、null、undefined、0 以及空字符串）移除掉。

1. 处理异步函数

使用 flatMap() 方法可以更方便地处理异步函数的结果。例如，可以使用 Promise.all() 和 flatMap() 方法来并行处理多个异步请求结果：

const urls = ['http://example.com', 'http://other-example.com'];

Promise.all(urls.map(url => fetch(url)))
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => data.flatMap(obj => obj.items))
  .then(items => console.log(items));

这里的 fetch() 函数返回一个 Promise 对象，因此我们可以使用 Promise.all() 方法等待多个请求完成后再处理它们的结果。最后我们使用 flatMap() 方法来将所有请求结果中的 items 属性扁平化为一个数组。

示例代码

以下是一个简单的示例代码，它使用 flatMap() 方法将嵌套数组扁平化。

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

const flattenedArr = arr.flatMap(x => x);

console.log(flattenedArr); // [0, 1, 2, 3, 4, 5]

结论

flatMap() 方法是一个强大的新方法，它可以轻松地扁平化嵌套的数组、移除空值以及处理异步函数的结果。在日常开发中，我们可以使用它来简化我们的代码并提高代码的可读性。

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