Hãy xem mỗi 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 thì hợp lý, tùy trường hợp mà dùng cách này hay cách khác
Mục lục
1. Trình 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 truy cập thuộc tính dấu chấm
javascript
expression.identifier
7 nên đánh giá một đối tượng vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
8 là tên của thuộc tính bạn muốn truy cậpjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Ví dụ: hãy truy cập thuộc tính
9 của đối tượngjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
0javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
1 là một trình truy cập thuộc tính dấu chấm đọc thuộc tínhjavascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
9 của đối tượngjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
0javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
Bạn có thể sử dụng trình truy cập thuộc tính dấu chấm trong chuỗi để truy cập các thuộc tính sâu hơn.
4javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
Chọn trình truy cập thuộc tính dấu chấm khi biết trước tên thuộc tính
1. Trình truy cập thuộc tính 1 dấu chấm yêu cầu số nhận dạng
Trình 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à một mã định danh hợp lệ. Mã định danh trong JavaScript chứa các chữ cái Unicode,
5,javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
6 và chữ sốjavascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
7, nhưng không thể bắt đầu bằng chữ sốjavascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
Đây không phải là vấn đề, vì thông thường, tên thuộc tính là số nhận dạng hợp lệ. e. g. ________ 19, ________ 49, ________ 150, ________ 151
Nhưng đôi khi thuộc tính không phải là định danh hợp lệ
javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
Bởi vì
52 vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
53 là các định danh không hợp lệ, trình truy cập thuộc tính dấu chấm không hoạt độngjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
54 đánh giá thànhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
55, thay vìjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
56 dự kiếnjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
57 ném mộtjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
58javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Tại sao biểu thức
54 đánh giá thànhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
55?javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Để truy cập các thuộc tính có các tên đặc biệt này, hãy sử dụng trình truy cập thuộc tính dấu ngoặc vuông [được mô tả trong phần tiếp theo]
5javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Cú pháp dấu ngoặc vuông truy cập dễ dàng các thuộc tính có tên đặc biệt.
81 vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
82javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
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
8javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
7 đầu tiên sẽ đánh giá một đối tượng vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
7 thứ hai sẽ đánh giá một chuỗi biểu thị tên thuộc tínhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Đây là một ví dụ
3javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
85 vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
86 đều đọc thuộc tínhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
9 bằng cách sử dụng cú pháp dấu ngoặc vuôngjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Chọn trình truy cập thuộc tính dấu ngoặc vuông khi tên thuộc tính động, tôi. e. được xác định trong thời gian chạy
3. phá hủy đối tượng
Cú pháp hủy đối tượng cơ bản khá đơn giản
7javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
8 là tên của thuộc tính để truy cập vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
7 sẽ đánh giá một đối tượng. Sau khi phá hủy, biếnjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
8 chứa giá trị thuộc tínhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Đây là một ví dụ
1javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
31 là một đối tượng phá hủy. Việc phá hủy xác định một biếnjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
9 với giá trị của thuộc tínhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
9javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Khi bạn đã quen với việc phá hủy đố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 đối tượng hủy 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
5javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
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
6javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
8 là tên của thuộc tính để truy cập,javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
35 là tên biến vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
7 sẽ ước tính cho một đối tượng. Sau khi phá hủy, biếnjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
35 chứa giá trị thuộc tínhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Đây là một ví dụ
0javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
38 là một đối tượng phá hủy. Việc hủy cấu trúc xác định một biến mớijavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
39 [thay vìjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
9 như trong ví dụ trước] và gán chojavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
39 giá trịjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
1javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
3. 2 Tên thuộc tính động
Điều làm cho việc phá hủy đối tượng trở nên hữu ích hơn nữa là bạn có thể trích xuất các thuộc tính biến với giá trị động
1javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
7 đầu tiên sẽ đánh giá một tên thuộc tính vàjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
8 sẽ chỉ ra tên biến được tạo sau khi phá hủy.javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
7 thứ hai sẽ đánh giá đối tượng bạn muốn hủy cấu trúcjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Đây là một ví dụ
2javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
76 là một đối tượng phá hủy động, trong thời gian chạy, xác định thuộc tính nào sẽ trích xuấtjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
4. Khi tài sản 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 đều có giá trị là
77javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
3javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Thuộc tính
9 không tồn tại trong đối tượngjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
0. Do đó, trình truy cập thuộc tính dấu chấmjavascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
1, trình truy cập thuộc tính dấu ngoặc vuôngjavascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
85 và biếnjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
9 sau khi phá hủy đánh giá thànhjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
77javascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
5. Phần 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 truy cập thuộc tính dấu chấm
4 hoạt động độc đáo khi bạn biết trước biếnjavascript
const hero = {
name: 'Batman'
};
// Dot property accessor
hero.name; // => 'Batman'
Khi tên thuộc tính là động hoặc không phải là mã định danh hợp lệ, một 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.
15javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
Việc phá hủy đối tượng trích xuất thuộc tính trực tiếp vào một biến.
16. 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 khi chạy].javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
17javascript
const weirdObject = {
'prop-3': 'three',
'3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3; // throws SyntaxError: Unexpected number
Không có cách tốt hay xấu để truy cập tài sản. Chọn tùy thuộc vào tình huống cụ thể của bạn
Thích bài viết?
đề xuất cải tiến
Bài đăng chất lượng vào hộp thư đến của bạn
Tôi thường xuyên xuất bản bài viết có chứa
- Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
- Tổng quan về các tính năng JavaScript mới
- Cách sử dụng TypeScript và cách gõ
- Thiết kế phần mềm và thực hành mã hóa tốt
Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn
Đặt muaTham gia cùng 6719 người đăng ký khác
Giới thiệu về Dmitri Pavlutin
Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm [nhưng không giới hạn] uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉