<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

Данный курс научит Вас программировать на языке C#, который является одним из самых востребованных языков программирования в мире. Курс состоит из 7 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Деструктуризация массивов и объектов в JS

Деструктуризация массивов и объектов в JS

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

Как и все нововведения стандарта ES5, деструктуризация нацелена на минимизацию количества кода и делает его проще для восприятия.


Условие задачи

Например, у нас есть две переменных a и b. В переменной a хранится значение 1, в переменной b - значение 2. Мы хотим поменять местами значения у переменных, чтобы в переменную a записалось значение переменной b, а в переменную b - значение переменной a. Рассмотрим оба варианта решения данной задачи - до появления деструктуризации (ES5) и после (ES6).

Обмен значениями у переменных в ES5

Деструктуризация позволяет обмениваться значениями у переменных. Для решения такой задачи в стиле ES5, не обойтись без введения промежуточной переменной. Создадим временную переменную tmp и присвоим ей значение переменной a. Так мы спасем переменную a от затирания ее значения в процессе обмена.

let a = 1;
let b = 2;
// правильное решение
let tmp = a; // временная переменная
a = b; // обмен значениями
b = tmp; // присвоим сохраненное значение

// неправильное решение
a = b; // значение переменной a затрется
b = a; // значения обеих переменных будут одинаковые

Пример деструктуризации массива в ES6

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

// записывает 1 = b[0], 2 = a[1]
[a, b] = [b, a];

Пример присваивания в ES5

Создадим массив users и извлечем из него данные. Для сравнения воспользуемся синтаксисом ES5. Согласитесь, что такой синтаксис не оптимальный, со множественными повторами.

const users = ['solaris', 'kit', 'superman'];

let solaris = users [0];
let kit = users [1];
let superman = users [2];

// результат в консоли
console.log(solaris, kit, superman); // solaris kit superman

Пример деструктивного присваивания в ES6

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

// одна строка вместо четырех
let ['solaris', 'kit', 'superman'] = users;

console.log(solaris, kit, superman); // solaris kit superman

Пример деструктуризации объекта в ES6

У объекта person нужно сохранить значения firstName и lastName в отдельные переменные.

const person = {
    firstName: "Anton",
    lastName: "Petrov",
    age: 25
};

До выхода спецификации ES6, это решалось вытаскиванием переменных по отдельности из объекта и наш код выглядел бы так:

const firstName = person.firstName;
const lastName = person.lastName;

При использовании синтаксиса деструктуризации, то же самое можно сделать намного лаконичнее. Перечислим только те переменные, которые хотим достать из объекта и после знака равно пишем название объекта person. Левая сторона в фигурных скобках - это шаблон, а правая сторона - объект person, из которого нужно вытащить переменные. В консоли мы увидим, что получили значения наших переменных действительно из объекта.

const {firstName, lastName} = person;
console.log(firstName, lastName); // Anton Petrov

Пример вложенной деструктуризации

Для извлечения вложенных свойств из объекта, мы можем использовать и более сложный шаблон с левой стороны.

const team = {
    names: {
        firstName_1: "Anton",
        firstName_2: "Oleg",
    },
    number: 2
};

const {names: {first, last} } = team;
console.log(firstName_1, lastName_2); // Anton Oleg

Итоги

Деструктуризация позволяет лаконично доставать значения из массива или объекта и менять их местами, поддерживает вложенность и значения по умолчанию, работает с параметрами функций и поддерживает оператор rest.

Для тех, кто хочет изучать разработку на профессиональном уровне, представляю вашему вниманию видео-курс по JavaScript технологиям. Цель данного курса не слепо копировать за автором курса, а научить вас думать на JavaScript и писать лаконичный код.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.