快捷導(dǎo)航

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

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

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

使用 find() 方法按屬性值在數(shù)組中查找對(duì)象
使用 filter() 方法按屬性值查找數(shù)組中的對(duì)象
使用 JavaScript for 循環(huán)按屬性值查找數(shù)組中的對(duì)象
使用 JavaScript for…in 循環(huán)按屬性值查找數(shù)組中的對(duì)象

數(shù)組指的是值的有序列表，每個(gè)值稱為由索引指定的元素。 JavaScript 數(shù)組可以保存混合類型的不同值，例如字符串、空值或布爾值，并且不需要數(shù)組的大小來指定它在哪里自動(dòng)增長和動(dòng)態(tài)。

在考慮數(shù)組對(duì)象時(shí)，它將多個(gè)值存儲(chǔ)在單個(gè)變量和具有相同數(shù)據(jù)類型的固定大小的順序元素集合中。使用數(shù)組構(gòu)造函數(shù)指定單個(gè)數(shù)字參數(shù)時(shí)，用戶應(yīng)設(shè)置數(shù)組的初始長度。

數(shù)組允許的最大長度為 4,294,967,295。盡管數(shù)組包含數(shù)據(jù)集合，但將數(shù)組視為相似類型的變量集合通常更有幫助。

此外，JavaScript 數(shù)組由不同的方法和屬性組成，這些方法和屬性將幫助程序在無需大量編碼的情況下高效執(zhí)行。

當(dāng)通過屬性值在數(shù)組中查找對(duì)象時(shí)，可以在 JavaScript 中使用不同的實(shí)現(xiàn)。

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

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

任何不滿足測(cè)試功能的值都將返回 undefined。下面的代碼說明了如何在 JavaScript 對(duì)象數(shù)組中通過 id 查找對(duì)象。

<!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í)用作聲明數(shù)組而不是 var 的常見做法。

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

輸出：

如果需要，可以在下面的代碼中使用 findIndex() 方法來查找匹配對(duì)象在數(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 和索引的動(dòng)物。作為輸出，找到的動(dòng)物是 Bird，其索引為 2，與用戶提供的 id (3) 匹配。

輸出：

使用 filter() 方法按屬性值查找數(shù)組中的對(duì)象

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

下面的代碼說明了如何在 JavaScript 對(duì)象數(shù)組中通過 id 查找對(duì)象。

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ù)組中的對(duì)象

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

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

如果匹配，程序返回一個(gè)對(duì)象。否則，它返回 null 作為輸出。

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

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ù)組中的對(duì)象

如有必要，for…in 循環(huán)可用于按屬性值查找數(shù)組對(duì)象，因?yàn)樗闅v對(duì)象的所有屬性值。

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

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 來獲取輸出。

輸出：

通過進(jìn)一步的實(shí)現(xiàn)，存在其他方法可以通過屬性值從對(duì)象數(shù)組中獲取 JavaScript 對(duì)象。

到此這篇關(guān)于javascript 中按屬性值查找數(shù)組中的對(duì)象多種方法的文章就介紹到這了,更多相關(guān)js按屬性值查找數(shù)組對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: