Специальный синтаксис 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 value
const {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.