Деструктуризация в JavaScript теперь одна из моих любимых новых функций в ES6. Изучив весь контент ES2015 в курсе, который я прохожу, и пройдя процесс написания этого поста, я понял, сколько заметок я сделал по деструктуризации. Прохождение материала в курсе, который я изучаю, заставило меня по-настоящему понять, насколько полезно деструктурирование. Но просто рассказать об этом вам, читатель, не поможет. Во-первых, что именно деструктурирует? По сути, деструктуризация — это новый синтаксис для распаковки значений из массивов и объектов в отдельные переменные. Вы также можете использовать деструктурирование для быстрой замены переменных и параметров функций. Чтобы лучше это представить, давайте рассмотрим несколько примеров.
Разрушение массива
Прежде чем пройти курс, это действительно единственная часть, которую я понял. Деструктуризация массива довольно проста. При деструктурировании с использованием массивов все дело в позиции. Если вы хотите вытащить первую переменную из массива и присвоить ее отдельной переменной, это будет выглядеть так:
const myFavoriteThings = ["Coding", "Learning new things", "Teaching", "Travel", "Food"];
const [ firstItem ] = myFavoriteThings;
//firstItem = "Coding"
Это не изменяет исходный массив. Деструктуризация просто использует массив в качестве ссылки для новой переменной. Но что, если вам нужны первая и третья переменные, но не вторая? Вот где появляется возможность пропускать индексы:
const [ firstItem, , thirdItem ] = myFavoriteThings;
Простое исключение переменной при деструктурировании первого и третьего индексов сообщит JavaScript, что ее нужно вообще пропустить. Вы также можете создать отдельную переменную массива с остальными переменными, используя оператор rest. Примечание: для этого оператор rest должен идти последним в деструктуризации:
const [ firstItem, secondItem, ...theRest ] = myFavoriteThings;
//firstItem = "Coding" //secondITem = "Learning new things" //theRest = ["Teaching", "Travel", "Food"];
Деструктуризация объекта
С помощью объектов вы можете деструктурировать различные значения из ключей. Это очень полезно, если вы работаете над чем-то вроде приложения для покупок, где у вас есть имена и цены. Обычно вы должны называть переменные тем же именем, что и ключ. JavaScript ищет имя ключа, используя имя деструктурированной переменной. Вот пример, который я показал в другом посте:
const coffee = { offeeName: 'blonde', rind: 'whole bean', rice: 10.99, quantity:5 }
const {coffeeName, price} = coffee;
Но не так быстро! Вы можете переименовать деструктурированные переменные!
const {coffeeName: name, price} = coffee;
Это извлечет значение coffeeName, но присвоит его переменной имени. Вы также можете сделать то же самое, что и массивы, и деструктурировать остальные ключи в отдельную объектную переменную.
const {coffeeName, ...extraInfo} = coffee;
//extraInfo = { grind: 'whole bean', price: 10.99, quantity: 5 }
Обмен переменных
Это еще одно очень полезное сокращение, которое дает нам деструктуризация. Прежде чем вам нужно создать временную переменную для хранения начального значения заменяемой переменной:
let usCapital = "Ottawa";
let canadaCapital = "Washington D.C.";
let temp = usCapital;
usCapital = canadaCapital;
canadaCapital = temp;
Теперь, используя деструктурирование, у нас есть однострочный метод для этого:
[usCapital, canadaCapital] = [canadaCapital, usCapital]
JavaScript будет хранить значения переменных в порядке от до знака равенства и присваивать их порядку переменных после знака равенства.
Деструктуризация функций
Это было то, что я никогда не рассматривал в документации, но это чрезвычайно полезно. Вы можете деструктурировать параметры в функции. Давайте используем тот же объект кофе из приведенных выше примеров:
function getTotal({quantity, price}) { return quantity * price; }
getTotal(coffee) //returns 54.95
Это автоматически извлечет значения из объекта кофе на основе имен параметров в функции.
Ну, я надеюсь, что это помогло вам объяснить некоторые из основных функций деструктурирования достаточно, чтобы вы начали использовать эту функцию. Если вы хотите более подробно взглянуть на деструктурирование, включая то, что я здесь не упомянул, ознакомьтесь с официальной документацией.
Первоначально опубликовано на http://zachbradleydev.com 10 февраля 2020 г.