Bài học theo mô-đun (3/4)
Phá hủy và lây lan
Hai cú pháp anh em trong cùng một họ, được giới thiệu bởi ES6 và bây giờ là hàng ngày bánh mì cho bất cứ ai viết JS hiện đại:
- Hủy cấu trúc: trích xuất nhiều giá trị từ mảng/đối tượng trong một dòng.
- Trải rộng
...: "trải rộng" một mảng hoặc một đối tượng bên trong một mảng hoặc một đối tượng khác.
Họ cùng nhau làm cho mã ngắn gọn và dễ đọc hơn nhiều.
Phá hủy đối tượng
Đọc thành tiếng: "tạo các hằng số nome và eta với các giá trị là
thuộc tính cùng tên của utente".
const utente = { nome: 'Anna', eta: 28, ruolo: 'admin' };
const { nome, eta } = utente;
console.log(nome); // 'Anna'
console.log(eta); // 28Đổi tên
Thêm : newName sau khóa:
const { nome: n, eta: years } = utente;
// creates the variables n and yearsGiá trị mặc định
Nếu thuộc tính bị thiếu (hoặc undefined), giá trị mặc định sẽ được sử dụng:
const { ruolo = 'reader', telefono = 'n/d' } = utente;
// ruolo = 'admin' (present), telefono = 'n/d' (missing)Phá hủy mảng
Nó hoạt động theo vị trí:
const colori = ['rosso', 'verde', 'blu'];
const [primo, secondo] = colori;
// primo = 'rosso', secondo = 'verde'
const [, , terzo] = colori; // skips the first two
const [a, ...resto] = colori; // a = 'rosso', resto = ['verde','blu']Trải rộng trên mảng
...arr "trải rộng" các phần tử:
const a = [1, 2, 3];
const b = [4, 5];
const unione = [...a, ...b]; // [1, 2, 3, 4, 5]
const copia = [...a]; // shallow copy of a
const conPiu = [0, ...a, 4]; // [0, 1, 2, 3, 4]Trải trên đồ vật
Các khóa sau ghi đè các khóa trước đó - cơ bản cho các bản cập nhật bất biến:
const utente = { nome: 'Anna', eta: 28 };
const aggiornato = { ...utente, eta: 29 };
// { nome: 'Anna', eta: 29 } — utente was NOT touched
const con = { ...utente, attivo: true };
// { nome: 'Anna', eta: 28, attivo: true }Hãy thử nó
Cho `user = { name: 'Marco', age: 34, city: 'Torino' }`, hãy sử dụng tính cấu trúc để trích xuất chỉ `name` và `city` thành hai hằng số và trả về `\`${name} di ${city}\`` (phải bằng 'Marco di Torino').
Hiển thị gợi ý
const { tên, thành phố } = người dùng; sau đó là một mẫu chữ có hai giá trị.
Giải pháp khả dụng sau 3 lần thử
Xem lại bài tập
Cho `base = { theme: 'dark', size: 'md' }`, trả về một đối tượng giống hệt MỚI nhưng với `size` được đặt thành 'lg' bằng cách sử dụng spread.
Hiển thị gợi ý
Biểu thức cuối cùng phải là đối tượng. Gói nó trong ngoặc đơn: ({ ...base, ... }).
Giải pháp khả dụng sau 3 lần thử