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

Данная публикация является 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);


wyb9nefj494x8dtuc3skoyyns0y.png

Arguments — Symbol (не массив)


Один из способов посчитать эту сумму аргументов состоит в том, чтобы преобразовать его в массив с помощью 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`;


v3ge_k550huiwytmxnlqzc9kheg.png

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


const container = document.createElement('div');
const aListOfItems =
  `
  • Point number one
  • Point number two
  • Point number three
  • Point number four
`; container.innerHTML = aListOfItems; document.body.append(container);


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


Ниже пример:


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


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


Вывод


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

© Habrahabr.ru