Деструктуризация в 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 г.