在 TypeScript 中过滤对象数组

作者

在 TypeScript 中过滤对象数组

Filter an array of Objects in TypeScript

在 TypeScript 中过滤对象数组：

  1. 调用filter()数组上的方法。
  2. 检查当前对象上的属性是否满足条件。
  3. 返回的数组将只包含满足条件的对象。
索引.ts
const employees = [
  { name: 'Alice', department: 'accounting' },
  { name: 'Bob', department: 'human resources' },
  { name: 'Carl', department: 'accounting' },
];

const result = employees.filter((obj) => {
  return obj.department === 'accounting';
});

// 👇️ [{name: 'Alice', department: 'accounting'},
//     {name: 'Carl', department: 'accounting'}]
console.log(result);

我们传递给
Array.filter
方法的函数被数组中的每个元素（对象）调用。

在每次迭代中，我们检查department对象的属性是否等于accounting并返回结果。

该filter方法返回一个仅包含元素的数组，回调函数为其返回真值。

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

请注意，我们不必为对象数组键入类型，因为 TypeScript 能够在使用值声明数组时推断类型。

如果您要声明一个空数组，请显式键入它。

索引.ts
const employees: { name: string; department: string }[] = [];

employees.push(
  { name: 'Alice', department: 'accounting' },
  { name: 'Bob', department: 'human resources' },
  { name: 'Carl', department: 'accounting' },
);

const result = employees.filter((obj) => {
  return obj.department === 'accounting';
});

// 👇️ [{name: 'Alice', department: 'accounting'},
//     {name: 'Carl', department: 'accounting'}]
console.log(result);

我们初始化了一个空数组，所以我们必须明确地输入它。

如果您初始化一个空数组并且没有显式键入它，TypeScript 会将其类型设置为any[]，这会有效地关闭所有类型检查。

如果您只需要在数组中查找满足条件的单个对象，请使用该Array.find()方法。

索引.ts
const employees = [
  { name: 'Alice', department: 'accounting' },
  { name: 'Bob', department: 'human resources' },
  { name: 'Carl', department: 'accounting' },
];

const result = employees.find((obj) => {
  return obj.name === 'Bob';
});

// 👇️ {name: 'Bob', department: 'human resources'}
console.log(result);

console.log(result?.name); // 👉️ "Bob"
console.log(result?.department); // 👉️ "human resources"

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

如果函数返回真值，则find()返回相应的数组元素并短路。

如果永远不满足条件，则该find()方法返回undefined。

请注意，我们

在访问属性时使用了可选链接。

这是必要的，因为我们无法确定条件是否满足。

您可以使用
类型保护来确定是否找到了匹配的对象。

索引.ts
const employees = [
  { name: 'Alice', department: 'accounting' },
  { name: 'Bob', department: 'human resources' },
  { name: 'Carl', department: 'accounting' },
];

const result = employees.find((obj) => {
  return obj.name === 'Bob';
});

if (result !== undefined) {
  // ✅ TypeScript knows that result is object

  // 👇️ {name: 'Bob', department: 'human resources'}
  console.log(result);

  console.log(result?.name); // 👉️ "Bob"
  console.log(result?.department); // 👉️ "human resources"
}

如果result不等于undefined，TypeScript 知道它是一个对象，所以它允许我们访问对象的属性。

该Array.find()方法返回满足条件的第一个数组元素。

即使有多个匹配元素，该方法在回调函数返回真值后立即短路。

–

发表评论