Деструктуризация в JavaScript

Деструктуризация - это способ извлечения и присвоения значений внутри объектов и массивов переменным. Он был стандартизирован комитетом ECMAScript в 2015 году для выпуска JavaScript ES6. Деструктуризация - одна из ключевых функций ES6, которая позволит разработчикам сократить подробный синтаксис и создавать современные и разборчивые программы на JavaScript.

Объекты в JavaScript инициализируются и структурируются следующим образом:

const obj = {
 firstName: ‘Gaby’, 
 lastName: ‘Perez’
 }

До ES6 можно было извлекать значения в переменные одно за другим:

const firstName = obj.firstName
const lastName = obj.lastName
console.log(lastName) // ‘Perez’

Теперь с деструктуризацией присваивания переменной:

const { firstName, lastName } = obj
console.log(lastName) // ‘Perez’

Теперь у нас есть две переменные, которым присвоены соответствующие значения из одной строки кода. Деструктуризация - это ясный и лаконичный способ объявить только те переменные, которые вам нужны, и связать их со значением в той же строке. При использовании деструктурирующих присваиваний помните, что имя переменной и имя ключа должны соответствовать, чтобы программа знала, к какому значению ей нужно получить доступ.

Тот же шаблон извлечения применяется к массивам в JavaScript. Вместо ключей переменные объявляются относительно позиции индекса в массиве.

const [ fifty, lol ] = [50, 82]
console.log(lol) // 82

Шаблон присваивания деструктурирования проявляется при обращении к значениям во вложенных структурах объектов.

const student = {
  name: ‘Ray Lo’,
    subjects: {
      math: ‘B+’,
      science: ‘A’,
    },
  }
const { math, science } = student.subjects
console.log(science) // ‘A’

В назначении деструктуризации цель находится слева от знака равенства, а источник - справа. Это различие является фундаментальным для иллюстрации следующих нескольких концепций этого стиля назначения.

Элисион

При работе с массивами можно пропускать значения с запятыми в целевом объекте, чтобы получить доступ к нужным значениям в назначении. Эта техника известна как элизия, которая определяется как пропуск звука или слога при разговоре.

const arr = [‘hey’, ‘hello’, ‘sup’, ‘destructuring is cool’];
const [greet, , , message] = arr
console.log(message) // ‘destructuring is cool’

Значения по умолчанию

Если возможно, что значение в вашем объекте может возвращаться как undefined, можно назначить значения по умолчанию в целевом объекте, чтобы избежать появления ошибок в программе.

const { a = 5, b = 12 } = { a : 200 }
console.log(a) // 200
console.log(b) // 12

Переназначение

Также возможно переназначить имена переменных внутри самой цели деструктуризации. Это может быть полезно для того, чтобы сделать ваши переменные более семантическими для последующего использования в вашей программе.

const obj = { greeting: ‘HEY’, wait: ‘HOLD UP’ }
const { greeting : sup, wait : chill } = obj
console.log(sup) // ‘HEY’
console.log(chill) // ‘HOLD UP’

Вложенный доступ

Идея вложенного доступа основана на синтаксисе переназначения, рассмотренном выше. Этот шаблон полезен для доступа к глубоко вложенным объектам, которые содержат отдельные объекты, из которых вы хотите извлечь значения. Поглощение этой идеи поможет сохранить ваш код СУХИМ.

Ключевое отличие здесь состоит в том, что в переменной после двоеточия в цели мы оборачиваем переменную справа другой парой фигурных скобок для доступа к значению, хранящемуся внутри. Поскольку это имя переменной соответствует ключу объекта, вложенному в наш родительский объект, мы можем наложить синтаксис деструктуризации внутри себя и получить доступ к нужным вложенным значениям.

const nestedObj = {
  students:{
    autumn:{
      graduated: 1312
    }, 
    winter:{ 
      total: 1337
    }
  }
}
const { autumn: {graduated}, winter: {total} } = nestedObj.students
console.log(graduated, ‘/////’, total)
> 1312 ‘/////’ 1337

Резюме

Деструктуризация - это мощный синтаксис присваивания, позволяющий делать краткие объявления переменных, и применение этой концепции в программах позволит писать элегантный JavaScript.

Деструктуризация в JavaScript