ECMAScript 2017：使用 Array.prototype.flatMap 解决数组 map 后再 flat 的问题-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2017：使用 Array.prototype.flatMap 解决数组 map 后再 flat 的问题

在前端开发中，经常需要对数组进行操作。数组的 map 方法可以对数组中的每个元素进行操作并返回一个新数组，而 flat 方法可以将嵌套的数组展开成一维数组。然而，在某些情况下，我们需要对数组进行 map 操作后再进行 flat 操作，这时会出现一些问题。ECMAScript 2017 中新增的 Array.prototype.flatMap 方法可以解决这个问题。

问题描述

假设有一个二维数组，我们需要对每个元素进行操作，然后将结果展开成一维数组。我们可以这样做：

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.map(item => item.map(i => i * 2)).flat();
console.log(result); // [2, 4, 6, 8, 10, 12]

这段代码中，我们先使用 map 对每个元素进行操作，然后使用 flat 方法展开成一维数组。但是，如果我们需要对每个元素进行操作后再展开成二维数组呢？我们可能会这样写：

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.map(item => item.map(i => [i * 2])).flat();
console.log(result); // [[2], [4], [6], [8], [10], [12]]

这段代码中，我们对每个元素进行操作后返回一个包含一个元素的数组，然后使用 flat 方法展开成一维数组。但是，这并不是我们想要的结果。

使用 Array.prototype.flatMap 方法解决问题

ECMAScript 2017 中新增的 Array.prototype.flatMap 方法可以解决上述问题。flatMap 方法首先对每个元素进行操作，然后将结果展开成一维数组。与 map 和 flat 方法不同的是，flatMap 方法可以在操作后直接展开成二维数组。

我们可以这样写：

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.flatMap(item => item.map(i => [i * 2]));
console.log(result); // [[2], [4], [6], [8], [10], [12]]

这段代码中，我们使用 flatMap 对每个元素进行操作后直接展开成二维数组。这就是我们想要的结果。

示例代码

下面是一个更复杂的示例。我们有一个包含多个订单的数组，每个订单包含多个商品。我们需要对每个商品进行操作，然后将结果展开成一维数组。

-- -------------------- ---- -------
----- ------ - -
  -
    --- --
    ------ -
      - --- -- ----- -------- ------ -- --
      - --- -- ----- -------- ------ -- --
      - --- -- ----- -------- ------ -- --
    --
  --
  -
    --- --
    ------ -
      - --- -- ----- -------- ------ -- --
      - --- -- ----- -------- ------ -- --
    --
  --
--

----- ------ - -------------------- -- -------------------- -- --
  --------- ---------
  -------- --------
  ----- ----------
  ------ ---------- - --
-----

--------------------
-- -
--   - --------- -- -------- -- ----- -------- ------ -- --
--   - --------- -- -------- -- ----- -------- ------ -- --
--   - --------- -- -------- -- ----- -------- ------ -- --
--   - --------- -- -------- -- ----- -------- ------ -- --
--   - --------- -- -------- -- ----- -------- ------ --- -
-- -

这段代码中，我们使用 flatMap 对每个订单中的商品进行操作，然后将结果展开成一维数组。最终得到了一个包含所有商品信息的数组。这个示例展示了 flatMap 方法的强大之处。

结论

在处理数组时，我们经常需要对数组进行 map 操作后再进行 flat 操作。使用 ECMAScript 2017 中新增的 Array.prototype.flatMap 方法可以轻松解决这个问题。flatMap 方法可以在操作后直接展开成二维数组，避免了使用 map 和 flat 方法时出现的问题。flatMap 方法的使用可以让我们的代码更加简洁和易于理解。

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