Chuyển đến nội dung chính
Mô-đun 3 · Bài học 3 trong tổng số 411/32 trong khóa học~12 min
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".

JS
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:

JS
const { nome: n, eta: years } = utente;
// creates the variables n and years

Giá 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:

JS
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í:

JS
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ử:

JS
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:

JS
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ó

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

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').

Đang tải trình chỉnh sửa…
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

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

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.

Đang tải trình chỉnh sửa…
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ử