資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 JavaScript 中訪問物件陣列的屬性？
在本教程中，我們將學習如何在 JavaScript 中訪問物件陣列的屬性。
JavaScript 基於基本的面向物件正規化。屬性的集合是一個物件，屬性是名稱（或鍵）和值之間的關係。屬性的值可以是一個函式，在這種情況下，該屬性被稱為方法。
JavaScript 物件與屬性相關聯。物件的屬性可以被認為是與物件關聯的變數。除了附加到物件之外，物件屬性與普通的 JavaScript 變數相同。物件的屬性定義了事物的特性。
屬性訪問器使用點或方括號表示法來訪問物件的屬性。在討論物件的屬性時，通常區分屬性和方法。然而，屬性/方法的區別只是一個約定。方法是可以透過呼叫它來訪問的屬性。方法並不繫結到它是方法的物件。特別是，這在方法中沒有固定。換句話說，this並不總是對應於具有方法的物件。相反，函式呼叫“傳遞”this。
以下是訪問 JavaScript 中物件陣列屬性的方法。
使用點表示法
在 "object.property" 語法中，屬性必須是有效的 JavaScript 識別符號。表示式應返回一個物件，識別符號是要訪問的屬性的名稱。在一個鏈中，您可以使用點屬性訪問器來訪問更深的屬性，例如 (object.prop1.prop2)。當屬性名稱預先知道時，應使用點屬性訪問器。當屬性名稱是有效識別符號時，點屬性訪問器可以正常工作。
語法
var name = myBook.title;
使用點屬性訪問器訪問 myBook 物件中的標題。
示例
在這個例子中，我們建立了一個名為 book 的函式，它接收一些引數作為輸入。引數的值傳遞到函式中。使用點表示法訪問物件的屬性。
<html> <head> <script> function book(title, author, price, publisher, isbn) { this.title = title; this.author = author; this.price = price; this.publisher = publisher; this.isbn = isbn; } </script> </head> <body> <h3>Access properties of an array of objects using dot property accessor</h3> <p id="root"></p> <script> let root = document.getElementById("root"); var myBook = new book("Chronicles of Economics", "Anirban Maity", "399", "Geetam Publishers", "Q123D8"); book.prototype.price = null; root.innerHTML = "Book title is : " + myBook.title + "<br>"; root.innerHTML += "Book author is : " + myBook.author + "<br>"; root.innerHTML += "Book price is : " + myBook.price + "<br>"; root.innerHTML += "Book Publisher is : " + myBook.publisher + "<br>"; root.innerHTML += "Book ISBN is : " + myBook.isbn + "<br>"; </script> </body> </html>
使用方括號表示法
在 object[propertyName] 語法中，'propertyName' 語法只是一個字串或 Symbol。所以它可以是任何字串，例如 '1foo'、'!bar!'，甚至 ' (空格)。字串和 Symbol 是兩種型別的屬性名稱。任何其他值，即使是數字，也會強制轉換為字串。因為 1 被強制轉換為 '1'，所以這會產生 'value'。當屬性名稱是動態的，即在執行時確定時，使用方括號屬性訪問器。
語法
var name = myBook['title'];
使用方括號屬性訪問器訪問 myBook 物件中的標題。
示例
在這個例子中，我們建立了一個名為 book 的函式，它接收一些引數作為輸入。引數的值傳遞到函式中。使用方括號表示法訪問物件的屬性。
<html> <head> <script> function book(title, author, price, publisher, isbn){ this.title = title; this.author = author; this.price = price; this.publisher = publisher; this.isbn = isbn; } </script> </head> <body> <h3>Access properties of an array of objects using <i>square brackets </i> property accessor </h3> <p id = "root"></p> <script> let root = document.getElementById("root"); var myBook = new book("Day in the life of a National Swimmer", "Amitanshu Maity", "768", "Honey Well Publishers", "245F67"); root.innerHTML = "Book title is : "+myBook['title'] + "<br>"; root.innerHTML += "Book author is : "+myBook['author'] + "<br>"; root.innerHTML += "Book price is : "+myBook['price'] + "<br>"; root.innerHTML += "Book Publisher is : "+myBook['publisher'] + "<br>"; root.innerHTML += "Book ISBN is : "+myBook['isbn'] + "<br>"; </script> </body> </html>
使用物件解構
識別符號是要訪問的屬性的名稱，表示式必須返回一個物件。解構後，變數識別符號現在包含屬性值。
物件解構是 (const {title} = book)。解構指定一個變數名，其值為屬性名的值。
它的語法是一種極好的方法，可以在物件解構中將屬性提取到變數中，當您想使用屬性值建立一個變數時，使用物件解構。
語法
const { title } = book;
book 物件被解構，並訪問標題。
示例
在這個例子中，建立了一個帶有某些引數的函式表示式。物件的引數被解構並存儲在特定變數中。常量變數儲存屬性的值，並在輸出中訪問。
<html> <body> <h3>Access properties of an array of objects using <i>object destructuring</i></h3> <p id="root"></p> <script> let root = document.getElementById("root"); const book = { title: 'Let Us JavaScript', author: 'Neelanshu R', price: '456', publisher: 'Trinity Publishers', isbn: 'F624RT', }; const { title } = book; const { author } = book; const { price } = book; const { publisher } = book; const { isbn } = book; root.innerHTML = "Book title is : "+title + "<br>"; root.innerHTML += "Book author is : "+author + "<br>"; root.innerHTML += "Book price is : "+price + "<br>"; root.innerHTML += "Book Publisher is : "+publisher+ "<br>"; root.innerHTML += "Book ISBN is : "+isbn + "<br>"; </script> </body> </html>
在本教程中，我們學習了訪問 JavaScript 中物件陣列屬性的不同方法。
5K+ 次瀏覽
