数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中访问对象数组的属性？
在本教程中，我们将学习如何在 JavaScript 中访问对象数组的属性。
JavaScript 基于基本的面向对象范式。属性的集合是一个对象，属性是名称（或键）和值之间的关系。属性的值可以是函数，在这种情况下，该属性称为方法。
JavaScript 对象与属性相关联。可以将对象的属性视为与对象关联的变量。除了附加到对象之外，对象属性与常规 JavaScript 变量相同。对象的属性定义了事物的特性。
属性访问器使用点或括号表示法来访问对象的属性。在讨论对象的属性时，通常区分属性和方法。另一方面，属性/方法的区别只是一种约定。方法是可以通过调用它来访问的属性。方法与其所属的对象无关。特别是，这在技术上没有固定。换句话说，这并不总是对应于具有方法的对象。相反，函数调用“传递”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>
使用方括号表示法
“propertyName”语法在 object[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+ 次查看
