Trong hướng dẫn về kiểu dữ liệu JavaScript, bạn đã học về 7 kiểu dữ liệu nguyên thủy khác nhau. Và ở đây, bạn sẽ tìm hiểu về kiểu dữ liệu thứ tám [đối tượng JavaScript]
Đối tượng JavaScript là kiểu dữ liệu không nguyên thủy cho phép bạn lưu trữ nhiều bộ sưu tập dữ liệu
Ghi chú. Nếu bạn đã quen thuộc với các ngôn ngữ lập trình khác, các đối tượng JavaScript sẽ khác một chút. Bạn không cần phải tạo các lớp để tạo các đối tượng
Đây là một ví dụ về một đối tượng JavaScript
// object
const student = {
firstName: 'ram',
class: 10
};
Ở đây,
const object_name = {
key1: value1,
key2: value2
}
1 là một đối tượng lưu trữ các giá trị như chuỗi và sốKhai báo đối tượng JavaScript
Cú pháp để khai báo một đối tượng là
const object_name = {
key1: value1,
key2: value2
}
Ở đây, một đối tượng
const object_name = {
key1: value1,
key2: value2
}
2 được xác định. Mỗi thành viên của một đối tượng là một khóa. cặp giá trị được phân tách bằng dấu phẩy và được đặt trong dấu ngoặc nhọn const object_name = {
key1: value1,
key2: value2
}
3Ví dụ,
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
Bạn cũng có thể định nghĩa một đối tượng trong một dòng
const person = { name: 'John', age: 20 };
Trong ví dụ trên,
const object_name = {
key1: value1,
key2: value2
}
4 và const object_name = {
key1: value1,
key2: value2
}
5 là các khóa và const object_name = {
key1: value1,
key2: value2
}
6 và const object_name = {
key1: value1,
key2: value2
}
7 lần lượt là các giá trịCó nhiều cách khác để khai báo một đối tượng trong JavaScript. Để tìm hiểu thêm, hãy truy cập Các cách khác nhau để khai báo các đối tượng JavaScript
Thuộc tính đối tượng JavaScript
Trong JavaScript, "chìa khóa. value" được gọi là thuộc tính. Ví dụ,
const object_name = {
key1: value1,
key2: value2
}
1Ở đây,
const object_name = {
key1: value1,
key2: value2
}
8 và const object_name = {
key1: value1,
key2: value2
}
9 là các thuộc tínhTruy cập thuộc tính đối tượng
Bạn có thể truy cập giá trị của một thuộc tính bằng cách sử dụng khóa của nó
1. Sử dụng ký hiệu dấu chấm
Đây là cú pháp của ký hiệu dấu chấm
const object_name = {
key1: value1,
key2: value2
}
4Ví dụ,
const object_name = {
key1: value1,
key2: value2
}
52. Sử dụng Ký hiệu ngoặc
Đây là cú pháp của ký hiệu ngoặc
const object_name = {
key1: value1,
key2: value2
}
6Ví dụ,
const object_name = {
key1: value1,
key2: value2
}
7Các đối tượng lồng nhau trong JavaScript
Một đối tượng cũng có thể chứa một đối tượng khác. Ví dụ,
const object_name = {
key1: value1,
key2: value2
}
8Trong ví dụ trên, một đối tượng
const object_name = {
key1: value1,
key2: value2
}
1 chứa một giá trị đối tượng trong thuộc tính // object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
1Phương thức đối tượng JavaScript
Trong JavaScript, một đối tượng cũng có thể chứa một hàm. Ví dụ,
const object_name = {
key1: value1,
key2: value2
}
0Ở đây, một hàm được sử dụng làm giá trị cho phím chào. Đó là lý do tại sao chúng ta cần sử dụng
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
2 thay vì // object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
3 để gọi hàm bên trong đối tượngPhương thức JavaScript là thuộc tính chứa khai báo hàm. Trong hướng dẫn tiếp theo, bạn sẽ tìm hiểu chi tiết về Phương thức JavaScript
Phương thức
const object_name = {
key1: value1,
key2: value2
}
42 trả về một mảng gồm các cặp khóa/giá trị của đối tượng đã cho. Vòng lặp const object_name = {
key1: value1,
key2: value2
}
43 được sử dụng để lặp qua một mảng Như chúng ta đã biết từ chương Kiểu dữ liệu, có tám kiểu dữ liệu trong JavaScript. Bảy trong số chúng được gọi là "nguyên thủy", bởi vì giá trị của chúng chỉ chứa một thứ duy nhất [có thể là một chuỗi hoặc một số hoặc bất cứ thứ gì]
Ngược lại, các đối tượng được sử dụng để lưu trữ các bộ sưu tập có khóa gồm nhiều dữ liệu khác nhau và các thực thể phức tạp hơn. Trong JavaScript, các đối tượng thâm nhập vào hầu hết mọi khía cạnh của ngôn ngữ. Vì vậy, chúng ta phải hiểu chúng trước khi đi sâu vào bất cứ nơi nào khác
Một đối tượng có thể được tạo bằng dấu ngoặc nhọn
const object_name = {
key1: value1,
key2: value2
}
62 với danh sách thuộc tính tùy chọn. Thuộc tính là “chìa khóa. value”, trong đó const object_name = {
key1: value1,
key2: value2
}
63 là một chuỗi [còn được gọi là “tên thuộc tính”] và const object_name = {
key1: value1,
key2: value2
}
64 có thể là bất kỳ thứ gìChúng ta có thể tưởng tượng một đối tượng như một chiếc tủ chứa các tệp đã ký. Mỗi phần dữ liệu được lưu trữ trong tệp của nó bằng khóa. Thật dễ dàng để tìm một tệp theo tên của nó hoặc thêm/xóa tệp
Một đối tượng trống [“tủ trống”] có thể được tạo bằng một trong hai cú pháp
const object_name = {
key1: value1,
key2: value2
}
9Thông thường, các dấu ngoặc đơn
const object_name = {
key1: value1,
key2: value2
}
65 được sử dụng. Tuyên bố đó được gọi là một đối tượng theo nghĩa đenChúng ta có thể ngay lập tức đặt một số thuộc tính vào
const object_name = {
key1: value1,
key2: value2
}
65 dưới dạng “key. cặp giá trịconst object_name = {
key1: value1,
key2: value2
}
2Một thuộc tính có một khóa [còn được gọi là “tên” hoặc “mã định danh”] trước dấu hai chấm
const object_name = {
key1: value1,
key2: value2
}
67 và một giá trị ở bên phải của nóTrong đối tượng
const object_name = {
key1: value1,
key2: value2
}
68, có hai thuộc tính- Thuộc tính đầu tiên có tên
69 và giá trịconst object_name = { key1: value1, key2: value2 }
60const object_name = { key1: value1, key2: value2 }
- Cái thứ hai có tên
61 và giá trịconst object_name = { key1: value1, key2: value2 }
62const object_name = { key1: value1, key2: value2 }
Đối tượng
const object_name = {
key1: value1,
key2: value2
}
68 kết quả có thể được tưởng tượng như một chiếc tủ có hai tệp được ký có nhãn “tên” và “tuổi”Chúng tôi có thể thêm, xóa và đọc các tệp từ nó bất cứ lúc nào
Giá trị thuộc tính có thể truy cập được bằng cách sử dụng ký hiệu dấu chấm
const object_name = {
key1: value1,
key2: value2
}
0Giá trị có thể thuộc bất kỳ loại nào. Hãy thêm một boolean
const object_name = {
key1: value1,
key2: value2
}
6Để xóa một thuộc tính, chúng ta có thể sử dụng toán tử
const object_name = {
key1: value1,
key2: value2
}
64const object_name = {
key1: value1,
key2: value2
}
6Chúng tôi cũng có thể sử dụng tên thuộc tính nhiều từ, nhưng sau đó chúng phải được trích dẫn
const object_name = {
key1: value1,
key2: value2
}
4Thuộc tính cuối cùng trong danh sách có thể kết thúc bằng dấu phẩy
const object_name = {
key1: value1,
key2: value2
}
5Đó được gọi là dấu phẩy “dấu” hoặc “treo”. Làm cho việc thêm/xóa/di chuyển xung quanh các thuộc tính trở nên dễ dàng hơn vì tất cả các dòng đều giống nhau
Đối với thuộc tính nhiều từ, quyền truy cập dấu chấm không hoạt động
const object_name = {
key1: value1,
key2: value2
}
6JavaScript không hiểu điều đó. Nó nghĩ rằng chúng tôi giải quyết
const object_name = {
key1: value1,
key2: value2
}
65 và sau đó đưa ra lỗi cú pháp khi gặp phải const object_name = {
key1: value1,
key2: value2
}
66 không mong muốnDấu chấm yêu cầu khóa phải là mã định danh biến hợp lệ. Điều đó ngụ ý. không chứa khoảng trắng, không bắt đầu bằng một chữ số và không bao gồm các ký tự đặc biệt [cho phép ____367 và ____368]
Có một "ký hiệu dấu ngoặc vuông" thay thế hoạt động với bất kỳ chuỗi nào
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
1Bây giờ mọi thứ đều ổn. Xin lưu ý rằng chuỗi bên trong dấu ngoặc được trích dẫn chính xác [bất kỳ loại trích dẫn nào cũng được]
Dấu ngoặc vuông cũng cung cấp một cách để lấy tên thuộc tính là kết quả của bất kỳ biểu thức nào – trái ngược với một chuỗi ký tự – như từ một biến như sau
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
2Ở đây, biến
const object_name = {
key1: value1,
key2: value2
}
63 có thể được tính toán trong thời gian chạy hoặc phụ thuộc vào đầu vào của người dùng. Và sau đó chúng tôi sử dụng nó để truy cập tài sản. Điều đó mang lại cho chúng tôi rất nhiều sự linh hoạtVí dụ
const object_name = {
key1: value1,
key2: value2
}
20Ký hiệu dấu chấm không thể được sử dụng theo cách tương tự
const object_name = {
key1: value1,
key2: value2
}
21Chúng ta có thể sử dụng dấu ngoặc vuông trong một đối tượng bằng chữ, khi tạo một đối tượng. Đó được gọi là thuộc tính được tính toán
Ví dụ
const object_name = {
key1: value1,
key2: value2
}
22Ý nghĩa của một thuộc tính được tính toán rất đơn giản.
const object_name = {
key1: value1,
key2: value2
}
40 có nghĩa là tên tài sản nên được lấy từ const object_name = {
key1: value1,
key2: value2
}
41Vì vậy, nếu một khách truy cập vào
const object_name = {
key1: value1,
key2: value2
}
42, thì const object_name = {
key1: value1,
key2: value2
}
43 sẽ trở thành const object_name = {
key1: value1,
key2: value2
}
44Về cơ bản, nó hoạt động giống như
const object_name = {
key1: value1,
key2: value2
}
23…Nhưng trông đẹp hơn
Chúng ta có thể sử dụng các biểu thức phức tạp hơn bên trong dấu ngoặc vuông
const object_name = {
key1: value1,
key2: value2
}
24Dấu ngoặc vuông mạnh hơn nhiều so với ký hiệu dấu chấm. Họ cho phép mọi tên thuộc tính và biến. Nhưng chúng cũng rườm rà hơn để viết
Vì vậy, hầu hết thời gian, khi tên thuộc tính được biết và đơn giản, dấu chấm được sử dụng. Và nếu chúng ta cần một cái gì đó phức tạp hơn, thì chúng ta chuyển sang dấu ngoặc vuông
Trong mã thực, chúng tôi thường sử dụng các biến hiện có làm giá trị cho tên thuộc tính
Ví dụ
const object_name = {
key1: value1,
key2: value2
}
25Trong ví dụ trên, các thuộc tính có cùng tên với các biến. Trường hợp sử dụng để tạo một thuộc tính từ một biến phổ biến đến mức có một cách viết tắt giá trị thuộc tính đặc biệt để làm cho nó ngắn hơn
Thay vì
const object_name = {
key1: value1,
key2: value2
}
45, chúng ta chỉ có thể viết const object_name = {
key1: value1,
key2: value2
}
46, như thế nàyconst object_name = {
key1: value1,
key2: value2
}
26Chúng ta có thể sử dụng cả thuộc tính thông thường và tốc ký trong cùng một đối tượng
const object_name = {
key1: value1,
key2: value2
}
27Như chúng ta đã biết, một biến không thể có tên bằng một trong các từ dành riêng cho ngôn ngữ như “for”, “let”, “return” v.v.
Nhưng đối với một thuộc tính đối tượng, không có giới hạn nào như vậy
const object_name = {
key1: value1,
key2: value2
}
28Nói tóm lại, không có giới hạn về tên tài sản. Chúng có thể là bất kỳ chuỗi hoặc ký hiệu nào [một loại đặc biệt cho số nhận dạng, sẽ được đề cập sau]
Các loại khác được tự động chuyển đổi thành chuỗi
Chẳng hạn, một số
const object_name = {
key1: value1,
key2: value2
}
47 trở thành một chuỗi const object_name = {
key1: value1,
key2: value2
}
48 khi được sử dụng làm khóa thuộc tínhconst object_name = {
key1: value1,
key2: value2
}
29Có một vấn đề nhỏ với thuộc tính đặc biệt tên là
const object_name = {
key1: value1,
key2: value2
}
49. Chúng tôi không thể đặt nó thành một giá trị phi đối tượngconst object_name = {
key1: value1,
key2: value2
}
00Như chúng ta thấy từ mã, việc gán cho một
const object_name = {
key1: value1,
key2: value2
}
50 nguyên thủy bị bỏ quaChúng tôi sẽ đề cập đến bản chất đặc biệt của
const object_name = {
key1: value1,
key2: value2
}
49 trong các chương tiếp theo và đề xuất các cách khắc phục hành vi đóMột tính năng đáng chú ý của các đối tượng trong JavaScript, so với nhiều ngôn ngữ khác, là có thể truy cập bất kỳ thuộc tính nào. Sẽ không có lỗi nếu thuộc tính không tồn tại
Đọc thuộc tính không tồn tại chỉ trả về
const object_name = {
key1: value1,
key2: value2
}
52. Vì vậy, chúng tôi có thể dễ dàng kiểm tra xem thuộc tính có tồn tại hay khôngconst object_name = {
key1: value1,
key2: value2
}
01Ngoài ra còn có một nhà điều hành đặc biệt
const object_name = {
key1: value1,
key2: value2
}
53 cho điều đóCú pháp là
const object_name = {
key1: value1,
key2: value2
}
02Ví dụ
const object_name = {
key1: value1,
key2: value2
}
03Xin lưu ý rằng ở phía bên trái của
const object_name = {
key1: value1,
key2: value2
}
54 phải có tên tài sản. Đó thường là một chuỗi trích dẫnNếu chúng ta bỏ qua dấu ngoặc kép, điều đó có nghĩa là một biến phải chứa tên thật cần kiểm tra. Ví dụ
const object_name = {
key1: value1,
key2: value2
}
04Tại sao toán tử
const object_name = {
key1: value1,
key2: value2
}
54 tồn tại? Chà, hầu hết thời gian so sánh với
const object_name = {
key1: value1,
key2: value2
}
52 hoạt động tốt. Nhưng có một trường hợp đặc biệt khi nó bị lỗi, nhưng const object_name = {
key1: value1,
key2: value2
}
53 vẫn hoạt động bình thườngĐó là khi một thuộc tính đối tượng tồn tại, nhưng lưu trữ
const object_name = {
key1: value1,
key2: value2
}
52const object_name = {
key1: value1,
key2: value2
}
05Trong đoạn mã trên, thuộc tính
const object_name = {
key1: value1,
key2: value2
}
60 tồn tại về mặt kỹ thuật. Vì vậy, toán tử const object_name = {
key1: value1,
key2: value2
}
54 hoạt động đúngNhững tình huống như thế này rất hiếm khi xảy ra, bởi vì
const object_name = {
key1: value1,
key2: value2
}
52 không nên được chỉ định một cách rõ ràng. Chúng tôi chủ yếu sử dụng const object_name = {
key1: value1,
key2: value2
}
63 cho các giá trị "không xác định" hoặc "trống". Vì vậy, toán tử const object_name = {
key1: value1,
key2: value2
}
54 là một vị khách kỳ lạ trong mãĐể duyệt qua tất cả các phím của một đối tượng, tồn tại một dạng vòng lặp đặc biệt.
const object_name = {
key1: value1,
key2: value2
}
65. Đây là một điều hoàn toàn khác với cấu trúc const object_name = {
key1: value1,
key2: value2
}
66 mà chúng ta đã nghiên cứu trước đâycú pháp
const object_name = {
key1: value1,
key2: value2
}
06Chẳng hạn, hãy xuất tất cả các thuộc tính của
const object_name = {
key1: value1,
key2: value2
}
68const object_name = {
key1: value1,
key2: value2
}
07Lưu ý rằng tất cả các cấu trúc “for” đều cho phép chúng ta khai báo biến vòng lặp bên trong vòng lặp, chẳng hạn như
const object_name = {
key1: value1,
key2: value2
}
68 ở đâyNgoài ra, chúng ta có thể sử dụng một tên biến khác ở đây thay vì
const object_name = {
key1: value1,
key2: value2
}
63. Chẳng hạn, // object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
10 cũng được sử dụng rộng rãiCác đối tượng có được sắp xếp không?
Câu trả lời ngắn gọn là. “đặt hàng theo cách đặc biệt”. các thuộc tính số nguyên được sắp xếp, các thuộc tính khác xuất hiện theo thứ tự tạo. các chi tiết sau
Ví dụ: hãy xem xét một đối tượng có mã điện thoại
const object_name = {
key1: value1,
key2: value2
}
08Đối tượng có thể được sử dụng để đề xuất danh sách các tùy chọn cho người dùng. Nếu chúng tôi đang tạo một trang web chủ yếu dành cho khán giả Đức thì có lẽ chúng tôi muốn
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
11 là trang đầu tiênNhưng nếu chúng tôi chạy mã, chúng tôi sẽ thấy một bức tranh hoàn toàn khác
- Hoa Kỳ [1] đi trước
- sau đó là Thụy Sĩ [41], v.v.
Mã điện thoại được sắp xếp theo thứ tự tăng dần vì chúng là số nguyên. Vì vậy, chúng tôi thấy
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
12Tính chất số nguyên?
Thuật ngữ “thuộc tính số nguyên” ở đây có nghĩa là một chuỗi có thể được chuyển đổi sang và từ một số nguyên mà không cần thay đổi
Vì vậy,
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
13 là một tên thuộc tính số nguyên, bởi vì khi nó được chuyển đổi thành một số nguyên và ngược lại, nó vẫn như vậy. Nhưng // object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
14 và // object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
15 thì khôngconst object_name = {
key1: value1,
key2: value2
}
09…Mặt khác, nếu các khóa không phải là số nguyên, thì chúng được liệt kê theo thứ tự tạo chẳng hạn
const object_name = {
key1: value1,
key2: value2
}
60Vì vậy, để khắc phục sự cố với mã điện thoại, chúng ta có thể “ăn gian” bằng cách làm cho mã không nguyên. Thêm dấu cộng
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
16 trước mỗi mã là đủNhư thế này
const object_name = {
key1: value1,
key2: value2
}
61Bây giờ nó hoạt động như dự định
Các đối tượng là các mảng kết hợp với một số tính năng đặc biệt
Chúng lưu trữ các thuộc tính [cặp khóa-giá trị], trong đó
- Khóa thuộc tính phải là chuỗi hoặc ký hiệu [thường là chuỗi]
- Các giá trị có thể thuộc bất kỳ loại nào
Để truy cập một thuộc tính, chúng ta có thể sử dụng
- Ký hiệu dấu chấm.
17// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
- Ký hiệu ngoặc vuông
18. Dấu ngoặc vuông cho phép lấy khóa từ một biến, như// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
19// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
Toán tử bổ sung
- Để xóa một thuộc tính.
20// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
- Để kiểm tra xem một thuộc tính với khóa đã cho có tồn tại không.
21// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
- Để lặp lại một đối tượng. vòng lặp
22// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
Những gì chúng ta đã nghiên cứu trong chương này được gọi là “đối tượng đơn giản”, hoặc chỉ
// object creation
const person = {
name: 'John',
age: 20
};
console.log[typeof person]; // object
23Có nhiều loại đối tượng khác trong JavaScript
24 để lưu trữ các bộ sưu tập dữ liệu đã đặt hàng,// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
25 để lưu trữ thông tin về ngày giờ,// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
26 để lưu trữ thông tin về lỗi// object creation const person = { name: 'John', age: 20 }; console.log[typeof person]; // object
- …Và như thế
Chúng có những tính năng đặc biệt nào mà chúng ta sẽ nghiên cứu sau. Đôi khi mọi người nói điều gì đó như "Kiểu mảng" hoặc "Kiểu ngày", nhưng về mặt hình thức, chúng không phải là kiểu của riêng chúng mà thuộc về một kiểu dữ liệu "đối tượng" duy nhất. Và họ mở rộng nó theo nhiều cách khác nhau
Các đối tượng trong JavaScript rất mạnh. Ở đây chúng ta vừa vạch ra bề nổi của một chủ đề thực sự lớn. Chúng ta sẽ làm việc chặt chẽ với các đối tượng và tìm hiểu thêm về chúng trong các phần tiếp theo của hướng dẫn