本文详细介绍在 JavaScript 中根据属性值从数组查找对象的四种常用方法。包括使用 find() 获取首个匹配对象、findIndex() 获取索引、filter() 获取所有匹配项，以及通过 for 循环和 for...in 循环手动遍历查找。文章提供具体代码示例，帮助开发者高效处理数组对象数据。
数组是值的有序列表，其中的每个值被称为由索引指定的元素。JavaScript 数组可以存储混合类型的值，例如字符串、null 或布尔值，并且无需预先指定大小，数组会根据需要自动动态增长。
在考虑数组对象时，它涉及将多个值存储在单个变量中，这通常被视为具有相同数据类型的固定大小顺序元素集合。如果使用数组构造函数并指定单个数字参数，用户需要设置数组的初始长度。
数组允许的最大长度为 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 对象。
到此这篇关于javascript 中按属性值查找数组中的对象多种方法的文章就介绍到这了,更多相关js按属性值查找数组对象内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！