Chuyển đến nội dung chính
Mô-đun 3 · Bài học 2 trong tổng số 410/32 trong khóa học~10 min
Bài học theo mô-đun (2/4)

Đối tượng: bản đồ khóa-giá trị

Một object trong JS là một tập hợp không có thứ tự của các cặp key → value. Khóa là chuỗi (hoặc Symbol), giá trị là bất kỳ thứ gì: số, chuỗi, mảng, các đối tượng, hàm khác. Đây là cấu trúc dữ liệu được sử dụng nhiều nhất trong ngôn ngữ: mọi "bản ghi" trong miền của bạn thường sẽ là một đối tượng.

JS
const utente = {
  nome: 'Anna',
  eta: 28,
  attivo: true,
  ruoli: ['admin', 'editor'],
};

Đọc thuộc tính: dấu chấm và dấu ngoặc

Có hai ký hiệu tương đương:

JS
utente.nome; // 'Anna'    (dot — the normal form)
utente['nome']; // 'Anna'    (bracket — equivalent)

// Brackets are MANDATORY when:
// 1) the key is not a valid identifier
const tag = { 'codice-fiscale': 'ABC123' };
tag['codice-fiscale']; // OK
// tag.codice-fiscale;      // syntax error

// 2) the key is computed (variable/expression)
const campo = 'eta';
utente[campo]; // 28

Thuộc tính thiếu trả về undefined mà không có lỗi:

JS
utente.telefono; // undefined

Thêm, sửa, xóa

JS
const u = { nome: 'Anna' };
u.eta = 28; // adds
u.nome = 'Anna B.'; // modifies
delete u.eta; // removes the property

delete là một từ khóa. Nó sẽ trở thành một trường hợp sử dụng hiếm hoi: hầu hết có lúc bạn muốn tạo một đối tượng mới mà không cần khóa đó (chúng ta sẽ thấy điều này với sự lây lan).

Viết tắt: các khóa có tên giống như biến

Khi tên khóa khớp với tên biến, bạn có thể bỏ qua việc trùng lặp:

JS
const nome = 'Anna';
const eta = 28;

const u1 = { nome: nome, eta: eta }; // explicit form
const u2 = { nome, eta }; // shorthand, equivalent

Kiểm tra sự hiện diện của một tài sản

Ba lựa chọn, theo thứ tự ưu tiên:

JS
'nome' in utente; // true   ← in operator
utente.nome !== undefined; // true   ← works almost always
Object.hasOwn(utente, 'nome'); // true   ← modern, safe

Hãy thử nó

tập thể dục#js.m3.l2.e1
Nỗ lực: 0Đang tải…

Tạo đối tượng user = { name: 'Sara', age: 22 }, sau đó thêm thuộc tính 'active' được đặt thành true và trả về đối tượng làm biểu thức cuối cùng.

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

Bạn có thể thêm thuộc tính sau thực tế bằng ký hiệu dấu chấm.

Giải pháp khả dụng sau 3 lần thử

Xem lại bài tập

tập thể dục#js.m3.l2.e2
Nỗ lực: 0Đang tải…

Cho `product = { code: 'A1', price: 9,9 }` và chuỗi `key = 'price'`, trả về giá bằng ký hiệu ngoặc (biểu thức cuối cùng phải có giá trị là 9,9).

Đang tải trình chỉnh sửa…
Hiển thị gợi ý

Với dấu ngoặc, bạn có thể chuyển một biến làm khóa.

Giải pháp khả dụng sau 3 lần thử