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

Уроки модуля (3/4)

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

Два родственных синтаксиса из одного семейства, представленные в ES6 и теперь ежедневно хлеб для тех, кто пишет современный JS:

Деструктуризация: извлечение нескольких значений из массивов/объектов за один раз. линия.
Распространение ...: «распространяет» массив или объект внутри другого.

Вместе они делают код гораздо более кратким и читабельным.

Деструктуризация объекта

Прочитайте вслух: "создайте константы 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