JavaScriptУрок 11 из 16
Деструктуризация и spread
Деструктуризация одной строкой раскладывает значения из массива или объекта по отдельным переменным. Три точки делают обратное: раскрывают массив или объект, чтобы его скопировать или объединить с другим.
Главное
- const [first, second] = list — переменные по порядку элементов
- const { name, age } = user — переменные по именам ключей; = "…" задаёт значение по умолчанию
- { ...a, ...b } — новый объект: копия a, поверх которой легли ключи b
- [...list, "new"] — копия массива с ещё одним элементом
- function sum(...numbers) — rest-параметр собирает все аргументы в массив
Пример
const [gold, silver, ...rest] = ["Ana", "Ben", "Cleo", "Dan"];console.log(gold, silver, rest); const user = { name: "Kai", age: 27 };const { name, age, country = "unknown" } = user;console.log(name, age, country); const older = { ...user, age: 28 };console.log(older, [...rest, "Eve"]);console.log(Math.max(...[3, 9, 4]));rest забрал всех, кто не поместился в gold и silver. Ключа country в объекте не было — сработало значение по умолчанию. Spread создал новый объект, и исходный user остался с age 27.
Задание
Как пользоваться редактором⌘ Enter или Ctrl Enter — запустить код, ⇧ ⌘ Enter — проверить задание.Tab и Shift Tab сдвигают строку или выделение; Esc, затем Tab — выйти из редактора.Проверка сравнивает то, что напечатала программа, с заданием; пробелы в конце строк не важны.После двух неудачных проверок можно открыть решение. Ваш код сохраняется в этом браузере.Объедините defaults и userSettings в новый объект settings через spread (сам defaults меняться не должен), достаньте theme и fontSize деструктуризацией, а sum перепишите с rest-параметром, чтобы она складывала любое количество чисел. Вывод: Theme: dark, size: 16, Sound: true, Defaults untouched: light и 10.
Вывод
Здесь появится то, что напечатает программа.