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

码农六六

已于 2022-10-20 20:02:51 修改

阅读量9.2k

点赞数 2

分类专栏：对象方法文章标签： javascript 前端开发语言

于 2022-09-30 10:48:22 首次发布

原文链接：https://www.delftstack.com/howto/javascript/javascript-find-object-in-array-by-property-value/

版权

对象方法专栏收录该内容

13 篇文章 0 订阅

订阅专栏

数组引用值的有序列表，每个值称为索引指定的元素。JavaScript 数组可以保存混合类型的不同值，例如字符串、空值或布尔值，并且不需要数组的大小来指定它自动增长和动态的位置。

在考虑数组对象时，它将多个值存储在单个变量和具有相同数据类型的元素的固定大小的顺序集合中。使用数组构造函数指定单个数值参数时，用户应设置数组的初始长度。

允许的数组的最大长度为 4，294，967，295。尽管数组保存数据收集，但通常将数组视为类似类型的变量的集合更有帮助。

此外，JavaScript数组由不同的方法和属性组成，这些方法和属性将有助于程序高效执行而无需太多编码。

当通过属性值在数组中查找对象时，可以在 JavaScript 中使用不同的实现。

1.使用方法按属性值查找数组中的对象find( )

2. filter()使用方法通过属性值在数组中查找对象

编辑 3.for使用JavaScript循环按属性值在数组中查找对象

4.for. ..in使用JavaScript循环按属性值在数组中查找对象

1.使用方法按属性值查找数组中的对象find( )

我们可以使用该方法通过其属性值在JavaScript中的对象数组中查找对象。在这里，该方法返回满足给定测试函数的第一个数组元素。find()find()

任何不满足测试函数的值都将返回。下面的代码指示如何在 JavaScript 对象数组中按 ID 查找对象。undefined

<!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 的动物，并且作为输出，该动物Bird与用户提供的 id (3) 匹配。

输出：

如果需要，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) 匹配。

输出：

2. filter()使用方法通过属性值在数组中查找对象

我们还可以利用该filter()方法创建一个新数组，其中填充了通过测试函数的元素。filter()如果元素为 null 并且不对原始数组进行任何更改，则该方法不会运行该函数。

下面的代码说明了如何通过 id 在 JavaScript 对象数组中查找对象。

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);

在这里，用户可以通过输入ability从数组中获取所需的相关信息来获得所需的输出。

输出

3.for使用JavaScript循环按属性值在数组中查找对象

首先，声明一个对象数组，每个对象都有一个 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'))

用户可以通过提供相关的密钥来获得所需的输出。

输出：

4.for. ..in使用JavaScript循环按属性值在数组中查找对象

如有必要，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来获取输出。

输出：