在 TypeScript 中通过属性值查找数组中的对象
按属性值在数组中查找对象:
- 在数组上调用 find() 方法。
- 在每次迭代中,检查值是否满足条件。
- find() 方法返回数组中满足条件的第一个值。
const arr = [
{ id: 1, language: 'typescript' },
{ id: 2, language: 'javascript' },
{ id: 3, language: 'typescript' },
];
// 查找值匹配条件的第一个对象
const first = arr.find((obj) => {
return obj.id === 2;
});
// {id: 2, language: 'javascript'}
console.log(first);
// 查找多个值满足条件的对象
const all = arr.filter((obj) => {
return obj.language === 'typescript';
});
// [{id: 1, language: 'typescript'}, {id: 3, language: 'typescript'}]
console.log(all);
我们传递给 Array.find 方法的函数被数组中的每个元素(对象)调用,直到它返回一个 true 或遍历整个数组。
在每次迭代中,我们检查对象中 id 属性的值是否等于 2。
如果条件返回 true,则 find() 方法返回相应的对象并终止后面条件的判断。
当只需要获取第一个匹配特定条件的对象时,这非常方便。
没有多余的迭代,因为一旦满足条件,find() 方法就会停止并返回对象。
如果我们传递给 find 方法的回调函数从未返回真值,则 find 方法返回 undefined。
const arr = [
{ id: 1, language: 'typescript' },
{ id: 2, language: 'javascript' },
{ id: 3, language: 'typescript' },
];
// {id: number; language: string;} | undefined
const first = arr.find((obj) => {
return obj.id === 2;
});
请注意,第一个变量的类型要么是对象,要么是未定义的。
我们可以使用类型保护来缩小类型并能够访问对象的属性。
const arr = [
{ id: 1, language: 'typescript' },
{ id: 2, language: 'javascript' },
{ id: 3, language: 'typescript' },
];
// {id: number; language: string;} | undefined
const first = arr.find((obj) => {
return obj.id === 2;
});
if (first) {
// first 为对象
console.log(first.language);
}
TypeScript 可以安全地将第一个变量的类型推断为 if 块中的对象。
使用 filter() 方法在数组中查找多个对象,其值满足条件。 filter 方法接受一个函数作为参数,并返回一个仅包含满足特定条件的元素的数组。
const arr = [
{ id: 1, language: 'typescript' },
{ id: 2, language: 'javascript' },
{ id: 3, language: 'typescript' },
];
// 查找多个值满足条件的对象
const all = arr.filter((obj) => {
return obj.language === 'typescript';
});
// [{id: 1, language: 'typescript'}, {id: 3, language: 'typescript'}]
console.log(all);
我们传递给 Array.filter 方法的函数被数组中的每个元素调用。
如果函数返回一个真值,则元素将被添加到过滤器方法返回的数组中。
请注意,filter 方法将遍历整个数组,而不管条件满足多少次。
这样,我们就可以从对象数组中获取满足特定条件的多个对象。
换句话说,我们过滤数组以仅包含满足条件的对象。
如果我们传递给过滤器方法的回调函数从未返回真值,则过滤器方法返回一个空数组。
相关文章
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 Angular 中使用 TypeScript 的 getElementById 替换
发布时间:2023/04/14 浏览次数:153 分类:Angular
-
本教程指南提供了有关使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。这也提供了在 Angular 中 getElementById 的最佳方法。
在 TypeScript 中使用 try..catch..finally 处理异常
发布时间:2023/03/19 浏览次数:181 分类:TypeScript
-
本文详细介绍了如何在 TypeScript 中使用 try..catch..finally 进行异常处理,并附有示例。
在 TypeScript 中使用 declare 关键字
发布时间:2023/03/19 浏览次数:97 分类:TypeScript
-
本教程指南通过特定的实现和编码示例深入了解了 TypeScript 中 declare 关键字的用途。
在 TypeScript 中 get 和 set
发布时间:2023/03/19 浏览次数:172 分类:TypeScript
-
本篇文章演示了类的 get 和 set 属性以及如何在 TypeScript 中实现它。
在 TypeScript 中格式化日期和时间
发布时间:2023/03/19 浏览次数:161 分类:TypeScript
-
本教程介绍内置对象 Date() 并讨论在 Typescript 中获取、设置和格式化日期和时间的各种方法。
在 TypeScript 中返回一个 Promise
发布时间:2023/03/19 浏览次数:182 分类:TypeScript
-
本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。
在 TypeScript 中定义函数回调的类型
发布时间:2023/03/19 浏览次数:221 分类:TypeScript
-
本教程说明了在 TypeScript 中为函数回调定义类型的解决方案。为了程序员的方便和方便,实施了不同的编码实践指南。
在 TypeScript 中把 JSON 对象转换为一个类
发布时间:2023/03/19 浏览次数:110 分类:TypeScript
-
本教程演示了如何将 JSON 对象转换为 TypeScript 中的类。