解构与传播

来自同一个家族的两个同级语法，由 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` 提取为两个常量，并返回 `\`${name} di ${city}\`` （必须等于 'Marco di Torino'）。

正在加载编辑器...

显示提示

const { 姓名，城市 } = 用户；然后是带有两个值的模板文字。

3 次尝试后可用的解决方案

复习练习

锻炼#js.m3.l3.e2