3. Display Object (hiển thị Object)
3.1 [object Object]
const user = {
name: "Vũ Quốc Dũng",
age: 30,
};const num = 10;
const stringNum = String(num);
const StringUser = String(user); // nó sẽ ra 1 cái chuỗi [object Object]
console.log(num);
console.log(stringNum);
Cách để xem object có gì thì console.log(user.name); và console.log(user["name"]) hoặc console.log(keys.map(key) => user[key]); xem được giá trị nếu như chúng ta đã biết được cái key của nó rồi.
// Hiển thị giá trị của các phần tử trong user lên
console.log([user.name, user.age]);Cách 2: Dùng JSON.stringify() hiển thị Object dưới dạng String
console.log(JSON.stringify(user)); // {"name":"Vũ Quốc Dũng","age":30}
Từ cái String này chuyển ngược lại Object thì
console.log(JSON.parse(JSON.stringify(user))); // { name: 'Vũ Quốc Dũng', age: 30 }Cách 3: Object.keys(user)
Nếu như bây giờ mình chỉ có tên Object là user thôi và Object này có hơn 100 thuộc tính thì sao? Chã lẻ liệt kê tay ra như thế này? hoặc ra chỉ biết Object user và bên trong có bao nhiêu và có cái gì? Thì làm mình liệt kê ra được danh sách các key của nó thì ta sẽ có cú pháp Object.keys() nó sẽ trả ra cái mảng chứa các keys
console.log(Object.keys(user)) // [ 'name', 'age' ]Còn bây giờ chúng ta muốn lấy toàn bộ value thì Object.values()
console.log(Object.values(user)) // [ 'Vũ Quốc Dũng', 30 ]Cách 4: ta dùng for in
for (const key in user) {
console.log(key);
} ** Lưu ý: Trong Object literal thông thường thì chúng ta không dùng for of được.
Cách 5: Object.entries()
key và value. Thì cú pháp mà có một mảng mà bên trong có một mảng nữa gồm 2 giá trị key và value cứ như bên dưới thì nó gọi kiểu này là entries (một mảng đặc biệt là entries). Thì Object.entries() biến Object thành một cái entriesconsole.log(Object.entries(user)); // [ [ 'name', 'Vũ Quốc Dũng' ], [ 'age', 30 ] ]
Giờ ta có mảng rồi thì ta làm việc với các phương thức của Mảng thôi
Ví dụ: ta muốn lấy ra danh sách key thì ta có thể dùng map()
console.log(Object.entries(user).map(([_, value]) => value));
// [ 'Vũ Quốc Dũng', 30 ]hoặc có thể dùng for of (mảng thì dùng for of)
for (const [key, value] of Object.entries(user)) {
console.log(${key}: ${value});
}
// name: Vũ Quốc Dũng
// age: 30Cái dấu ngoặc vuông [] nằm ngay chỗ khai báo biến đó có tên gọi chính thức là Destructuring Assignment (Phân rã cấu trúc). Đây là một "phép thuật" rút gọn code của JavaScript hiện đại (ES6).