在过滤器中选择性地返回部分匹配对象

Question

在遍历列表的过滤方法时，如何选择性地只返回匹配对象的一部分。

例如：

let comments = [{
    "postId": 6,
    "status": "ACTIVE",
    "id": 28,
    "name": "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
    "email": "Ronny@rosina.org",
    "body": "voluptatem repellendus quo alias at laudantium\nmollitia quidem esse\ntemporibus consequuntur vitae rerum illum\nid corporis sit id"
  },
  {
    "postId": 6,
    "id": 29,
    "status": "INACTIVE",
    "name": "eum distinctio amet dolor",
    "email": "Jennings_Pouros@erica.biz",
    "body": "tempora voluptatem est\nmagnam distinctio autem est dolorem\net ipsa molestiae odit rerum itaque corporis nihil nam\neaque rerum error"
  }
];

comments.filter((ob, i) => {
  return ob.status == "ACTIVE" && ob.id
})

在这里，在comments 上运行过滤器会返回匹配的对象，但我只想返回id 的列表

Answer 1

comments.filter((ob, i) => {
  return ob.status == "ACTIVE" && ob.id
}).map(({id}) => id)

Answer 2

您可以在代码中使用 map 来实现此目的。 Map

这是工作代码。

comments.map(function (data) {
  return data.id
});

这将返回存在于 cmets 中的 id 数组。

Answer 3

两种解决方案：

过滤后使用地图

let comments = [{
    "postId": 6,
    "status": "ACTIVE",
    "id": 28,
    "name": "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
    "email": "Ronny@rosina.org",
    "body": "voluptatem repellendus quo alias at laudantium\nmollitia quidem esse\ntemporibus consequuntur vitae rerum illum\nid corporis sit id"
  },
  {
    "postId": 6,
    "id": 29,
    "status": "INACTIVE",
    "name": "eum distinctio amet dolor",
    "email": "Jennings_Pouros@erica.biz",
    "body": "tempora voluptatem est\nmagnam distinctio autem est dolorem\net ipsa molestiae odit rerum itaque corporis nihil nam\neaque rerum error"
  }
];

const arr = comments.filter((ob, i) => {
  return ob.status == "ACTIVE"
}).map(ob => ob.id)

使用reduce

let comments = [{
    "postId": 6,
    "status": "ACTIVE",
    "id": 28,
    "name": "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
    "email": "Ronny@rosina.org",
    "body": "voluptatem repellendus quo alias at laudantium\nmollitia quidem esse\ntemporibus consequuntur vitae rerum illum\nid corporis sit id"
  },
  {
    "postId": 6,
    "id": 29,
    "status": "INACTIVE",
    "name": "eum distinctio amet dolor",
    "email": "Jennings_Pouros@erica.biz",
    "body": "tempora voluptatem est\nmagnam distinctio autem est dolorem\net ipsa molestiae odit rerum itaque corporis nihil nam\neaque rerum error"
  }
];

const res = comments.reduce((pre, cur) => {
  if (cur.status === "ACTIVE") {
    return [...pre, cur.id]
  } else {
    return pre
  }
}, [])

---

我认为第一个可能很容易理解。

之后是reduce doc：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Answer 4

你可以用Destructing Assignment实现map()：

let comments = [{
    "postId": 6,
    "status": "ACTIVE",
    "id": 28,
    "name": "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
    "email": "Ronny@rosina.org",
    "body": "voluptatem repellendus quo alias at laudantium\nmollitia quidem esse\ntemporibus consequuntur vitae rerum illum\nid corporis sit id"
  },
  {
    "postId": 6,
    "id": 29,
    "status": "INACTIVE",
    "name": "eum distinctio amet dolor",
    "email": "Jennings_Pouros@erica.biz",
    "body": "tempora voluptatem est\nmagnam distinctio autem est dolorem\net ipsa molestiae odit rerum itaque corporis nihil nam\neaque rerum error"
  }
];

comments = comments.filter((ob, i) => {
  return ob.status == "ACTIVE" && ob.id
}).map(({id}) => ({id}));

console.log(comments);

Answer 5

您可以使用reduce 方法并检查条件c.status == "ACTIVE" && c.id。如果满足条件，则可以将值压入数组：

const result = comments.reduce((a, c)=> {
   if (c.status == "ACTIVE" && c.id)
       a.push(c.id);
   return a;
}, [])

一个例子：

let comments = [{
  "postId": 6,
  "status": "ACTIVE",
  "id": 28,
  "name": "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
  "email": "Ronny@rosina.org",
  "body": "voluptatem repellendus quo alias at laudantium\nmollitia quidem esse\ntemporibus consequuntur vitae rerum illum\nid corporis sit id"
},
{
  "postId": 6,
  "id": 29,
  "status": "INACTIVE",
  "name": "eum distinctio amet dolor",
  "email": "Jennings_Pouros@erica.biz",
  "body": "tempora voluptatem est\nmagnam distinctio autem est dolorem\net ipsa molestiae odit rerum itaque corporis nihil nam\neaque rerum error"
}
];

const result = comments.reduce((a, c)=> {
  if (c.status == "ACTIVE" && c.id)
    a.push(c.id);
  return a;
  }, [])

console.log(result);

Answer 6

我觉得您为什么要为此使用两个不同的循环。您可以通过简单地使用 1 for of 循环来做到这一点，如下例所示：

let comments = [{
    "postId": 6,
    "status": "ACTIVE",
    "id": 28,
    "name": "quo voluptates voluptas nisi veritatis dignissimos dolores ut officiis",
    "email": "Ronny@rosina.org",
    "body": "voluptatem repellendus quo alias at laudantium\nmollitia quidem esse\ntemporibus consequuntur vitae rerum illum\nid corporis sit id"
  },
  {
    "postId": 6,
    "id": 29,
    "status": "INACTIVE",
    "name": "eum distinctio amet dolor",
    "email": "Jennings_Pouros@erica.biz",
    "body": "tempora voluptatem est\nmagnam distinctio autem est dolorem\net ipsa molestiae odit rerum itaque corporis nihil nam\neaque rerum error"
  }
];

const matchedCommentsIds = []
for (const {status, id}of comments) {

  if (status == "ACTIVE" && id){
    matchedCommentsIds.push(id)
  }
}

console.log(matchedCommentsIds)

如果我们使用filter 和map 函数，那么主要的缺点是我们需要对数组进行两次迭代，这没有必要。