Специальный синтаксис JavaScript, представленный в ES6, — это Деструктурирование назначение, которое дает нам возможность ДЕЛАТЬ БОЛЬШЕ, делая меньше. Деструктуризация используется для упрощения назначения значений, взятых непосредственно из объекта или массива.
Давайте начнем с рассмотрения примера объекта и процесса, необходимого для извлечения его значений до ES6:
var obj = {first: ‘Rick’, last: ‘Sanchez’, age: 70};
var first = obj.first;
var last = obj.last;
Деструктуризация избавляет нас от повторения, как описано выше, — избавляет от необходимости создавать две отдельные переменные для извлечения значений first
и last
из объекта с использованием записи через точку.
Используя синтаксис деструктурирования ES6, мы можем создать эквивалентный оператор присваивания:
const { first, last } = obj;
// first = 'Rick', last = ‘Sanchez’
Выше переменные first
и last
будут созданы слева, а затем назначены соответствующим значениям из объекта obj
.
Именно здесь деструктуризация действительно оказала значительное влияние — она позволяет извлекать несколько свойств из объекта, что было невозможно сделать все сразу до ES6. На практике деструктуризация также поможет значительно сократить объем написанного вами кода.
Итак, вы можете подумать: «Все это кажется довольно простым». Хотя это и правда, проблема с деструктурированием заключается в том, что существует так много разных способов сделать это и так много комбинаций синтаксиса.
Чтобы погрузиться немного глубже — погрузиться в глубину — мы можем просмотреть некоторые ключевые примеры деструктуризации как массивов, так и объектов. Это поможет заложить прочную основу для дальнейшего использования деструктуризации для выполнения преобразований списков, назначения значений по умолчанию, замены, игнорирования значений, вложенных массивов и многого другого.
Разрушение массивов
Объявления переменных при деструктурировании:
const [first, second] = [true, false];
first = true second = false
Назначение:
[first, second] = [true, false];
С помощью деструктуризации массива вы можете создавать новые переменные, используя элемент массива в качестве значения. Давайте рассмотрим пример массива с различными частями даты:
const date = ['11', '02', '1982']
// values represent month, day, year
Массивы в JavaScript всегда сохранят свой порядок, поэтому в нашем примере выше первый индекс всегда будет обозначать месяц, второй — день, а третий — год. Имея это в виду, вы можете создавать переменные из элементов массива, используя скобки:
// Process before destructuring was introduced
const month = date[0]
const day = date[1]
const year = date[2]
Продолжая делать это вручную, вы раздуете свой код. Подсказка разрушение массива — вместо этого мы можем присваивать значения из массива по порядку, все в одной строке, и сразу присваивать их собственным переменным:
// Destructure array values into variables const [month, day, year] = date
console.log(month) // 11 console.log(day) // 02 console.log(year) // 1982
Вы даже можете пропустить/опустить значения в массиве, используя запятую и оставив синтаксис пустым:
// Skips the second item in the array const [month, , year] = date
console.log(month) // 11 console.log(year) // 1982
Ниже приведен полезный визуальный пример того, что мы только что рассмотрели выше. Я также включил пример деструктуризации с помощью оператора распространения и замены переменных без использования временных переменных — они начинают показывать, как вы можете реально использовать деструктуризацию.
Разрушение объектов
Как мы впервые затронули в начале этого поста, деструктурирование одинаково ценно для объектов.
Вы можете извлечь столько значений из объекта, сколько вам нужно. Чтобы напомнить, давайте сначала посмотрим, как мы объявляем переменные в левой части и сопоставляем их со свойствами объекта в правой части.
Объявления переменных:
//
create new variables using an object property as the valueconst {first, second} = {first: 0, second: 1}; first = 0 second = 1
Назначение:
{first, second} = first: 0, second: 1};
Теперь, имея четкое представление о назначении переменных, давайте взглянем на первые два примера на изображении ниже. Они показывают, как деструктурирование позволяет вам назначать новое имя переменной при извлечении значений, помещая новое имя переменной после двоеточия {user: x}
.
Во втором примере мы видим распространенную ошибку, когда имя свойства не соответствует оригиналу справа, поэтому, когда мы выходим из вновь объявленной переменной x
, возвращается значение undefined
. Эта проблема решена в последнем примере, который иллюстрирует, как правильно переназначать значения при деструктуризации.
Разрушение объектов и массивов
Теперь давайте посмотрим, как мы можем объединить деструктуризацию объекта и массива в одно назначение деструктуризации. Сначала рассмотрим объект, который также содержит массив данных. Начнем с объявления объекта blog
.
// Declare the blog object
const blog = {
title: 'My First Space Travel Blog',
author: {
firstName: 'Rick',
lastName: 'Sanchez',
},
tags: ['ideas', 'notes', 'inter dimensional travel'],
}
Затем мы деструктурируем по мере необходимости:
const { title, author: { firstName, lastName }, tags: [ideasTag, notesTag, travelTag], } = blog;
console.log(title) // My First Space Travel Blog
Теперь давайте возьмем те же принципы и посмотрим на другую вложенную структуру данных, которая представляет собой массив объектов. Цель состоит в том, чтобы деструктурировать эту вложенную структуру данных на две переменные, одна переменная должна иметь строку 'blue'
, а другая 'yellow'.
.
var friends = [
{
name: 'Rick',
color: 'blue'
},
{
name: "Morty",
color: 'yellow'
}
];
Помните, что без деструктуризации нам нужно было бы отдельно присвоить значения двум переменным:
// Without destructuring
const firstColor = friends[0].color;
const secondColor = friends[1].color;
При деструктурировании мы можем выполнить одно и то же назначение переменной двумя разными способами:
let [ color1, color2 ] = [friends[0].color, friends[1].color];
// OR
let [{ color: firstColor }, { color: secondColor }] = friends;
// Assigning blue to firstColor and yellow to secondColor.
Использование деструктуризации для передачи объекта в качестве параметров функции
Что происходит, когда у нас есть структура данных и мы используем деструктуризацию для передачи объекта в качестве параметров функции? Иногда вы можете деструктурировать объект в самом аргументе функции:
const profileData = { name: 'Morty', age: 14, nationality: 'American', location: 'Dimension C-137', email: '[email protected]', 'last login': 'Tuesday' };
const profileUpdate = (profileData) => { const { name, age, nationality, location } = profileData; // do something with the variables }
Это эффективно разрушает объект, отправленный в функцию. Это также можно сделать на месте:
const profileUpdate = ({ name, age, nationality, location }) => {
// do something with the variables
}
Деструктуризация на месте удаляет лишние строки и дополнительно очищает наш код. Кроме того, нам не нужно манипулировать целым объектом внутри функции, и мы можем выбрать только те поля, которые необходимо скопировать внутри функции.
Надеюсь, вы уже начали понимать, как назначение деструктурирования ES6 добавляет желаемую функциональность в JavaScript и для создания более лаконичного кода. На практике вы оцените деструктурирование, особенно при работе со сложными объектами или массивами, и сможете быстро манипулировать их данными.
Биография автора
Микки — начинающий инженер-программист в Echobind, создающий веб-приложения с помощью React, Next.js и ChakraUI.