Модуль 3 · Урок 3 із 411/32 у курсі~12 min

Модульні уроки (3/4)

Деструктуризація та поширення

Два однорідних синтаксису з одного сімейства, представлені 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 після ключа:

Code

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