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 thuộc tính đối tượng trong JavaScript theo 3 cách: trình truy cập thuộc tính dấu chấm, trình truy cập thuộc tính dấu ngoặc vuông hoặc cấu trúc đối tượng.

Bạn đang xem : js lấy các thuộc tính của đố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

prop-3 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'] 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'] 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

;

biểu thức đầu tiên phải đánh giá thành một tên thuộc tính và định danh phải chỉ ra tên biến được tạo sau khi cấu trúc. Biểu thức thứ hai sẽ đánh giá đối tượng mà bạn muốn cấu trúc lại.

Đâ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ấu trúc đối tượng:

const

{[

thuộc tính

]:

tên

} =

anh hùng

;

tên

;

// = & gt; 'Người dơi'

const {[property]: name} = hero là một cấu trúc hủy đối tượng tự động, trong thời gian chạy, xác định thuộc tính nào cần trích xuất.

4. Khi thuộc tính không tồn tại

Nếu thuộc tính được truy cập không tồn tại, cả 3 cú pháp của trình truy cập sẽ đánh giá thành undefined :

 

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

Thuộc tính name không tồn tại trong đối tượng hero . Do đó, trình truy cập thuộc tính dấu chấm hero.name , trình truy cập thuộc tính dấu ngoặc vuông hero ['name'] và biến name sau khi cấu trúc lại đánh giá thành không xác định .

5. Kết luận

JavaScript cung cấp nhiều cách hay để truy cập các thuộc tính của đối tượng.

Cú pháp của trình truy cập thuộc tính dấu chấm object.property hoạt động hiệu quả khi bạn biết trước biến.

Khi tên thuộc tính là động hoặc không phải là giá trị nhận dạng hợp lệ, thì giải pháp thay thế tốt hơn là trình truy cập thuộc tính dấu ngoặc vuông: object [propertyName] .

Cấu trúc hủy đối tượng trích xuất thuộc tính trực tiếp vào một biến: {property} = object . Hơn nữa, bạn có thể trích xuất các tên thuộc tính động (được xác định trong thời gian chạy): {[thích hợptName]: biến} = object .

Không có cách nào tốt hoặc không tốt để truy cập thuộc tính. Chọn tùy thuộc vào tình huống cụ thể của bạn.


Xem thêm những thông tin liên quan đến chủ đề js lấy thuộc tính đối tượng

Đối tượng trong Javascript

  • Tác giả: Thầy Long Web
  • Ngày đăng: 2022-03-25
  • Đánh giá: 4 ⭐ ( 1349 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo đối tượng trong Javascript và sử dụng các đối tượng có sẵn trong javascript
    Link: https://longnv.name.vn/lap-trinh-javascript/lap-trinh-doi-tuong-trong-javascript-va-mo-hinh-bom

Cách lặp qua các thuộc tính đối tượng trong JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 4070 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Đối tượng Document trong JavaScript

  • Tác giả: viettuts.vn
  • Đánh giá: 5 ⭐ ( 3995 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng document trong JavaScript đại diện cho toàn bộ tài liệu HTML. Khi tài liệu html được tải trong trình duyệt, nó sẽ trở thành một đối tượng document

Thuộc tính của đối tượng trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 5466 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính của đối tượng trong JavaScript - Lập Trình Từ Đầu 2 Đối Tượng Trong JavaScript

Đối tượng (Object) trong Javascript?

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 7225 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Như các bạn đã biết, Javascript có 5 kiểu dữ liệu Number, String, Boolean, Undefined và Null và còn 1 kiểu khác nữa đó là Object (kiểu dữ liệu phức hợp). Kiểu Object là kiểu được sử dụng nhiều nhất...

Thuộc tính và phương thức của đối tượng JavaScript String - Minh Hoàng Blog

  • Tác giả: minhhn.com
  • Đánh giá: 3 ⭐ ( 4223 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 10: Đối tượng trong Javascript – Object – JSON

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 4282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài học này, chúng ta sẽ tìm hiểu về đối tượng trong Javascript. Ngoài ra, chúng ta cũng tìm hiểu một chút về JSON - JavaScript Object Notation.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  SFP Coin là gì? SFP Token là gì? Đánh giá SFP Coin - đồng sfp