3 cách để truy cập thuộc tính đối tượng trong JavaScript – js lấy thuộc tính đối tượng

Bạn có thể truy cập các thuộc tính của một đối tượng trong JavaScript theo 3 cách:

1. Trình truy cập thuộc tính dấu chấm: object.property
2. Quyền truy cập thuộc tính dấu ngoặc vuông: object ['property']
3. Cấu trúc đối tượng: const {property} = object

Hãy xem từng cú pháp để truy cập các thuộc tính hoạt động như thế nào. Và hiểu khi nào là hợp lý, tùy theo tình huống mà sử dụng cách này hay cách khác.

1. Công cụ truy cập thuộc tính dấu chấm

Một cách phổ biến để truy cập thuộc tính của một đối tượng là cú pháp của trình truy cập thuộc tính dấu chấm:

 
 javascript 
  
 
 biểu thức 
 
. < / p> 
 số nhận dạng 
 
  

biểu thức phải đánh giá thành một đối tượng và mã định danh là tên của thuộc tính bạn muốn truy cập.

Ví dụ: hãy truy cập thuộc tính name của đối tượng hero :

 
 javascript 
  
 
 const 
 
 < / p> 
 anh hùng 
 
 = {
 
 
 
 
 
 tên: 
 < p> 
 
 'Người dơi' 
 
 
 
}; 
 
 
 
 
 
 // Công cụ truy cập thuộc tính dấu chấm 
 
 
 
 anh hùng 
 
. 
 
 tên 
 
; 
 
 // = & gt; 'Người dơi' 
 
  

hero.name là công cụ truy cập thuộc tính dấu chấm đọc thuộc tính name của đối tượng hero .

Bạn có thể sử dụng công cụ truy cập thuộc tính dấu chấm trong một chuỗi để truy cập các thuộc tính sâu hơn: object.prop1.prop2 .

Chọn công cụ truy cập thuộc tính dấu chấm khi tên thuộc tính được biết trước.

1.1 Công cụ truy cập thuộc tính dot yêu cầu số nhận dạng

Công cụ truy cập thuộc tính dấu chấm hoạt động chính xác khi tên thuộc tính là giá trị nhận dạng hợp lệ. Mã định danh trong JavaScript chứa các chữ cái Unicode, $ , _ và các chữ số 0..9 , nhưng không được bắt đầu bằng chữ số.

Đây không phải là vấn đề, bởi vì thông thường, tên thuộc tính là số nhận dạng hợp lệ: ví dụ: name , address , street , createdBy .

Nhưng đôi khi các thuộc tính không phải là giá trị nhận dạng hợp lệ:

 
 javascript 
  
 
 const 
 
 < / p> 
 wonderObject 
 
 = {
 
 
 
 
 
 'prop-3'  
: 
 
 
 
 'ba' 
 
, 
 
 
 
 
 
 '3' 
 
: 
 
 
 
 'ba' 
 
 
 
}; 
 
 
 
 
 
 lạObject 
 
. < / p> 
 prop 
 
 - 
 
 3 
 
; 
 
 // = & gt; NaN 
 
 
 
 StrangeObject 
 
. 
 
 3 
 
; 
 
 // ném SyntaxError: Số không mong muốn 
 
  

Vì prop-3 và 3 là các số nhận dạng không hợp lệ, công cụ truy cập thuộc tính dấu chấm không hoạt động:

• StrangeObject.prop-3 đánh giá thành NaN , thay vì 'tree'
• StrangeObject.3 ném ra một SyntaxError !

Tại sao biểu thức StrangeObject.prop-3 lại đánh giá thành NaN ? Vui lòng viết câu trả lời của bạn trong một bình luận bên dưới!

Để truy cập các thuộc tính có các tên đặc biệt này, hãy sử dụng công cụ truy cập thuộc tính dấu ngoặc vuông (được mô tả trong phần tiếp theo):

 
 javascript 
  
 
 const 
 
 < / p> 
 wonderObject 
 
 = {
 
 
 
 
 
 'prop-3'  
: 
 
 
 
 'ba' 
 
, 
 
 
 
 
 
 '3' 
 
: 
 
 
 
 'ba' 
 
 
 
}; 
 
 
 
 
 
 lạObject 
 
 [< / p> 
 'prop-3' 
 
]; 
 
 // = & gt; 'ba' 
 
 
 
 virtualObject 
 
 [
 
 3 
 
]; 
 
 // = & gt; 'ba' 
 
  

Cú pháp trong dấu ngoặc vuông truy cập mà không gặp vấn đề gì với các thuộc tính có tên đặc biệt: monsterObject ['prop-3'] và monsterObject [3] .

2. Trình truy cập thuộc tính dấu ngoặc vuông

Trình truy cập thuộc tính dấu ngoặc vuông có cú pháp sau:

 
 javascript 
  
 
 biểu thức 
 
 [< / p> 
 biểu thức 
 
] 
 
  

biểu thức đầu tiên sẽ đánh giá thành một đối tượng và biểu thức thứ hai sẽ đánh giá thành một chuỗi biểu thị tên thuộc tính.

Đây là một ví dụ:

 
 javascript 
  
 
 const 
 
 < / p> 
 thuộc tính 
 
 = 
 
 'name' 
 
; 
 
 
 
 const 
 
 
 
 anh hùng 
 
 = {
 
 
 
  
 tên: 
 
 
 
 'Người dơi' 
 
 
 
}; 
 
 
 
 
 
 // Công cụ truy cập thuộc tính dấu ngoặc vuông: 
 
 
 
 anh hùng 
 
 [
 
 'tên' 
 
]; 
 
 // = & gt; 'Người dơi' 
 
 
 
 anh hùng 
 
 [
 
 tài sản 
 
]; 
 
 // = & gt; 'Người dơi' 
 
  

hero ['name'] và hero [property] đều đọc thuộc tính name bằng cách sử dụng cú pháp dấu ngoặc vuông.

Chọn trình truy cập thuộc tính dấu ngoặc vuông khi tên thuộc tính là động, tức là được xác định trong thời gian chạy.

3. Cấu trúc đối tượng

Cú pháp hủy cấu trúc đối tượng cơ bản khá đơn giản:

 
 javascript 
  
 
 const 
 
 {< / p> 
 mã định danh 
 
} = 
 
 biểu thức 
 
; 
 
  

mã định danh là tên của thuộc tính để truy cập và biểu thức sẽ đánh giá một đối tượng. Sau khi cấu trúc lại, biến số nhận dạng chứa giá trị thuộc tính.

Đây là một ví dụ:

 
 javascript 
  
 
 const 
 
 < / p> 
 anh hùng 
 
 = {
 
 
 
 
 
 tên: 
 < p> 
 
 'Người dơi' 
 
 
 
}; 
 
 
 
 
 
 // Cấu trúc đối tượng: 
 
 
 
 const 
 
 { 
 
 tên 
 
} = 
 
 anh hùng 
 
; 
 
 
 
 tên 
 
; 
 
 // = & gt; 'Người dơi' 
 
  

const {name} = hero là một cấu trúc hủy đối tượng. Cấu trúc hủy xác định một biến name với giá trị của thuộc tính name .

Khi bạn đã quen với việc tái cấu trúc đối tượng, bạn sẽ thấy rằng cú pháp của nó là một cách tuyệt vời để trích xuất các thuộc tính thành các biến.

Chọn cấu trúc đối tượng khi bạn muốn tạo một biến có giá trị thuộc tính.

Lưu ý rằng bạn có thể trích xuất bao nhiêu thuộc tính tùy thích:

 
 javascript 
  
 
 const 
 
 {< / p> 
 số nhận dạng1 
 
, 
 
 số nhận dạng2 
 
, .., 
 
 số nhận dạngN 
 
} = 
 
 biểu thức 
 
; 
 
  

3.1 Biến bí danh

Nếu bạn muốn truy cập thuộc tính, nhưng tạo một tên biến khác với tên thuộc tính, bạn có thể sử dụng bí danh.

 
 javascript 
  
 
 const 
 
 {< / p> 
 mã định danh 
 
: 
 
 mã định danh 
 
} = 
 
 biểu thức 
 
;  
  

mã định danh là tên của thuộc tính cần truy cập, aliasIdentifier là tên biến và biểu thức phải đánh giá thành một đối tượng. Sau khi cấu trúc lại, biến aliasIdentifier chứa giá trị thuộc tính.

Đây là một ví dụ:

 
 javascript 
  
 
 const 
 
 < / p> 
 anh hùng 
 
 = {
 
 
 
 
 
 tên: 
 < p> 
 
 'Người dơi' 
 
 
 
}; 
 
 
 
 
 
 // Cấu trúc đối tượng: 
 
 
 
 const 
 
 { 
 
 tên 
 
: 
 
 heroName 
 
} = 
 
 anh hùng 
 
; < / p> 
 
 
 heroName 
 
; 
 
 // = & gt; 'Người dơi' 
 
  

const {name: heroName} = hero là một cấu trúc hủy đối tượng. Hàm hủy xác định một biến mới heroName (thay vì name như trong ví dụ trước) và gán cho heroName giá trị hero.name .

3.2 Tên thuộc tính động

Điều làm cho việc tái cấu trúc đối tượng hữu ích hơn nữa là bạn có thể trích xuất thành các thuộc tính biến với giá trị động:

 javascript 
  
 
 const 
 
 {[
 
 biểu thức  
]: 
 
 mã định danh 
 
} = 
 
 biểu thức 
 
; 
 
  

 
 javascript 
  
 
 const 
 
 < / p> 
 thuộc tính 
 
 = 
 
 'name' 
 
; 
 
 
 
 const 
 
 
 
 anh hùng 
 
 = {
 
 
 
  
 tên: 
 
 
 
 'Người dơi' 
 
 
 
}; 
 
 
 
 
 
 // Cấu trúc đối tượng: 
 
 
 
 const 
 
 {[
 
 thuộc tính 
 
]: 
 
 tên 
 
} =  
 anh hùng 
 
; 
 
 
 
 tên 
 
; 
 
 // = & gt; 'Người dơi' 
 
  

 
 javascript 
  
 
 const 
 
  
 anh hùng 
 
 = {
 
 
 
 
 
 characterName: 
 
 
 
 'Người dơi' 
 
 
 
}; 
 
 
  
 
 anh hùng 
 
. 
 
 tên 
 
; 
 
 // = & gt; không xác định 
 
 
 
 anh hùng 
 
 [
 
 'tên' 
 
]; 
 
 // = & gt; không xác định 
 
 
 
 const 
 
 {
 
 tên 
 
} = 
 
 anh hùng 
 
; 
 
 
 
 tên 
 
; 
 
 // = & gt; không xác định