Введение в часто используемые особенности ES6. Часть 2

  • Tutorial

Данная публикация является 2-ой частью перевода статьи «Introduction to commonly used ES6 features» под авторством Zell Liew, размещенного здесь. Перевод 1-ой части находится здесь.


Деструктуризация


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


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


Допустим, имеется следующий объект:


const Zell = {
  firstName: 'Zell',
  lastName: 'Liew'
}


Для получения firstName и lastName из Zell необходимо создать две переменные, а затем присвоить каждой переменной значение следующим образом:


let firstName = Zell.firstName; // Zell
let lastName = Zell.lastName; // Liew

С деструктуризацией создание и присвоение этих переменных производится одной единственной строкой кода. Ниже пример деструктуризации объекта:


let { firstName, lastName } = Zell;
console.log(firstName); // Zell
console.log(lastName); // Liew

При добавлении фигурных скобок к объявлению переменных конструируется указание создать эти переменные и затем присвоить Zell.firstName в firstName, а Zell.lastName в lastName.


Поясним, что происходит под «капотом»:


// То, что вы пишите:
let { firstName, lastName } = Zell;

// То, что ES6 выполняет:
let firstName = Zell.firstName;
let lastName = Zell.lastName;

Теперь если имя переменной уже занято, то невозможно объявить такую же переменную снова (особенно если вы используете let или const).


Следующий код не сработает:


let name = 'Zell Liew';
let course = {
  name: 'JS Fundamentals for Frontend Developers'
  // ... другие свойства
}
let { name } = course; // Uncaught SyntaxError: имя идентификатора уже было объявлено

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


В примере ниже создается переменная courseName и ей присваивается course.name.


let { name: courseName } = course;

console.log(courseName); // JS Fundamentals for Frontend Developers
// То, что ES6 выполняет:
let courseName = course.name;

Обратим внимание на то, что если деструктурировать переменную, которая отсутствует в объекте, то будет возвращено undefined.


let course = {
  name: 'JS Fundamentals for Frontend Developers'
}
let { package } = course;
console.log(package); // undefined

Помните параметры по умолчанию? Также можно записывать параметры по умолчанию для деструктурированных переменных. Синтаксис похож на синтаксис объявления функций.


let course = {
  name: 'JS Fundamentals for Frontend Developers'
}
let { package = 'full course' } = course;
console.log(package); // full course 

Вы даже можете переименовывать переменные при указании параметров по умолчанию. Необходимо составить комбинацию из двух синтаксисов, что сначала будет необычно, но к этому можно привыкнуть:


let course = {
  name: 'JS Fundamentals for Frontend Developers'
}
let { package: packageName = 'full course' } = course;
console.log(packageName); // full course

Это все, что касалось деструктуризации объектов. Теперь рассмотрим деструктуризацию массивов.


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


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


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


  • 1-ая переменная — первый элемент массива
  • 2-ая переменная — второй элемент массива
  • и т.д.

let [one, two] = [1, 2, 3, 4, 5];
console.log(one); // 1
console.log(two); // 2

Если при деструктуризации количество переменных превышает размер массива, дополнительные переменные будут undefined.


let [one, two, three] = [1, 2];
console.log(one); // 1
console.log(two); // 2
console.log(three); // undefined

При деструктуризации массива часто извлекаются только необходимые переменные. Для получения остатка используется rest оператор следующим способом:


let scores = ['98', '95', '93', '90', '87', '85'];
let [first, second, third, ...rest] = scores;

console.log(first); // 98
console.log(second); // 95
console.log(third); // 93
console.log(rest); // [90, 87, 85]

Rest оператор будет подробнее представлен в следующей части. Сейчас же рассмотрим перестановку переменных с помощью деструктуризации массива.


Перестановка переменных с помощью деструктуризации массива


Допустим, имеются две переменные a и b.


let a = 2;
let b = 3;

Вам необходимо переставить эти переменные так, чтобы a стало равно 3 и b равно 2. В ES5 вы бы использовали временную третью переменную для решения этой задачи:


let a = 2;
let b = 3;
let temp;
// перестановка
temp = a; // в переменной temp число 2
a = b; // в переменной a число 3
b = temp; // в переменной b число 2

Такой код работает, несмотря на неясную и сбивающую с толку логику с включением третьей переменной.


С деструктуризацией массивов в ES6 это решается следующим способом:


let a = 2;
let b = 3;
// перестановка деструктуризацией массива
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 2

Такой способ перестановки переменных намного проще предыдущего.


Далее рассмотрим деструктуризацию массивов и объектов в функциях.


Деструктуризация массивов и объектов при объявлении функций


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


Допустим, имеется функция, которая принимает массив значений и возвращает объект с тремя верхними значениями. Такая функция аналогия того, что происходит при деструктуризации массивов.


function topThree (scores) {
  let [first, second, third] = scores;
  return {
    first: first,
    second: second,
    third: third
  }
}

Альтернативный способ записи такой функции заключается в деструктуризации scores при объявлении функции. В этом случае потребуется написать на одну строку кода меньше. Также необходимо помнить, что в функцию будет передаваться массив.


function topThree ([first, second, third]) {
  return {
    first: first,
    second: second,
    third: third
  }
}

Если мы можем комбинировать параметры по умолчанию и деструктуризацию при объявлении функций, то, что будет результатом кода ниже?


function sayMyName ({
  firstName = 'Zell',
  lastName = 'Liew'
} = {}) {
 console.log(firstName + ' ' + lastName);
}

Во-первых, заметим, что функция принимает один аргумент-объект. Этот объект необязательный и по умолчанию равен {}.


Во-вторых, происходит попытка деструктурировать переменные firstName и lastName из переданного объекта. Если такие свойства будут найдены, то они будут использованы.


В итоге если firstName или lastName не будут определены (undefined) в объекте, то им присвоятся значения Zell и Liew, соответственно.


Итак, такая функция выводит следующие результаты:


sayMyName(); // Zell Liew
sayMyName({firstName: 'Zell'}); // Zell Liew
sayMyName({firstName: 'Vincy', lastName: 'Zhang'}); // Vincy Zhang

Далее рассмотрим rest и spread.


Rest параметр и spread оператор


Rest параметр и spread оператор похожи, т.к. оба обозначаются тремя точками. Однако они отличаются тем, что выполняют при использовании. По этой причине они по-разному названы, и будут рассмотрены по отдельности.


Rest параметр


В свободной трактовке rest параметр указывает взять остаток данных и обернуть его в массив. Если детально, то происходит преобразование списка разделенных запятыми аргументов в массив.


Ознакомимся с rest параметром в действии. Допустим, имеется функция add, которая суммирует свои аргументы:


sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55

В ES5 мы зависим от переменной arguments каждый раз, когда имеем дело с функцией, которая принимает неизвестное количество переменных. Переменная arguments — массивоподобный Symbol.


function sum () {
  console.log(arguments);
}
sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);


ArgumentsSymbol (не массив)


Один из способов посчитать эту сумму аргументов состоит в том, чтобы преобразовать его в массив с помощью Array.prototype.slice.call(arguments), а затем циклом пройти по каждому элементу такими методами массивов как forEach или reduce.


Уверен, forEach можете сами реализовать, поэтому ниже приведен пример с reduce:


// ES5
function sum () {
  let argsArray = Array.prototype.slice.call(arguments);
  return argsArray.reduce(function(sum, current) {
    return sum + current;
  }, 0)
}

В ES6 c rest параметром предоставлена возможность перевести разделённые запятыми аргументы прямо в массив:


// ES6
const sum = (...args) => args.reduce((sum, current) => sum + current, 0);
// ES6 без сильного сокращения кода с помощью стрелочных функций
function sum (...args) {
  return args.reduce((sum, current) => sum + current, 0);
}

Rest параметр был ранее коротко представлен в разделе про деструктуризацию. Тогда из массива были деструктурированы верхние три значения:


let scores = ['98', '95', '93', '90', '87', '85'];
let [first, second, third] = scores;
console.log(first); // 98
console.log(second); // 95
console.log(third); // 93

При необходимости получить остальные данные мы бы обратились к rest параметру.


let scores = ['98', '95', '93', '90', '87', '85'];
let [first, second, third, ...restOfScores] = scores;
console.log(restOfScores); // [90, 97, 95]

Если вас что-то сбило с толку, то запомните, что rest параметр переводить данные в массив и появляется в параметрах функций и при деструктуризации массивов.


Далее рассмотрим spread оператор.


Spread оператор


Spread оператор действует противоположно rest параметру. В свободной трактовке оператор принимает массив и разворачивает его в разделенный запятыми список аргументов.


let array = ['one', 'two', 'three'];
// Ниже строки кода равнозначны
console.log(...array); // one two three
console.log('one', 'two', 'three'); // one two three

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


Допустим, необходимо объединить следующие массивы:


let array1 = ['one', 'two'];
let array2 = ['three', 'four'];
let array3 = ['five', 'six'];

В ES5 для конкатенации массивов используется метод Array.concat. Для объединения множества массивов составляется цепь следующим образом:


// ES5
let combinedArray = array1.concat(array2).concat(array3);
console.log(combinedArray) // ['one', 'two', 'three', 'four', 'five', 'six'];

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


// ES6
let combinedArray = [...array1, ...array2, ...array3];
console.log(combinedArray); // ['one', 'two', 'three', 'four', 'five', 'six']

Spread оператор также может применяться для удаления элемента из массива без видоизменения массива. Этот метод распространен в Redux. Рекомендую вам посмотреть видео от Dan Abramov, чтобы разобраться, как это работает.


Расширенные литералы объектов


Расширенные литералы объектов в ES6 привносят три усовершенствования. К ним относятся:


  1. сокращения для значений свойств,
  2. сокращения для методов,
  3. возможность использовать вычисляемые имена свойств.

Рассмотрим каждое из них.


Сокращение для значений свойств


Замечали ли вы, что иногда записываете в свойство объекта переменную с именем, совпадающим с названием свойства объекта? Это показано на следующем примере:


const fullName = 'Zell Liew';
const Zell = {
  fullName: fullName
}

В таких ситуациях вам бы хотелось писать код короче?


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


Это выглядит следующим образом:


const fullName = 'Zell Liew';
// ES6
const Zell = {
  fullName
}
// То, что выполняет ES6:
const Zell = {
  fullName: fullName
}

Сокращения для методов


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


const anObject = {
  aMethod: function () { console.log("I'm a method!~~")}
}

Сокращениями для методов в ES6 является то, что удаление : function из объявления метода не нарушает его работу:


const anObject = {
  // ES6
  aShorthandMethod (arg1, arg2) {},
  // ES5
  aLonghandMethod: function (arg1, arg2) {},
}

С этим усовершенствованием объекты уже получают сокращение для метода, поэтому не рекомендую использовать стрелочные функции при объявлении объектов, т.к. это нарушит контекст this (вернитесь к разделу по стрелочным функциям, если не помните, почему так происходит).


const dontDoThis = {
  // Не следует так писать:
  arrowFunction: () => {}
}

Теперь перейдем к последнему усовершенствованию объектов.


Вычисляемые имена свойств объектов


Иногда возникает необходимость в динамическом имени свойства при создании объектов. Раньше вам бы пришлось создать объект, а затем внести свойство следующим способом:


// ES5
const newPropertyName = 'smile';
// Сначала создать объект
const anObject = { aProperty: 'a value' }
// Затем записать свойство
anObject[newPropertyName] = ':D';
// Добавление немного другого свойства в объект
anObject['bigger ' + newPropertyName] = 'XD';
// Результат
// {
//   aProperty: 'a value',
//   'bigger smile': 'XD'
//   smile: ':D',
// }

В ES6 нет необходимости в таком «обходном пути», т.к. существует возможность назначить динамическое имя свойства напрямую при создании объекта. В тоже время важно обернуть динамическое свойство в квадратные скобки:


const newPropertyName = 'smile';
// ES6
const anObject = {
  aProperty: 'a value',
  // Динамические названия свойств
  [newPropertyName]: ':D',
  ['bigger ' + newPropertyName]: 'XD',
}
// Результат
// {
//   aProperty: 'a value',
//   'bigger smile': 'XD'
//   smile: ':D',
// }

Это всё, что касалось расширенных литералов объектов. Далее рассмотрим другую полезную особенность: шаблонные строки.


Шаблонные строки


Работа со строками в JavaScript крайне тяжелый процесс. Мы сталкивались с этим при создании функции announcePlayer в разделе про параметры по умолчанию. Ниже в коде созданы пробелы с пустыми строками, которые объединены сложением:


function announcePlayer (firstName, lastName, teamName) {
  console.log(firstName + ' ' + lastName + ', ' + teamName);
}

В ES6 эта проблема решается шаблонными литералами (в спецификации они ранее назывались шаблонными строками).


Для создания шаблонного литерала необходимо обернуть строки в обратные апострофы. Внутри обратных апострофов используется специальный указатель ${}, в котором можно писать JavaScript код.


Ниже пример того, как это выглядит в действии:


const firstName = 'Zell';
const lastName = 'Liew';
const teamName = 'unaffiliated';
const theString = `${firstName} ${lastName}, ${teamName}`;
console.log(theString);
// Zell Liew, unaffiliated

Таким образом, появилось возможность составлять различные комбинации с помощью шаблонных литералов, что напоминает использование шаблонизатора.


Самой полезной особенностью шаблонных литералов является возможность создания многострочных строк. Ниже представлен пример:


const multi = `One upon a time,
In a land far far away,
there lived a witich,
who could change night into day`;



Такие строки могут быть использованы для создания HTML элементов в JavaScript коде (это не лучший способ создания HTML элементов, но лучше, чем их создание один за одним по отдельности).


const container = document.createElement('div');
const aListOfItems =
  `<ul>
    <li>Point number one</li>
    <li>Point number two</li>
    <li>Point number three</li>
    <li>Point number four</li>
  </ul>`;
container.innerHTML = aListOfItems;
document.body.append(container);

Другой особенностью шаблонных литералов являются теги. Теги — это функции, которые позволяют манипулировать шаблонным литералом для замены любой строки.


Ниже пример:


const animal = 'lamb';
// Ниже тег
const tagFunction = () => {
  // ваш код
}
// Функция tagFunction позволяет манипулировать шаблонным литералом
const string = tagFunction `Mary had a little ${animal}`;

Если быть честным, то несмотря на то, что шаблонные теги производят впечатление, у меня до сих пор не возникло ситуации для их применения. С целью их более детального изучения рекомендую прочитать материал на MDN.


Вывод


Это были все особенности ES6, которые использую на регулярной основе. Определенно стоит потратить немного своего времени и изучить их, чтобы понимать, что вокруг пишут другие.

Поделиться публикацией

Похожие публикации

Комментарии 18

  • НЛО прилетело и опубликовало эту надпись здесь
      +5

      Создание массива это лишняя сложная операция
      Присваивание будет работать априори быстрее
      Да и выглядит этот кусок паршиво

        +1
        Вообще-то при деструктуризации тоже создаётся лишний массив.
        0
        без дополнительной переменной, для чисел:
        let a = 5
        let b = 8
        a = a+b
        b = a-b // 5
        a = a-b // 8
          0
          let a = 2**53
          let b = 1
          a = a+b
          b = a-b
          a = a-b
          b == 2**53 // false
          
            0
            Что поделать. У вас счёт в банке в зимбабвийских деньгах. Мантисса переполнена.
          +1
          Но ведь строчка:
          [a, b] = [b, a];

          выглядит проще и понятнее.
          0
          Деструктуризация объектов, AFAIK, в набор именно ES6 не входит, а является одним из предложений stage-3. И хром например только-только начал его поддерживать нативно.
            0
            Вы путаете деструктуризацию объектов — это присваивание значений переменных вида

            var {x, y} = { x: 5, y: 10};

            и object rest/spread — это расширение объектов или присвоение оставшихся свойств при деструктуризации с помощью того самого многоточия (примеры по ссылке).

            Деструктуризация появилась в ES6 и уже поддерживается всеми браузерами. Object rest/spread — действительно относительно свежая штука, которая только в третьей фазе (и по всей вероятности будет принята).
            +1
            это не лучший способ создания HTML элементов
            А какой способ считается лучше, без использования сторонних библиотек?
              0
              Возможно имелся ввиду DocumentFragment с добавлением через document.createElement()
                0
                В браузерах DocumentFragment уже давно ничего не ускоряет. Это разве что удобная абстракция, когда надо вставить сразу ряд элементов (созданных методами DOM) скопом.
              +1
              Спасибо! Ещё в тему, во многом о том же самом: Памятка по современному JavaScript
                0
                // Ниже строки кода равнозначны
                console.log(...array); // one two three
                console.log('one', 'two', 'three'); // one two three

                дотошность вкл: неа, вторая строчка не равнозначна первой, ей равнозначна
                console.log(array[0],array[1],array[2]); 

                :)

                а с "Сокращение для значений свойств" будем ловить новые неожиданные приключения, как ловили в отсутствии let и strict :)
                  0

                  Если уж дотошничать, то до конца. Первой строке будет равнозначно следующее:


                  console.log.apply(console, array)

                  Ну и не стоит забывать, что spread работает на итераторах, то есть если вникать в работу, то там не array[0], а что-то в духе array[Symbol.iterator]().next().value.

                  0

                  С недавних пор начал копать React и эти ES6 штучки настолько удобны, что когда возвращаешься рефакторить старые проекты с jQuery без зависимостей, модулей, стрелочных функций, let и const начинаешь плакать кровавыми слезами, хотя еще пол года кивал над словами коллеги — нафиг все эти сложности — jQuery рулит.

                    0

                    Про применение spread к объектам ничего не сказано. Работает как Object.assign.

                      0

                      Это не es6

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое