破壊と拡散

同じファミリーの 2 つの兄弟構文。ES6 によって導入され、現在は毎日使用されています。最新の JS を書く人のためのパン:

構造化: 単一の配列/オブジェクトから複数の値を抽出します。ライン。
Spread ...: 配列またはオブジェクトを別の配列内に「展開」します。

これらを組み合わせると、コードがはるかに簡潔で読みやすくなります。

オブジェクトの分割

読み上げます: 「次の値を使用して定数 nome および eta を作成します」 utente" の同名のプロパティ。

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

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

名前の変更

キーの後に : newName を追加します。

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

デフォルト値

プロパティが欠落している場合 (または undefined である場合)、デフォルトが使用されます。

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

配列の構造化

位置によって機能します:

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

配列上に展開

...arr 要素を「展開」します。

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]

物体に広がる

後のキーは以前のキーをオーバーライドします。これは不変更新の基本です。

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 }

試してみてください

運動#js.m3.l3.e1

試行回数: 0読み込み中…

`user = { name: 'Marco'、age: 34、city: 'Torino' }` とすると、構造化を使用して `name` と `city` だけを 2 つの定数に抽出し、`\`${name} di ${city}\`` ('Marco di Torino' と等しくなければなりません) を返します。

エディターを読み込み中…

ヒントを表示

const {名前、都市} = ユーザー;次に、2 つの値を含むテンプレートリテラル。

3 回の試行後に解決策が利用可能になります

復習演習

運動#js.m3.l3.e2