在ES6表示法中使用filter（）方法解析一維數組

Question

我的代碼庫中的以下代碼段返回了一個數組的map ，我想知道如何通過一個用於status = 2的過濾器，以便僅獲得過濾后的輸出。 我應該filter數組然后使用map還是只過濾數據而不進行映射。

它可以是純JS或Lodash方法

PS我希望如代碼片段中所述，在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; } 

Answer 2

如果要在同一操作中進行過濾和映射（即不對數據進行兩次迭代），則需要使用reduce ：

const myFunction = () => {
  return data.edges.reduce((result, {
    node: {
      id,
      status,
      info
    }
  }) => {
    if (status === 2) {
      return result.concat(<div><span>{id}</span><span>{status}</span><span>{info}</span></div>);
    }
    return result;
  }, []);
};

請注意，根據您的評論， <span>{id}</span><span>{status}</span><span>{info}</span>是無效的JSX（它將轉換為什么？）。 為了使其有效，我將其包裝在上面的<div> 。 另外，您可以將三個參數傳遞給concat ，但隨后必須確保每個

result.concat(<span>{id}</span>, <span>{status}</span>, <span>{info}</span>);

還要注意，如果您使用React，則數組中的元素通常需要一個key 。

這是一個摘要：

 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 = () => data.edges.reduce( (result, { node: { id, status, info } }) => { if (status === 2) { return result.concat(<div><span>{id}</span><span>{status}</span><span>{info}</span></div>); } return result; }, [] ); console.log(myFunction()); 

 .as-console-wrapper{min-height:100%} 

Answer 3

twoEdges = edges.filter((thingy) => { return (thingy.node.status === 2);}); 

或twoEdges = edges.filter((thingy) => thingy.node.status === 2 ); ... 或類似的東西