数据结构
网络
关系数据库管理系统 (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+ 次浏览
