如何使用ES6过滤对象值

Question

我有两个对象，想要用ES6进行筛选过滤。

第一个是我的数据对象，第二个是选定的某些数据。

我希望获取所有在数据对象中具有第二个对象值的项目。

let data = [
  {
    id: 1,
    name: 'A',
    status: 1
  },
  {
    id: 2,
    name: 'B',
    status: 1
  },
  {
    id: 3,
    name: 'C',
    status: 3
  },
  {
    id: 4,
    name: 'D',
    status: 2
  }
]

第二个对象是：

let selectedStatus = [
  {
    id: 1,
    status: 1
  },
  {
    status: 3
  }
]

在这种情况下，我想获取数据对象中包含第二个对象相同状态的项目，因此在这种情况下，我需要获得此结果：

data = [
  {
    id: 1,
    name: 'A',
    status: 1
  },
  {
    id: 2,
    name: 'B',
    status: 1
  },
  {
    id: 3,
    name: 'C',
    status: 3
  },
]

- mrvdrdg

---

什么不起作用？ - Nina Scholz

你迄今为止尝试了什么，做过什么尝试？ - rrd

请提供 [mcve]。 - Joseph D.

你想用 selectedStatus[0].id 做什么？ - HMR

Answer 1

你可以这样做：

data = data.filter(item =>
  selectedStatus.map(s => s.status).includes(item.status)
);

- SuleymanSah

Answer 2

假设您没有任何浏览器限制，您可以使用 Array.includes() 来检查 data 上处于 selectedStatus 的状态，然后使用 Array.filter() 过滤与所需条件匹配的对象。

const data = [
  {
    id: 1,
    name: 'A',
    status: 1
  },
  {
    id: 2,
    name: 'B',
    status: 1
  },
  {
    id: 3,
    name: 'C',
    status: 3
  },
  {
    id: 4,
    name: 'D',
    status: 2
  }
]

const selectedStatus = [
  {
    id: 1,
    status: 1
  },
  {
    status: 3
  }
];

const res = data.filter(obj => selectedStatus.map(s => s.status).includes(obj.status));

console.log(res);

- wentjun

Answer 3

let result = [];    
selectedStatus.forEach(selectedStatus => result = result.concat(data.filter(status => status.status === selectedStatus.status)))

- Henrique Zago

Answer 4

以下代码片段将给出预期结果：

var result = [];
data.forEach((value) => {
    selectedStatus.forEach(val => {
        if(value.status == val.status) { 
            result.push(value) 
        } 
    }); 
});
console.log(result)

- Gokulakannan T

Answer 5

如果您想生成第三个列表，就像您期望的结果一样，您可以生成一个白名单来进行匹配。

const whiteList = selectedStatus.map((sel) => sel.status); // which gives you an array of all selected status you want to filter for

const filteredData = data.filter((data) => ~whiteList.indexOf(data.status)); // please consider that filter returns a new array that contain all items where the condition was falsy. That can be confusing.

为了理解~运算符，请查看https://wsvincent.com/javascript-tilde/

您可能会对过滤后的数组结果感到困惑。请注意，array.filter返回一个新数组，其中包含所有未满足条件的项目，换句话说，它是一种否定。这可能会令人困惑。https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

ES7

const filteredData = data.filter((data) => whiteList.includes(data.status));

- lirumlarum

---

你可以使用 includes 或 some 来代替使用 indexOf 中的 ~。 - HMR

是的，这是一个更简单的解决方案，但需要 ES7，他要求的是 ES6 的解决方案... - lirumlarum

有些是ES6，但问题也标记了React，而没有babel的话它无法工作（因为jsx）。也许OP添加了ES6，认为它是最新的，因为一段时间以前它是如此炙手可热。 - HMR