Yıkma ve yayma

Aynı aileden iki kardeş sözdizimi, ES6 tarafından kullanıma sunuldu ve artık günlük modern JS yazan herkes için ekmek:

Yıkım: dizilerden/nesnelerden birden fazla değeri tek bir seferde çıkarın çizgi.
Yayılma ...: bir diziyi veya nesneyi diğerinin içine "yayar".

Birlikte kodu çok daha kısa ve okunabilir hale getirirler.

Nesne yok etme

Yüksek sesle okuyun: _"değerleriyle nome ve eta sabitlerini oluşturun. utente"'nin aynı isimli özellikleri.

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

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

Yeniden adlandırma

Anahtarın arkasına : newName ekleyin:

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

Varsayılan değer

Özellik eksikse (veya undefined ise), varsayılan değer kullanılır:

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

Dizi yıkımı

konuma göre çalışır:

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

Dizilere yayılma

...arr öğeleri "yayar":

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]

Nesnelere yayılma

Daha sonraki anahtarlar önceki anahtarları geçersiz kılar; değişmez güncellemeler için temeldir:

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 }

Deneyin

Egzersiz#js.m3.l3.e1

Denemeler: 0Yükleniyor…

`user = { name: 'Marco', age: 34, city: 'Torino' }` göz önüne alındığında, yalnızca `name` ve `city'yi iki sabite çıkarmak için yıkımı kullanın ve `\`${name} di ${city}\`` ('Marco di Torino'ya eşit olmalıdır) değerini döndürün.

Düzenleyici yükleniyor…

İpucu göster

const { isim, şehir } = kullanıcı; daha sonra iki değeri içeren bir şablon değişmezi.

3 denemeden sonra çözüm mevcut

Alıştırmayı gözden geçirin

Egzersiz#js.m3.l3.e2