在 JavaScript 中從陣列中搜尋物件

Sahil Bhosale 2023年1月30日 2021年10月2日

JavaScript JavaScript Object JavaScript Array

在 JavaScript 中使用 forEach() 在陣列中搜尋物件
使用 JavaScript 中的 find() 方法在陣列中搜尋物件

在 JavaScript 中，在陣列資料結構中使用和儲存資料是很常見的。陣列資料結構可以採用多種方式，例如數字、字串、另一個陣列作為元素或物件。在本文中，讓我們討論如何搜尋陣列中的物件以及每個單獨物件中存在的各種值。

在這裡，我們有一個名為 arrayofObjects 的物件陣列。在每個物件內部，有由鍵值對錶示的各種值。有 3 個鍵值對。鍵是名稱、職業和公司。使用這些鍵，我們將能夠訪問每個單獨物件的相應值。

var arrayofObjects = [
        { name:"Adam", profession:"Engineer", company: "Google" },
        { name:"Sam", profession:"Manager", company: "Amazon" },
        { name:"Gerogia", profession:"Designer", company: "Netflix" },
        { name:"Kate", profession:"Engineer", company: "Microscoft" },
        { name:"James", profession:"Sales", company: "Amazon" },
    ];

陣列由方括號 [] 表示，而物件由大括號 {} 表示。

有幾種方法可以在陣列中查詢物件。一些方法如下所示。

在 JavaScript 中使用 `forEach()` 在陣列中搜尋物件

在陣列中查詢物件的傳統方法是使用 forEach() 迴圈。有了這個，我們可以遍歷 for 迴圈中存在的每個元素。

首先，讓我們使用 forEach() 從陣列中訪問整個物件。稍後我們將看到如何訪問存在於物件中的各個值。要從上述陣列列印整個物件，你可以使用 forEach() 迴圈。這個迴圈將為我們提供兩件事：來自陣列的元素本身和元素的索引。為此，我們必須將兩個引數傳遞給 forEach()。在這種情況下，我們只需要元素而不需要索引，因此我們將傳遞一個引數，object。你可以為此引數指定任何名稱。

//print name of the people who work at amazon
arrayofObjects.forEach(object =>{
    console.log(object);
});

由於 forEach() 迴圈將遍歷每個元素，該元素將儲存在這個 object 變數中。現在 object 變數將包含陣列中的整個物件。如果你使用控制檯列印這個 object 變數，它將列印陣列中存在的所有物件。

輸出：

Object { name: "Adam", profession: "Engineer", company: "Google" }
Object { name: "Sam", profession: "Manager", company: "Amazon" }
Object { name: "Gerogia", profession: "Designer", company: "Netflix" }
Object { name: "Kate", profession: "Engineer", company: "Microsoft" }
Object { name: "James", profession: "Sales", company: "Amazon" }

我們已經從陣列中獲取了每個物件；讓我們從這些物件訪問內部值。現在讓我們列印在亞馬遜公司工作的員工的姓名。要訪問物件中的任何鍵，我們可以在 object 變數後面使用一個點並指定鍵。例如，要訪問公司金鑰，我們將使用 object.company。

//print name of the people who work at amazon
arrayofObjects.forEach(object =>{
    if(object.company === "Amazon"){
        console.log("Amazon Employee:", object.name);
    }
});

使用 if 語句，我們將鍵的值與字串 Amazon 進行比較，如果匹配，我們將輸入 if 語句。之後，我們將使用 object.name 列印在亞馬遜工作的員工的姓名，如上所示。這將為我們提供以下輸出。

輸出：

Amazon Employee: Sam
Amazon Employee: James

由於只有兩個人在亞馬遜工作，我們將 Sam 和 James 作為輸出。

同樣，我們可以使用下面的 name、profession 和 company 鍵列印所有物件的所有值。

//print every details of a person
arrayofObjects.forEach(object =>{
    console.log(object.name + " is " + object.profession +" who works at " + object.company);
});

輸出：

Adam is Engineer who works at Google
Sam is Manager who works at Amazon
Georgia is a Designer who works at Netflix
Kate is Engineer who works at Microsoft
James is Sales who works at Amazon

使用 JavaScript 中的 `find()` 方法在陣列中搜尋物件

find() 方法是在 JavaScript 中從陣列中查詢物件及其元素的另一種方法。find() 是一種 ES6 方法。這個方法的工作原理類似於 forEach() 迴圈，訪問物件內部的元素與我們之前看到的類似。

在你的程式碼中用 find 替換 forEach，你就可以開始了。下面的程式碼還將列印陣列中的每個物件。

arrayofObjects.find(object =>{
    console.log(object);
});

輸出：

Object { name: "Adam", profession: "Engineer", company: "Google" }
Object { name: "Sam", profession: "Manager", company: "Amazon" }
Object { name: "Gerogia", profession: "Designer", company: "Netflix" }
Object { name: "Kate", profession: "Engineer", company: "Microsoft" }
Object { name: "James", profession: "Sales", company: "Amazon" }

同樣，我們也可以使用它們各自的鍵訪問陣列中物件的每個值，如下所示。

arrayofObjects.find(object =>{
    console.log(object.name + " is " + object.profession +" who works at " + object.company);
});

輸出：

Adam is Engineer who works at Google
Sam is Manager who works at Amazon
Georgia is Designer who works at Netflix
Kate is Engineer who works at Microsoft
James is Sales who works at Amazon

Author: Sahil Bhosale

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

在 JavaScript 中從陣列中搜尋物件

在 JavaScript 中使用 `forEach()` 在陣列中搜尋物件

使用 JavaScript 中的 `find()` 方法在陣列中搜尋物件

相關文章 - JavaScript Object

相關文章 - JavaScript Array

在 JavaScript 中使用 forEach() 在陣列中搜尋物件

使用 JavaScript 中的 find() 方法在陣列中搜尋物件

相關文章 - JavaScript Object

相關文章 - JavaScript Array

在 JavaScript 中使用 `forEach()` 在陣列中搜尋物件

使用 JavaScript 中的 `find()` 方法在陣列中搜尋物件