Узнайте о деструктуризации в JavaScript на практических примерах

Вступление

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

В этой статье мы узнаем о назначении деструктуризации в JavaScript. Давайте приступим к делу.

Используйте деструктуризацию для извлечения значений из объектов

Мы можем использовать назначение деструктуризации для извлечения значений из объектов, но сначала давайте посмотрим, как мы это делаем в ES5.

Вот пример:

const user = { name: 'John Doe', age: 34 };

const name = user.name; //Prints: name = 'John Doe'
const age = user.age; //Prints: age = 34

Вот эквивалент с использованием синтаксиса деструктуризации ES6:

const { name, age } = user;
//Prints: name = 'John Doe', age = 34

Как видите, будут созданы переменные name и age, которым будут присвоены значения соответствующих значений из объекта user. Деструктурирование ES6 намного проще и понятнее. Вы можете извлечь из объекта столько значений, сколько захотите.

Назначьте переменные из объектов

Присваивание деструктуризации позволяет нам присваивать переменные из объектов.

Вот пример того, как вы можете давать новые имена переменных в назначении:

const { name: userName, age: userAge } = user;
// userName = 'John Doe', userAge = 34

Вы можете прочитать это как «получить значение user.name и присвоить его новой переменной с именем userName».

Мы также можем использовать деструктуризацию ES6 для присвоения переменных из вложенных объектов. Давайте возьмем вложенный объект под johnDoe и попробуем назначить из него переменные.

Вот пример:

const user = {
  johnDoe: { 
    age: 34,
    email: '[email protected]'
  }
};

Вот как извлечь значения свойств объекта и присвоить их одноименным переменным:

const { johnDoe: { age, email }} = user;

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

Назначить переменные из массивов

ES6 делает деструктуризацию массивов такой же простой, как деструктуризацию объектов. Взгляните на примеры ниже:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

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

Вот пример:

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

Как видите, это простой способ назначать переменные из массивов.

Передайте объект как параметры функции

В некоторых случаях вы можете деструктурировать объект в самом аргументе функции.

Взгляните на следующий пример:

const profileUpdate = ({ name, age, nationality, location }) => {
  /* do something with these fields */
}

Когда profileData передается в указанную выше функцию, значения деструктурируются из параметра функции для использования внутри функции.

Вы можете добиться того же с помощью следующего примера:

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;
  // do something with these variables
}

Это эффективно разрушает объект, отправленный в функцию.

Заключение

Как видите, назначение деструктуризации в JavaScript - одна из важных и полезных функций ES6, о которых вам следует знать. Он вам очень понадобится при работе с такими фреймворками, как React или Vue.

Спасибо, что прочитали эту статью, надеюсь, вы нашли ее полезной. Если да, то получите больше похожего контента, подписавшись на наш канал на YouTube в Decoded!

Больше Чтения



5 удивительных инструментов фронтенд-разработки, о которых вы должны знать
Полезные инструменты фронтенд-разработки, которые должен знать каждый разработчик medium.com