Merusak dan menyebar

Dua sintaksis saudara dari keluarga yang sama, diperkenalkan oleh ES6 dan sekarang setiap hari roti untuk siapa pun yang menulis JS modern:

Destrukturisasi: mengekstrak beberapa nilai dari array/objek dalam satu garis.
Spread ...: "menyebarkan" array atau objek ke dalam array atau objek lain.

Bersama-sama mereka membuat kode menjadi lebih ringkas dan mudah dibaca.

Penghancuran objek

Bacalah dengan lantang: "buatlah konstanta nome dan eta dengan nilai properti dengan nama yang sama dari utente".

const utente = { nome: 'Anna', eta: 28, ruolo: 'admin' };

const { nome, eta } = utente;
console.log(nome); // 'Anna'
console.log(eta); // 28

Mengganti nama

Tambahkan : newName setelah kunci:

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

Nilai bawaan

Jika properti tidak ada (atau undefined), defaultnya digunakan:

const { ruolo = 'reader', telefono = 'n/d' } = utente;
// ruolo = 'admin' (present), telefono = 'n/d' (missing)

Penghancuran susunan

Ia bekerja berdasarkan posisi:

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']

Sebarkan pada array

...arr "menyebarkan" elemen:

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]

Sebarkan pada objek

Kunci selanjutnya timpa kunci sebelumnya — penting untuk pembaruan yang tidak dapat diubah:

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 }

Cobalah

Latihan#js.m3.l3.e1

Upaya: 0Memuat…

Mengingat `pengguna = { nama: 'Marco', usia: 34, kota: 'Torino' }`, gunakan destrukturisasi untuk mengekstrak hanya `nama` dan `kota` menjadi dua konstanta dan mengembalikan `\`${nama} di ${kota}\`` (harus sama dengan 'Marco di Torino').

Memuat editor…

Tunjukkan petunjuk

const { nama, kota } = pengguna; lalu template literal dengan dua nilai.

Solusi tersedia setelah 3 upaya

Tinjau latihan

Latihan#js.m3.l3.e2