Object js là gì
|
Object trong JavaScript (đối tượng trong JavaScript) là tập hợp của các cặp key-value. Và property là tên gọi của mỗi cặp key-value. Show
Giá trị (value) của một property có thể thuộc bất kỳ kiểu dữ liệu như: string, number, object, function,…. Khi giá trị của một property là function thì tên gọi của nó là method. Có nhiều cách để khởi tạo một object trong JavaScript (đối tượng trong JavaScript). Cách phổ biến nhất là sử dụng cú pháp object literal. Sau đây là ví dụ khởi tạo một object bằng cú pháp object literal: let empty = {};Để thêm property cho object, bạn hãy sử dụng let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);0 bên trong cặp dấu ngoặc nhọn. Ví dụ:let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};Ở ví dụ trên, object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1 có hai property let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);2 và let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);3 với các giá trị tương ứng là let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);4 và let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);5.Dấu phẩy ( let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);6) dùng để ngăn cách các property với nhau.Xem thêm: JavaScript là gì? Nội dung 1. Truy cập property (Accessing property)Để truy cập một property, bạn có thể sử dụng một trong hai cách sau:
The dot notation (.)Sau đây là ví dụ sử dụng dot notation (.) để truy cập một property của object: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);Ở ví dụ trên, sau khi khởi tạo object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1, thì mình đã log ra giá trị của các property let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);2 và let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);3.Array-like notation ([])Sau đây là ví dụ sử dụng array-like notation ([]) để truy cập một property của object: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);Trong trường hợp tên property có khoảng cách, bạn cần đặt tên property ở giữa cặp dấu ngoặc kép. Mình sẽ tạo object let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};0 có property là let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};1 để bạn thấy rõ hơn:let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};Để truy cập property let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};1, bạn cần phải sử dụng array-like-notation:address['building no']; Nếu bạn sử dụng dot notation, chương trình sẽ báo lỗi: address.'building no'; Error: SyntaxError: Unexpected string Lưu ý: Bạn không nên sử dụng khoảng cách cho tên của property. Khi bạn truy cập một property không tồn tại trong object thì kết quả trả về sẽ là let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};3. Ví dụ:console.log(address.country); Output: undefined 2. Thay đổi giá trị (value) của propertyĐể thay đổi giá trị của một property, bạn có thể sử dụng toán tử gán ( let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};4). Ví dụ:let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};0Output: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};1Ở ví dụ trên, mình đã thay đổi giá trị của property let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);2 từ let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);4 sang let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};7.3. Thêm một property mới vào objectKhông giống những object trong các ngôn ngữ lập trình khác như Java hoặc C++, bạn có thể thêm mới property sau khi khởi tạo object trong JavaScript. Mình sẽ thêm một property let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};8 cho object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1 và gán giá trị cho nó là 20 ở câu lệnh sau:let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};24. Xóa một property của objectBạn sử dụng toán tử address['building no'];0 để xoá một property bất kì. Mình sẽ tiến hành xoá property let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};8 của object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1 mà đã thêm trước đó:let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};3Bạn có thể truy cập vào lại property let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};8 để kiểm tra xem nó đã bị xoá hay chưa, thì lúc này kết quả sẽ là let address = {
'building no': 5360,
street: '5B Pho Quang',
district: 'Tan Binh',
city: 'Ho Chi Minh'
};3:let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};4Output: undefined 5. Kiểm tra một property có tồn tại hay khôngBạn sử dụng toán tử address['building no'];5 để kiểm tra một property có tồn tại trong object hay không: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};6Toán tử address['building no'];5 sẽ trả kết quả là address['building no'];7 nếu address['building no'];8 tồn tại trong address['building no'];9. Ở ví dụ sau đây, mình sẽ khởi tạo một object address.'building no';0 và sử dụng toán tử address['building no'];5 để kiểm tra xem property address.'building no';2 và address.'building no';3 có tồn tại trong object hay không: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};7Output: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};86. Sử dụng for…in để lặp qua các property của objectĐể lặp qua tất cả các property của object, bạn sử dụng câu lệnh address.'building no';4: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};9Ở ví dụ sau, mình sẽ tạo object address.'building no';5 và sau đó dùng câu lệnh address.'building no';4 để lặp qua các property của object address.'building no';5: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);0Output: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);17. MethodKhi property của object là function thì tên gọi của nó là method. Có thể xem method là hành động (action) của một object: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);2Output: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);3Ví dụ trên, mình gán giá trị cho property address.'building no';8 là một function. Ở đây, mình sử dụng function expression để tạo function. Sau đó mình thực thi function này bằng câu lệnh address.'building no';9. Bên cạnh việc sử dụng function expression, bạn có thể định nghĩa một function thông thường bên ngoài object như sau: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);4Ở đoạn code trên, mình định nghĩa một function có tên là address.'building no';8. Tiếp theo, mình sử dụng biểu thức SyntaxError: Unexpected string1 để gán function address.'building no';8 cho property address.'building no';8 của object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1.8. Method ShorthandNhư đã biết, bạn có thể định nghĩa method của một object bằng cách sử dụng cú pháp object literal: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);5Bên cạnh đó, bạn cũng có thể định nghĩa method ngắn gọn hơn thông qua cú pháp concise method của ES6: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);6Cú pháp này trông gọn gàng và ít dài dòng hơn nhiều! 9. The this valueLàm thế nào bạn có thể truy cập đến một property bên trong method của object? Ví dụ, bạn đang định nghĩa method SyntaxError: Unexpected string5 cho object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1 để trả về tên đầy đủ của một người. Vì vậy method này phải trả kết quả bằng cách ghép let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);2 và let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);3 lại với nhau.Để truy cập property let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);2 và let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);3 bên trong method SyntaxError: Unexpected string5 thì mình sử dụng keyword console.log(address.country);2. Keyword console.log(address.country);2 tham chiếu đến object let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person['firstName']);
console.log(person['lastName']);1. Do đó, bạn có thể truy cập property của object thông qua console.log(address.country);2: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);7Sau đây, mình sẽ viết đoạn code sử dụng console.log(address.country);2 bên trong method console.log(address.country);7 để bạn hiểu rõ hơn: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);8Output: let person = {
firstName: 'Nguyen',
lastName: 'Hung'
};
console.log(person.firstName);
console.log(person.lastName);9Ghi nhớ
Kết LuậnThông qua bài viết này, mình mong bạn sẽ biết rõ hơn đối tượng trong javascript là gì, đồng thời có thể hiểu được các cú pháp cơ bản nhất dùng để thao tác với object. Tiếp theo, mình sẽ giúp các bạn có cái nhìn chi tiết hơn về property và các attributes của nó như configurable, enumerable, writable, get, set và value. Chi tiết: https://letdiv.com/javascript-object-property/ Tham Gia Cộng Đồng Học Lập Trình Thật Dễ!Nếu bạn quan tâm đến ngành lập trình, và muốn tìm hiểu những kiến thức bổ ích khác, hãy tham gia ngay cộng đồng Học Lập Trình Thật Dễ nhé! Object in JavaScript là gì?Object trong JavaScript là một khái niệm trừu tượng dùng để biểu diễn một vật thể (cụ thể). Trong đó, các thuộc tính dùng để miêu tả đặc điểm, tính chất của đối tượng. Về bản chất, object là tập hợp của các key và value. Với key gọi là thuộc tính, còn value là giá trị tương ứng của thuộc tính.
Đối tượng là gì trong JavaScript?Đối tượng trong Javascript là một tập hợp các cặp khóa - giá trị, tương tự như bản đồ, từ điển, hay hash-table trong ngôn ngữ lập trình khác.
1 object là gì?Về mặt định nghĩa, một đối tượng (một object) là một danh sách các item, mỗi item là một cặp name-value, trong đó value có thể là: các kiểu dữ liệu cơ bản, function, hay cũng có thể là một object khác (kiểu dữ liệu phức hợp).
Mảng object là gì?Array Object là một mảng chứa các phần tử, cho phép truy xuất các phương thức của Object bên trong nó để đáp ứng các nhu cầu xử lý dữ liệu khác nhau khi mà Array chỉ có tác dụng duy nhất là lấy phần tử trong nó ra. Trong bài này, cùng Bizfly Cloud tìm hiểu Array Object nhé.
|
