Как использовать деструктивное присваивание

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

Для объектов:

Допустим, у нас есть следующий объект:

const person = {
   fullName: "Dan Barnes",
   age: 30,
   gender: "male"
}

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

const fullName = person.fullName
cont age = person.age
const gender = person.gender
fullName => "Dan Barnes"
age => 30
gender => "male"

Выполнение следующих действий возвращает правильные результаты, но с назначением деструктурирования вы можете сделать это в пределах одной строки и сделать так, чтобы это выглядело более аккуратно:

const {fullName, age, gender} = person
fullName => "Dan Barnes"
age => 30
gender => "male"

Это здорово и особенно полезно, если вы работаете с вложенными объектами, давайте посмотрим, на этот раз с вложенным объектом (автомобилем):

const person = {
   fullName: "Dan Barnes",
   age: 30,
   gender: "male",
   car: {
      model: "Ford",
      color: "Red",
      year: 2020
   }
}

Ранее синтаксис для деконструкции, чтобы мы могли получить доступ к свойствам автомобиля, выглядел бы так:

const model = person.car.model
cont color = person.car.color
const year = person.car.year
model => "Ford"
color => "Red"
year => 2020

Хотя это работает, оно занимает больше строк и выглядит не очень СУХО, давайте попробуем это, используя назначение деструктурирования:

const {car: {model, color, year}} = person
model => "Ford"
color => "Red"
year => 2020

Как вы можете, они возвращают тот же результат, но синтаксис намного чище!

Для массивов:

Предположим, что у нас есть следующий массив:

const nums = ["one", "two", "three"]

Опять же, используя простой синтаксис, мы можем извлекать данные из нашего массива следующим образом:

const first = nums[0]
const second = nums[1]
const third = nums[2]
first => "one"
second => "two"
third => "third"

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

const [first, second, third] = nums
first => "one"
second => "two"
third => "third"

Теперь мы видим, что это намного чище и читабельнее!

Что происходит, когда мы хотим получить доступ только к первому и последнему элементам массива? Ну, это на самом деле довольно просто! Доступ к ним будет таким:

const [first, , third] = nums
first => "one"
third => "third"

Теперь, когда мы это увидели, вам может быть интересно, почему между запятыми есть пробел? Это связано с тем, что если вы не поместите пустое пространство, javascript подумает, что вы пытаетесь получить доступ к следующему элементу массива, и даст вам неправильное значение, давайте посмотрим на пример:

const [first, third] = nums
first => "one"
third => "two"

Как вы можете видеть, «третий» теперь возвращает значение «два», это связано с тем, что javascript будет игнорировать определенные значения, если при деструктурировании присутствует пробел, если нет, javascript назначит переменную на основе ее индекса.

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