Доброго времени суток, друзья. В данной статье мы разберем на примерах понятие деструктурирующего присваивания (destructuring assignment). Посмотрим, где его можно использовать, а также его преимущества по сравнению со старым синтаксисом выполнения аналогичных задач.
Что такое деструктуризация?
Само понятие деструктуризация (деструктурирующее присваивание) обозначает способ получения данных из массива или объекта путем использования специального синтаксиса. В чем его главная идея? Облегчить труд рядового разработчика и повысить скорость самой разработки путем написания меньшего кода. Давайте посмотрим сперва на саму проблему, решим ее стандартным способом, а затем воспользуемся деструктуризацией.
Деструктуризация массивов
Предположим что у нас есть массив простых строк.
Пример
const array = ["one", "two", "three"]
Для получения нужного элемента воспользуемся базовым способом, укажем индекс элемента в квадратных скобках.
Пример
console.log(array[0]) // ‘one’
Теперь воспользуемся деструктуризацией для решения этой же задачи. Для этого достаточно указать в квадратных скобках (по количеству элементов массива) переменные которые будут автоматически производить нам действие обращения по индексу
Пример
const array = ["one", "two", "three"]
const [one, two, three] = array
console.log(one) // ‘one’
Необязательно указывать каждый элемент в деструктуризации, можно просто отделить его запятыми. Например, для получения третьего элемента напишем следующий код.
Пример
const array = ["one", "two", "three"]
const [, , three] = array
console.log(three) // «three»
Деструктуризация позволяет нам присваивать значения по умолчанию, что часто бывает очень полезно. В момент реструктуризации для нужного элемента достаточно указать равно и написать его значение по умолчанию.
Пример
const array = [«one», «two», «three»]
const [one, two, three, four] = array
console.log(four) // undefined
const [one, two, three, four = ‘four'] = array
console.log(four) // ‘four’
Деструктуризация объектов
Помимо массивов очень удобно использовать деструктуризацию для получения нужных значений из объекта. Для этого нужно использовать фигурные строки по аналогии с массивами. Представим, что у нас есть следующий объект хранящий персональные данные.
Пример
const person = {
name: «Vova»,
age: 24,
hobbies: {
sport: [‘boxing’, ‘swimming]
}
}
Для получения возраста достаточно воспользоваться точечной нотацией.
Пример
const age = person.age;
console.log(age) // 24
Теперь используем деструктуризацию.
Пример
const { age } = person
console.log(age) // 24
Помимо синтаксиса деструктуризация имеет ряд преимуществ:
1. Быстрое присваивание переменными других названий — достаточно указать новое название переменной после двоеточия.
Пример
const { name: firstName } = person
console.log(firstName) // «Vova»
2. Присваивание значений по умолчанию, по аналогии с массивом — просто добавив после знака равно нужное значение.
Пример
const { street = "123" } = person // Такого поля нет в объекте
console.log(street) // "123"
3. Деструктуризация вложенных элементов (объектов, массивов)
Пример
const {
name,
age,
hobbies: { sport }
} = person;
console.log(sport[0]) // ‘boxing’
Заключение
Сегодня мы рассмотрели на практике использование деструктурирующего присваивания и погрузились в нюансы работы и «фишки», которые вы можете использовать на практике. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.
Комментарии: