在 JavaScript 中按属性值查找数组中的对象

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中按属性值查找数组中的对象

作者：迹忆客最近更新：2023/06/05 浏览次数：

数组指的是值的有序列表，每个值称为由索引指定的元素。 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。

输出：

JavaScript 按属性值在数组中查找对象 - 输出 1

如果需要，可以在下面的代码中使用 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) 匹配。

输出：

JavaScript 按属性值在数组中查找对象 - 输出 2

使用 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 按属性值在数组中查找对象 - 输出 3

使用 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 按属性值在数组中查找对象 - 输出 4

使用 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]);
  }
}