根据属性过滤对象数组 – JavaScript

作者

目录

Filter an Array of Objects based on a property – JavaScript

  1. 根据属性过滤对象数组
  2. 根据使用的属性过滤对象数组Array.find()
  3. 使用 for…of 根据属性过滤对象数组
  4. 使用 forEach 根据属性过滤对象数组

根据 JavaScript 中的属性过滤对象数组

要根据属性过滤对象数组：

  1. 使用该Array.filter()方法遍历数组。
  2. 在每次迭代中，检查对象的属性是否指向指定值。
  3. 该Array.filter()方法将返回一个数组，其中包含满足条件的所有对象。
索引.js
const people = [
  {name: 'Tom', age: 30},
  {name: 'John', age: 40},
  {name: 'Dillon', age: 30},
];

const results = people.filter(obj => {
  return obj.age === 30;
});

// 👇️ [{name: 'Tom', age: 30}, {name: 'Dillon', age: 30}]
console.log(results);

我们传递给Array.filter方法的函数

会针对数组中的每个元素进行调用。

在每次迭代中，我们检查对象是否具有age值为 的属性
30。如果是，则该对象被添加到新数组中。

如果从未满足条件，则该Array.filter()方法返回一个空数组。

您可以使用数组的长度来检查是否至少有一个对象符合条件。

索引.js
if (results.length > 0) {
  // 👉️ the condition was satisfied at least once
}

如果您只需要筛选满足条件的单个对象，请使用该
Array.find()方法。

根据使用的属性过滤对象数组Array.find()

这是一个三步过程：

  1. 使用该Array.find()方法遍历数组。
  2. 在每次迭代中，检查对象的属性是否指向特定值。
  3. 该find()方法将返回满足条件的第一个对象。
索引.js
const people = [
  {name: 'Tom', age: 30},
  {name: 'John', age: 40},
  {name: 'Dillon', age: 30},
];

const person = people.find(object => {
  return object.age === 30;
});

// 👉️ {name: 'Tom', age: 30}
console.log(person);

if (person !== undefined) {
  // 👉️ the condition was satisfied
}

我们传递给
Array.find()
方法的函数会针对数组中的每个元素进行调用，直到它返回真值或遍历整个数组。

一旦回调函数返回真值，相应的数组元素就会从Array.find().

如果回调函数从不返回真值，则Array.find()
返回undefined。

即使数组中有多个对象具有age值为 的属性，在方法短路30之前也只会返回第一个对象
。Array.find()

根据使用的属性过滤对象数组for...of

您还可以使用for...of循环来根据属性过滤对象数组。

索引.js
const people = [
  {name: 'Tom', age: 30},
  {name: 'John', age: 40},
  {name: 'Dillon', age: 30},
];

const results = [];

for (const person of people) {
  if (person.age === 30) {
    results.push(person);
  }
}

// 👇️ [{name: 'Tom', age: 31}, {name: 'Dillon', age: 30}]
console.log(results);

for …of语句用于循环遍历可迭代对象，如数组、字符串Map、Set和
NodeList对象generators。

在每次迭代中，我们检查当前对象是否满足条件，如果条件满足，我们
将对象推入一个新数组。

如果您只需要过滤单个对象，请使用该break语句。

索引.js
const people = [
  {name: 'Tom', age: 30},
  {name: 'John', age: 40},
  {name: 'Dillon', age: 30},
];

let result;

for (const person of people) {
  if (person.age === 30) {
    result = person;
    break;
  }
}

// 👇️ { name: 'Tom', age: 30 }
console.log(result);

我们使用let关键字来声明一个result可以重新分配的变量。

在每次迭代中，我们检查当前对象是否满足条件。

如果满足条件，我们将变量设置为对象并跳出循环。

break

语句终止当前循环或语句switch。

根据使用的属性过滤对象数组forEach

您还可以使用该forEach()方法根据属性过滤对象数组。

索引.js
const people = [
  {name: 'Tom', age: 30},
  {name: 'John', age: 40},
  {name: 'Dillon', age: 30},
];

const results = [];

people.forEach((person, index) => {
  console.log(index); // 👉️ 0, 1, 2

  if (person.age === 30) {
    results.push(person);
  }
});

// 👇️ [{name: 'Tom', age: 31}, {name: 'Dillon', age: 30}]
console.log(results);

我们传递给Array.forEach方法的函数
会针对数组中的每个元素进行调用。

在每次迭代中，我们检查当前对象是否具有等于指定值的属性。

如果满足条件，我们将对象推入一个新数组。

使用 时，您还可以访问index当前迭代的
forEach()。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：