ECMAScript 6 – 10 потрясающих новых функций

Знаете ли вы, что JavaScript (наряду с JScript и ActionScript) является реализацией спецификации языка сценариев общего назначения на стороне клиента, называемой ECMAScript? Чтобы сделать это противное определение более привлекательным, мы можем сказать, что ECMAScript (или официально ECMA-262) – это стандарт, который определяет, как мы используем JavaScript и что мы можем сделать с его помощью.

Последнее, шестое издание языка, ECMAScript 2015 (или ES6), вероятно, является наиболее значительным обновлением со времени первой версии в 1997 году. Основная цель последнего выпуска – обеспечить лучшую поддержку для создания более крупных приложений и библиотек. Это означает более зрелый синтаксис, новые ярлыки, облегчающие кодирование, а также новые методы, ключевые слова, типы данных и многие другие улучшения.

ES6 документация обширна, если вы хотите много читать, вы можете скачать целые характеристики с сайта ECMA International. В этой статье мы рассмотрим 10 отобранных функций, хотя ES6 может предложить гораздо больше. Если вы хотите поэкспериментировать с этим, ES6 Fiddle это отличное место для этого, и вы также можете найти там несколько примеров кода.
Поддержка ECMAScript 6
Поставщики браузеров постепенно добавляют поддержку функций ECMAScript 6. Вы можете найти классную таблицу совместимости Вот о поддержке браузером и компилятором новых функций.

Если вы заинтересованы в поддержке ES6 в Node.js, ознакомьтесь с документацией Вот,

Хотя в настоящее время поддерживаются не все функции, мы можем использовать галдеж перенести наш код ES6 в ES5. Там круто Плагин Grunt для Babelмного классных ES6 плагины для Gruntи удивительный Плагин Gulp-Babel там, к счастью, у нас есть много вариантов.

Таким образом, мы можем начать использовать расширенный синтаксис и возможности, при этом нам не нужно беспокоиться о проблемах совместимости. Теперь давайте посмотрим на особенности.
ИЗОБРАЖЕНИЕ: Github1. Новое пусть ключевое слово
ES6 представляет новое ключевое слово let, которое позволяет нам объявлять локальные переменные в области видимости блока, такие как оператор, выражение или (n внутренняя) функция. Например, мы можем объявить цикл for следующим образом, а затем повторно использовать то же имя переменной (поскольку его область ограничена циклом for) внутри следующего оператора if:

для (пусть я = 0; я < myArray.length; i++) {

// Do something inside the block

}

if (x > 0 && x! = Y) {

// Мы повторно используем «я»
пусть я = х * у
}
Использование ключевого слова let позволяет получить более понятный и удобный код. Разница между let и var заключается в области видимости, например, локальная переменная, определяемая ключевым словом var, может использоваться во всей включающей функции, тогда как переменные, определенные с помощью let, работают только в своем (суб) блоке. Пусть также может использоваться глобально, в этом случае он ведет себя так же, как и var. Конечно, в ES6 мы все еще можем использовать var, если захотим.
2. Новое ключевое слово const
Новое ключевое слово const позволяет объявлять константы, также известные как неизменяемые переменные, которым мы не можем переназначить новое содержимое позже.

const MY_CONST = 12;
console.log (MY_CONST);
// 12

MY_CONST = 16;
// Silent error, так как мы не можем переназначить новое значение на константу
Неизменяемые переменные не всегда полностью неизменны в ECMAScript 6, хотя, как если бы константа содержала объект, мы можем позже изменить значение его свойств и методов. То же самое верно для элементов массива.

const MY_CONSTANT = {myProperty: 6};
console.log (MY_CONSTANT.myProperty);
// 6

MY_CONSTANT.myProperty = 18;
console.log (MY_CONSTANT.myProperty);
// 18

const OTHER_CONSTANT = [12, 14, 16];
console.log (OTHER_CONSTANT[0]);
// 12

OTHER_CONSTANT[0] = 22;
console.log (OTHER_CONSTANT[0]);
// 22
Мы все еще не можем напрямую переназначить новое значение объекту MY_CONSTANT в приведенном выше фрагменте кода, что означает, что мы не можем изменить имена свойств и методов, а также не можем добавить новое или удалить существующее, поэтому мы не можем сделать следующая вещь:

MY_CONSTANT = {newProperty: 18};
console.log (MY_CONSTANT.newProperty);
// ошибка
3. Функции стрелок
ECMAScript 6 облегчает то, как мы пишем анонимные функции, поскольку мы можем полностью опустить ключевое слово function. Нам нужно использовать только новый синтаксис для функций со стрелками, названный в честь знака со стрелкой => (жирная стрелка), что дает нам отличный ярлык.

// 1. Один параметр в ES6
let sum = (a, b) => a + b;

// в ES5
var sum = function (a, b) {
вернуть a + b;
};

// 2. Без параметров в ES6
let randomNum = () => Math.random ();

// в ES5
var randomNum = function () {
return Math.random ();
};

// 3. Без возврата в ES6
let message = (name) => alert (“Hi” + name + “!”);

// в ES5
var message = function (yourName) {
alert (“Привет” + yourName + “!”);
};
Существует важное различие между обычными функциями и функциями со стрелками, то есть функции со стрелками не получают это значение автоматически, как функции, определенные с помощью ключевого слова function. Функции стрелок лексически связывают значение this с текущей областью действия. Это означает, что мы можем легко использовать ключевое слово this во внутренней функции. В ES5 это возможно только при следующем взломе:

// ES5 Hack для использования ключевого слова this во внутренней функции
{
  …
  addAll: функция addAll (штук) {
    var self = this;
    _.each (части, функция (часть) {
      self.add (часть);
    });
  },
  …
}

// ES6 та же самая внутренняя функция теперь может использовать свое собственное “this”
{
  …
  addAll: функция addAll (штук) {
    _.each (piece, piece => this.add (piece));
  },
  …
}
Код выше от Mozilla Hacks

1. Новый оператор распространения
   Новый оператор распространения помечен 3 точками (…), и мы можем использовать его для обозначения места нескольких ожидаемых элементов. Одним из наиболее распространенных случаев использования оператора распространения является вставка элементов массива в другой массив:

let myArray = [1, 2, 3];

let newArray = […myArray, 4, 5, 6];

console.log (newArray);
// 1, 2, 3, 4, 5, 6

Мы также можем использовать оператор распространения в вызовах функций, в которых мы хотим передать аргументы из массива:

let myArray = [1, 2, 3];

сумма функций (a, b, c) {
вернуть a + b + c;
}

console.log (сумма (… туАггау));
// 6
Оператор распространения достаточно гибкий, так как его можно использовать несколько раз в одном и том же массиве или при вызове функции.
5. Значения по умолчанию для параметров и новых параметров покоя
Хорошая новость, что в ECMAScript 6 мы можем добавить значения по умолчанию к параметрам функции. Это означает, что если мы не передадим аргументы позже в вызове функции, будут использованы параметры по умолчанию. В ES5 значения параметров по умолчанию всегда устанавливаются на неопределенные, поэтому новая возможность установить их на то, что мы хотим, определенно является большим улучшением языка.

сумма функций (a = 2, b = 4) {
вернуть a + b;
}

console.log (sum ());
// 6

console.log (сумма (3, 6));
// 9
ES6 также вводит новый тип параметров, остальные параметры. Они выглядят и работают аналогично для распространения операторов. Они пригодятся, если мы не будем знать, сколько аргументов будет передано позже при вызове функции. Мы можем использовать свойства и методы объекта Array для остальных параметров:

function putInAlphabet (… args) {
  
  let sorted = args.sort ();
  возврат отсортирован;
  
}

console.log (putInAlphabet (“e”, “c”, “m”, “a”, “s”, “c”, “r”, “i”, “p”, “t”));
// a, c, c, e, i, m, p, r, s, t
6. Новое для … заявления
С помощью нового цикла for … мы можем легко перебирать массивы или другие итерируемые объекты. Наряду с новым оператором for … оператора ECMAScript 6 также вводит два новых итерируемых объекта: карта для карт ключ / значение и Набор для коллекций уникальных значений, которые также могут быть примитивными значениями и ссылками на объекты. Когда мы используем оператор for … of, код внутри блока выполняется для каждого элемента итерируемого объекта.

let myArray = [1, 2, 3, 4, 5];
пусть сумма = 0;

for (пусть я из myArray) {
сумма + = я;
}

console.log (сумма);
// 15 (= 1 + 2 + 3 + 4 + 5)
7. Шаблонные литералы
ECMAScript 6 предоставляет нам новую альтернативу для конкатенации строк. Шаблонные литералы позволяют нам легко создавать шаблоны, в которые мы можем встраивать различные значения в любое место, которое мы хотим. Для этого нам нужно использовать синтаксис $ {…} везде, где мы хотим вставить данные, которые мы можем передать из переменных, массивов или объектов, следующим образом:

let customer = {title: ‘Ms’, имя: ‘Jane’, фамилия: ‘Doe’, возраст: ’34’};

let template = Уважаемый $ {customer.title} $ {customer.firstname} $ {customer.surname}!
С Днем Рождения {$ customer.age}!;

console.log (шаблон);
// Дорогая мисс Джейн Доу! С 34-м Днём Рождения!
8. Классы
ES6 представляет классы JavaScript, основанные на существующем наследовании на основе прототипов. Новый синтаксис упрощает создание объектов, использование наследования и повторное использование кода. Это также облегчит начинающим, прибывшим с других языков программирования, понимание того, как работает JavaScript.

В ES6 классы объявляются с ключевым словом new class и должны иметь метод constructor (), который вызывается, когда создается новый объект с использованием нового синтаксиса myClass (). Также возможно расширить новые классы с помощью класса Child, расширяющего синтаксис Parent, который может быть знаком по другим объектно-ориентированным языкам, таким как PHP. Также важно знать, что, в отличие от объявлений функций и переменных, объявления классов НЕ используются в ECMAScript 6.

класс Polygon {
constructor (высота, ширина) {// конструктор класса
this.name = ‘Polygon’;
this.height = высота;
this.width = ширина;
}

sayName () {// метод класса
console.log («Привет, я a», this.name + ‘.’);
}
}

let myPolygon = new Polygon (5, 6);

console.log (myPolygon.sayName ());
// Привет, я многоугольник.
Код выше от ES6 Fiddle Примеры.
9. Модули
Задумывались ли вы о том, как было бы здорово, если бы JavaScript был модульным? Конечно, были обходные пути, такие как CommonJS (используется в Node.js) или AMD (определение асинхронного модуля) (используется в RequireJS), чтобы сделать это раньше, но ES6 представляет модули как встроенную функцию.

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

// functions.js

куб функции (а) {
вернуть a * a * a;
}

function cubeRoot (a) {
вернуть Math.cbrt (a);
}

export {cube, cubeRoot}
// или: export {cube as cb, cubeRoot as cr}

// app.js

import {cube, cubeRoot} из «функций»;

console.log (куб (4));
// 64

console.log (cubeRoot (125));
// 5
Это блестящее решение, так как код, хранящийся в модуле, невидим извне, и нам нужно экспортировать только ту часть, к которой мы хотим получить доступ из других файлов. Мы можем сделать гораздо больше удивительных вещей с модулями ES6, Вот Вы можете найти большое и подробное объяснение о них.

1. Множество новых методов
   ECMAScript 6 представляет множество новых методов для существующего String Prototype, Array Object, Array Prototype и Math Object. Новые методы могут значительно улучшить способ манипулирования этими объектами. Mozilla Dev имеет большой примеры кода Из новых дополнений стоит потратить время и тщательно их изучить.

Просто чтобы показать, насколько они крутые, вот мой любимый: найти метод прототипа Array, который позволяет нам тестировать определенные критерии для элементов массива, выполняя функцию обратного вызова для каждого элемента, а затем возвращая первый элемент, который возвращает true.

function isPrime (element, index, array) {
  var start = 2;
  while (start <= Math.sqrt (element)) {
    if (элемент% start ++ < 1) {
return false;
}
}
return element > 1;
}

console.log ([4, 6, 8, 12].find (IsPrime));
// не определено, не найдено

console.log ([4, 5, 8, 12].find (IsPrime));
// 5
Код выше из: Mozilla Dev