Question

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

它可以是纯JS或Lodash方法

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

＆＃13;

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>
    );
  });
};

＆＃13;

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;
  }, []);
};

请注意，{id}{status}{info}，根据您的评论，是无效的JSX（它会转换成什么？）。为了使其有效，我将其包装在上面的<div>中。或者，您可以将三个参数传递给concat，但是您必须确保每个参数

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

另请注意，如果您使用的是React，elements in an array usually need a 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 ); ......或类似的东西

使用ES6表示法中的filter（）方法来解析一维数组

3 个答案: