javascript - 使用ES6表示法中的filter()方法解析一维数组

Question

我的代码库中的以下代码片段返回数组的map，我想知道如何传递例如status = 2的过滤器，以便我只能得到过滤后的输出。我应该过滤数组然后使用map还是只过滤数据而不进行映射。

可以是纯JS，也可以是Lodash方法

P.S 我希望打印代码段中提到的 return 语句中的最终输出。

const data = {
  "edges": [{
      "node": {
        "id": 20,
        "status": 1,
        "info": "Order info 20"
      }
    },
    {
      "node": {
        "id": 19,
        "status": 1,
        "info": "Order info 19"
      }
    },
    {
      "node": {
        "id": 18,
        "status": 2,
        "info": "Order info 18"
      }
    },
    {
      "node": {
        "id": 17,
        "status": 3,
        "info": "Order info 17"
      }
    },
    {
      "node": {
        "id": 16,
        "status": 2,
        "info": "Order info 16"
      }
    },
    {
      "node": {
        "id": 15,
        "status": 2,
        "info": "Order info 15"
      }
    },
    {
      "node": {
        "id": 14,
        "status": 1,
        "info": "Order info 14"
      }
    },
    {
      "node": {
        "id": 13,
        "status": 2,
        "info": "Order info 13"
      }
    },
    {
      "node": {
        "id": 12,
        "status": 1,
        "info": "Order info 12"
      }
    },
    {
      "node": {
        "id": 11,
        "status": 1,
        "info": "Order info 11"
      }
    },
    {
      "node": {
        "id": 10,
        "status": 1,
        "info": "Order info 10"
      }
    },
    {
      "node": {
        "id": 9,
        "status": 1,
        "info": "Order info 9"
      }
    },
    {
      "node": {
        "id": 8,
        "status": 1,
        "info": "Order info 4"
      }
    },
    {
      "node": {
        "id": 7,
        "status": 1,
        "info": "Order info 8"
      }
    },
    {
      "node": {
        "id": 6,
        "status": 1,
        "info": "Order info 7"
      }
    },
    {
      "node": {
        "id": 5,
        "status": 1,
        "info": "Order info 6"
      }
    },
    {
      "node": {
        "id": 4,
        "status": 1,
        "info": "Order info 5"
      }
    },
    {
      "node": {
        "id": 3,
        "status": 1,
        "info": "Order info 3"
      }
    },
    {
      "node": {
        "id": 2,
        "status": 1,
        "info": "Order info 2"
      }
    },
    {
      "node": {
        "id": 1,
        "status": 1,
        "info": "Order info 1"
      }
    }
  ]
};

const myFunction = () => {
  return data.edges.map(({
    node: {
      id,
      status,
      info
    }
  }) => {
    return(
      <span>{id}</span>
      <span>{status}</span>
      <span>{info}</span>
    );
  });
};

Answer 1

您可以过滤数组并使用模板文字映射所需的字符串。

var data = { edges: [{ node: { id: 20, status: 1, info: "Order info 20" } }, { node: { id: 19, status: 1, info: "Order info 19" } }, { node: { id: 18, status: 2, info: "Order info 18" } }, { node: { id: 17, status: 3, info: "Order info 17" } }, { node: { id: 16, status: 2, info: "Order info 16" } }, { node: { id: 15, status: 2, info: "Order info 15" } }, { node: { id: 14, status: 1, info: "Order info 14" } }, { node: { id: 13, status: 2, info: "Order info 13" } }, { node: { id: 12, status: 1, info: "Order info 12" } }, { node: { id: 11, status: 1, info: "Order info 11" } }, { node: { id: 10, status: 1, info: "Order info 10" } }, { node: { id: 9, status: 1, info: "Order info 9" } }, { node: { id: 8, status: 1, info: "Order info 4" } }, { node: { id: 7, status: 1, info: "Order info 8" } }, { node: { id: 6, status: 1, info: "Order info 7" } }, { node: { id: 5, status: 1, info: "Order info 6" } }, { node: { id: 4, status: 1, info: "Order info 5" } }, { node: { id: 3, status: 1, info: "Order info 3" } }, { node: { id: 2, status: 1, info: "Order info 2" } }, { node: { id: 1, status: 1, info: "Order info 1" } }] },
    myFunction = _ => data.edges.
        filter(a => a.node.status === 2).
        map(({ node: { id, status, info } }) => `<div><span>${id}</span> <span>${status}</span> <span>${info}</span></div>`);

console.log(myFunction());

.as-console-wrapper { max-height: 100% !important; top: 0; }