在 JavaScript 中按属性值查找数组中的对象
数组指的是值的有序列表，每个值称为由索引指定的元素。 JavaScript 数组可以保存混合类型的不同值，例如字符串、空值或布尔值，并且不需要数组的大小来指定它在哪里自动增长和动态。
在考虑数组对象时，它将多个值存储在单个变量和具有相同数据类型的固定大小的顺序元素集合中。 使用数组构造函数指定单个数字参数时，用户应设置数组的初始长度。
数组允许的最大长度为 4,294,967,295。 尽管数组包含数据集合，但将数组视为相似类型的变量集合通常更有帮助。
此外，JavaScript 数组由不同的方法和属性组成，这些方法和属性将帮助程序在无需大量编码的情况下高效执行。
当通过属性值在数组中查找对象时，可以在 JavaScript 中使用不同的实现。
使用 find() 方法按属性值在数组中查找对象
我们可以使用 find() 方法通过对象的属性值在 JavaScript 的对象数组中查找对象。 在这里，find() 方法返回满足给定测试函数的第一个数组元素。
任何不满足测试功能的值都将返回 undefined。 下面的代码说明了如何在 JavaScript 对象数组中通过 id 查找对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Object In Array By Property Value</title>
</head>
<body>
<script>
var sampleArray = [
{"id": 1, "animal": "Dog"},
{"id": 2, "animal": "Cat"},
{"id": 3, "animal": "Bird"},
{"id": 4, "animal": "Fish"}
];
//getting the object by its id
var output = sampleArray.find(object => object.id === 3);
//outputs the animal to be found
document.write(output.animal);
</script>
</body>
</html>
const 关键字有时用作声明数组而不是 var 的常见做法。
在这里，用户需要找到具有给定 id 的动物，作为输出，该动物是与用户提供的 id (3) 匹配的 Bird。
输出：
如果需要，可以在下面的代码中使用 findIndex() 方法来查找匹配对象在数组中的索引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Javascript Find Object In Array By Property Value</title>
</head>
<body>
<script>
var sampleArray = [
{"id": 1, "animal": "Dog"},
{"id": 2, "animal": "Cat"},
{"id": 3, "animal": "Bird"},
{"id": 4, "animal": "Fish"}
];
//getting the index of the object that matches the id
var objectIndex = sampleArray.findIndex(object => object.id === 3);
//getting the output as the index and the animal to be found
document.write(objectIndex + "<br>");
document.write(sampleArray[objectIndex].animal);
</script>
</body>
</html>
在这里，用户需要找到具有给定 ID 和索引的动物。 作为输出，找到的动物是 Bird，其索引为 2，与用户提供的 id (3) 匹配。
输出：
使用 filter() 方法按属性值查找数组中的对象
我们还可以利用 filter() 方法创建一个新数组，其中填充了通过测试函数的元素。 如果元素为空并且不对原始数组进行任何更改，则 filter() 方法不会运行该函数。
下面的代码说明了如何在 JavaScript 对象数组中通过 id 查找对象。
var animals = [
{animalName: "Dog", ability: "Bark"},
{animalName: "Cat", ability: "Meow"},
{animalName: "Bird", ability: "Fly"},
{animalName: "Fish", ability: "Swim"}
];
var animalAbility = animals.filter(function(animal) {
return animal.ability == "Bark";
});
console.log(animalAbility);
在这里，用户可以通过输入需要从数组中获取的相关能力来获取所需的输出。
输出：
使用 JavaScript for 循环按属性值查找数组中的对象
首先，声明一个对象数组，每个对象都有一个 id 和 name 属性。 当涉及到程序的执行时，会创建一个带有数组、对象键和值的函数。
for 循环用于遍历数组中的对象。 使用相等运算符 (===) 使用分配的键和值检查每个对象。
如果匹配，程序返回一个对象。 否则，它返回 null 作为输出。
以下代码指示如何通过 JavaScript 对象数组中的键查找对象。 此代码不使用任何数组方法来查找数组对象。
let animals = [
{"id": 1, "animal": "Dog"},
{"id": 2, "animal": "Cat"},
{"id": 3, "animal": "Bird"},
{"id": 4, "animal": "Fish"}
]
//declaration of the function and iteration through the objects
function getObjectByKey(array, key, value) {
for (var c = 0; c < array.length; c++) {
if (array[c][key] === value) {
return array[c];
}
}
return null;
}
console.log(getObjectByKey(animals,'animal','Fish'))
用户可以通过提供相关密钥来获得所需的输出。
输出：
使用 JavaScript for...in 循环按属性值查找数组中的对象
如有必要，for...in 循环可用于按属性值查找数组对象，因为它遍历对象的所有属性值。
下面的代码显示了如何使用 for...in 循环来查找对象。
var animals = [
{"id": 1, "animal": "Dog"},
{"id": 2, "animal": "Cat"},
{"id": 3, "animal": "Bird"},
{"id": 4, "animal": "Fish"}
];
for (const c in animals) {
if (animals[c].id == 2) {
console.log(animals[c]);
}
}
在这里，用户可以根据需要提供相关的 id 来获取输出。
输出：
通过进一步的实现，存在其他方法可以通过属性值从对象数组中获取 JavaScript 对象。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
