ECMAScript 2019 中的 flatMap 和 reduce 方法

在 ECMAScript 2019 中，新增了两个数组方法 flatMap 和 reduce，这两个方法在处理 API 响应时非常有用。

flatMap 方法

flatMap 方法是对原数组中的每个元素执行一个函数，然后将返回的结果展开成一个新的数组。如果返回的结果是一个数组，则会将其展开成一个扁平的数组。这个方法可以用于将多个数组合并成一个数组。

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

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const result = [arr1, arr2, arr3].flatMap(arr => arr);

console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

在这个示例中，我们创建了三个数组，然后将它们放在一个数组中。然后使用 flatMap 方法将这个数组展开成一个扁平的数组。

reduce 方法

reduce 方法是对数组中的每个元素执行一个函数，并将结果合并成一个单独的值。这个方法可以用于对数组进行求和、计数、求平均值等操作。

以下是一个使用 reduce 方法的示例代码：

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

const sum = arr.reduce((total, num) => total + num);

console.log(sum); // 15

在这个示例中，我们使用 reduce 方法对数组进行求和操作。我们传递了一个函数，这个函数使用两个参数来表示当前的值和累加器的值。在每次迭代中，我们将当前的值加上累加器的值，然后返回一个新的累加器值。最终，累加器的值就是数组中所有元素的和。

在处理 API 响应时的使用

在处理 API 响应时，我们经常需要对返回的数据进行操作。我们可以使用 flatMap 和 reduce 方法来对返回的数据进行扁平化、求和、计数等操作。

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

// javascriptcn.com 代码示例
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    const userIds = data.flatMap(post => post.userId);
    const totalPosts = data.reduce((total, post) => total + 1, 0);

    console.log(userIds); // [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5];
    console.log(totalPosts); // 100
  });

在这个示例中，我们使用 fetch 方法从一个 API 中获取数据。然后，我们使用 flatMap 方法将每个帖子的 userId 属性展开到一个数组中。接着，我们使用 reduce 方法对帖子进行计数，得到帖子的总数。

总结

在 ECMAScript 2019 中，新增了 flatMap 和 reduce 方法，这两个方法在处理 API 响应时非常有用。flatMap 方法可以用于将多个数组合并成一个数组，而 reduce 方法则可以用于对数组进行求和、计数、求平均值等操作。在处理 API 响应时，我们可以使用这两个方法来对返回的数据进行扁平化、求和、计数等操作。

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