快捷導(dǎo)航

javascript 中按屬性值查找數(shù)組中的對象多種方法

更新時間：2023年06月12日 11:27:20 作者：跡憶客

JavaScript 數(shù)組可以保存混合類型的不同值，例如字符串、空值或布爾值，并且不需要數(shù)組的大小來指定它在哪里自動增長和動態(tài)，這篇文章主要介紹了javascript 中按屬性值查找數(shù)組中的對象多種方法,需要的朋友可以參考下

使用 find() 方法按屬性值在數(shù)組中查找對象

我們可以使用 find() 方法通過對象的屬性值在 JavaScript 的對象數(shù)組中查找對象。在這里，find() 方法返回滿足給定測試函數(shù)的第一個數(shù)組元素。

任何不滿足測試功能的值都將返回 undefined。下面的代碼說明了如何在 JavaScript 對象數(shù)組中通過 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 關(guān)鍵字有時用作聲明數(shù)組而不是 var 的常見做法。

在這里，用戶需要找到具有給定 id 的動物，作為輸出，該動物是與用戶提供的 id (3) 匹配的 Bird。

輸出：

如果需要，可以在下面的代碼中使用 findIndex() 方法來查找匹配對象在數(shù)組中的索引。

<!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() 方法按屬性值查找數(shù)組中的對象

我們還可以利用 filter() 方法創(chuàng)建一個新數(shù)組，其中填充了通過測試函數(shù)的元素。如果元素為空并且不對原始數(shù)組進行任何更改，則 filter() 方法不會運行該函數(shù)。

下面的代碼說明了如何在 JavaScript 對象數(shù)組中通過 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);

在這里，用戶可以通過輸入需要從數(shù)組中獲取的相關(guān)能力來獲取所需的輸出。

輸出：

使用 JavaScript for 循環(huán)按屬性值查找數(shù)組中的對象

首先，聲明一個對象數(shù)組，每個對象都有一個 id 和 name 屬性。當(dāng)涉及到程序的執(zhí)行時，會創(chuàng)建一個帶有數(shù)組、對象鍵和值的函數(shù)。

for 循環(huán)用于遍歷數(shù)組中的對象。使用相等運算符 (===) 使用分配的鍵和值檢查每個對象。

如果匹配，程序返回一個對象。否則，它返回 null 作為輸出。

以下代碼指示如何通過 JavaScript 對象數(shù)組中的鍵查找對象。此代碼不使用任何數(shù)組方法來查找數(shù)組對象。

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

用戶可以通過提供相關(guān)密鑰來獲得所需的輸出。

輸出：

使用 JavaScript for…in 循環(huán)按屬性值查找數(shù)組中的對象

如有必要，for…in 循環(huán)可用于按屬性值查找數(shù)組對象，因為它遍歷對象的所有屬性值。

下面的代碼顯示了如何使用 for…in 循環(huán)來查找對象。

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

在這里，用戶可以根據(jù)需要提供相關(guān)的 id 來獲取輸出。

輸出：