Примечание. Поскольку Medium не поддерживает подсветку синтаксиса кода, исходная статья была написана здесь. Перейдите туда, если хотите скопировать фрагменты кода: https://gist.github.com/jefflau/90ecf88a2818f52cae49
Деструктуризация — очень полезная техника в ES6. Это позволяет вам «разбить» или «деконструировать» объект на переменные. Думайте об этом как о сглаживании объекта, чтобы все свойства и значения стали обычными переменными.
Простой пример
Простой практический пример
Практическим примером использования деструктуризации является передача объекта в качестве опций функции. Например, если вы настраиваете ползунок, у которого может быть много параметров, вы захотите передать объект параметров вместо аргументов. Это создаст более чистый API, поэтому вам не нужно запоминать положение параметров в вашем ползунке. Здесь идеально подходит деструктуризация.
Простой практический пример 2
Вы также можете деструктурировать прямо в параметры функции, чтобы сделать ее еще более лаконичной и полностью избавиться от аргумента параметров.
Разрушение массивов
Деструктуризация не ограничивается только объектами, вы также можете деструктурировать массивы.
Возврат нескольких значений из функции
Как и в предыдущем практическом примере, вы можете деструктурировать возвращаемые значения, независимо от того, являются ли они объектами или массивами, и легко деструктурировать их в одном операторе.
Изменение имен переменных
До сих пор казалось, что вы можете деструктурировать только объекты с теми же именами переменных, что и имена свойств, но на самом деле вы назначаете любые имена, которые хотите, но вам нужно использовать немного более длинный синтаксис.
Что сбивает с толку, так это то, какое из них является именем переменной, а какое — именем свойства в объекте? Ну, если вы думаете об этом как об обычном объекте {a: 42}. Имя свойства в объекте при деструктуризации никогда не перемещается. Таким образом, вы бы поместили переименование туда, где значение обычно было бы таким, чтобы var {a: newName} = {a: 42} создавала переменную newName с тем же значением, что и свойство a внутри объекта. Поэтому, чтобы деструктурировать последний объект с другим именем, вы можете сделать это:
Если вы помните, что название свойства никогда не перемещается, у вас не должно возникнуть проблем с запоминанием того, как работает длинная версия! Я не так часто использую это, но это может быть полезно для создания нового объекта из старого объекта и изменения имен там, где они не имеют смысла.
Значения по умолчанию
Мы также можем создать присвоение значения по умолчанию для переменной, которая может не существовать в объекте.
Чуть более продвинутый практический пример
В этом примере у нас есть две функции: функция displaySmallProduct идет и получает productImages для этого конкретного продукта, функция возвращает объект, который содержит больше значений, чем нам нужно для средних и больших изображений. Поэтому, когда мы деструктурировали объект, мы просто пропустили эти значения. Имя и createdDate имеют смысл для этого примера, и поэтому мы используем краткий синтаксис, где он будет соответствовать имени для нас. Однако в этом конкретном случае мы должны изменить имя с маленького на что-то более подходящее, например, URL, поэтому сделайте код более читаемым, чтобы вместо {name, createdDate, small} мы могли написать длинный синтаксис только для маленького, чтобы мы получили {имя , Дата создания, маленький: URL}.
Подведение итогов
Деструктуризация очень полезна в своей простейшей форме, особенно для объектов опционов и для удобочитаемости. Это также очень мощно, и вы также можете начать деструктурировать вложенные объекты и массивы, но как только вы начнете смешивать короткий и длинный синтаксис, изменяя имена переменных, читать его становится все труднее и труднее.
Я написал о практических примерах, которые использую каждый день, но в деструктуризации есть гораздо больше, чему вы можете научиться. В последнем примере, который я привел, я бы не стал использовать деструктурирование, поскольку даже для того, чтобы сделать его удаленно читаемым, вам нужно сделать отступ, а также гораздо больше печатать и еще менее читабельно. Как только вы узнаете, как работает деструктурирование, может быть легко переборщить и разрушить абсолютно все, но вы можете быть единственным, кто может прочитать это, поэтому используйте его только тогда, когда это имеет смысл!
Ссылки и дополнительная литература
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/
Первоначально опубликовано на gist.github.com.
