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, ознакомьтесь с документацией здесь..
Хотя в настоящее время поддерживаются не все функции, мы можем использовать такие переносчики, как Babel, для переноса нашего кода ES6 в ES5. Есть замечательный плагин Grunt для Babel, множество замечательных плагинов ES6 для Grunt и удивительный плагин Gulp-Babel, так что, к счастью, у нас есть много вариантов.
Таким образом, мы можем начать использовать расширенный синтаксис и возможности, при этом нам не нужно беспокоиться о проблемах совместимости. Теперь давайте посмотрим на особенности.
1. Новый позволять Ключевое слово
ES6 представляет новый позволять ключевое слово, которое позволяет нам объявлять локальные переменные в области видимости блока, такие как оператор, выражение или (n внутренняя) функция. Например, мы можем объявить за выполните цикл следующим образом, затем повторно используйте то же имя переменной (поскольку его область ограничена за цикл) внутри следующего если заявление:
для (пусть я = 0; я < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Мы повторно используем «i» let i = x * y
С использованием позволять Ключевое слово приводит к более чистому и удобному коду. Разница между позволять а также вар находится в области, например, локальная переменная, определенная вар Ключевое слово может быть использовано во всей функции, в то время как переменные определены позволять работать только в своем (суб) блоке. Позволять может также использоваться глобально, в этом случае он ведет себя так же, как вар. Конечно, в ES6 мы все еще можем использовать вар если мы хотим.
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 облегчает, как мы пишем анонимные функции, как мы можем полностью опустить функция ключевое слово. Нам нужно только использовать новый синтаксис для функции стрелок, назван в честь знака со стрелкой => (жирная стрелка), что дает нам отличный ярлык.
// 1. Один параметр в ES6 let sum = (a, b) => a + b; // в ES5 var sum = function (a, b) return 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 ("Hi" + yourName + "!"); ; Существует важное различие между обычными и стрелочными функциями, то есть функции стрелок не получают этот значение автоматически, как функции, определенные с функция Ключевое слово сделать. Функции стрелок лексически связывать этот значение в текущей области. Это означает, что мы можем легко использовать этот Ключевое слово во внутренней функции. В ES5 это возможно только при следующем взломе:
// ES5 Взломать использование ключевого слова this во внутренней функции … addAll: function addAll (parts) var self = this; _.each (штук, функция (штука) self.add (штука);); ,… // ES6 та же самая внутренняя функция теперь может использовать свое собственное «this» … addAll: function addAll (piece) _.each (piece, piece => this.add (piece)); ,…
Код выше взят из Mozilla Hacks
4. Новый распространение оператор
Новый распространение Оператор помечен 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]; функция sum (a, b, c) return a + b + c; console.log (sum (… myArray)); // 6
распространение Оператор достаточно гибкий, так как его можно использовать несколько раз в одном и том же массиве или вызове функции..
5. Значения по умолчанию для параметров и новых параметров покоя
Хорошая новость, что в ECMAScript 6 мы можем добавить значения по умолчанию к параметрам функции. Это означает, что если мы не передадим аргументы позже в вызове функции, будут использованы параметры по умолчанию. В ES5 значения параметров по умолчанию всегда установлены на не определено, так что новая возможность установить их на то, что мы хотим, безусловно, является большим улучшением языка.
функция sum (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (sum (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. Новый для ... из утверждение
С помощью нового для ... из В цикле мы можем легко перебирать массивы или другие итерируемые объекты. Наряду с новым для ... из В ECMAScript 6 также представлены два новых итерируемых объекта: Map для карт ключ / значение и Set для коллекций уникальных значений, которые также могут быть примитивными значениями и ссылками на объекты. Когда мы используем для ... из оператор, код внутри блока выполняется для каждого элемента итерируемого объекта.
let myArray = [1, 2, 3, 4, 5]; пусть сумма = 0; for (пусть я из myArray) sum + = i; console.log (sum); // 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 классы объявлены с новым учебный класс ключевое слово, и нужно иметь конструктор() метод, который вызывается, когда создается новый объект с помощью новый myClass () синтаксис. Также возможно расширить новые классы с помощью класс Child расширяет Parent синтаксис, который может быть знаком из других объектно-ориентированных языков, таких как PHP. Также важно знать, что, в отличие от объявлений функций и переменных, объявления классов НЕ используются в ECMAScript 6.
class Polygon constructor (height, width) // конструктор класса this.name = 'Polygon'; this.height = высота; this.width = ширина; sayName () // метод класса console.log ('Привет, я являюсь', this.name + '.'); let myPolygon = new Polygon (5, 6); console.log (myPolygon.sayName ()); // Привет, я многоугольник. Код выше из примеров ES6 Fiddle, .
9. Модули
Задумывались ли вы о том, как было бы здорово, если бы JavaScript был модульным? Конечно, были обходные пути, такие как CommonJS (используется в Node.js) или AMD (определение асинхронного модуля) (используется в RequireJS), чтобы сделать это раньше, но ES6 представляет модули как встроенную функцию.
Нам нужно определить каждый модуль в своем собственном файле, а затем использовать экспорт ключевое слово для экспорта переменных и функций в другие файлы, и Импортировать ключевое слово для их импорта от другие файлы, в соответствии со следующим синтаксисом:
// functions.js function cube (a) return a * a * a; function cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // или: export cube как cb, cubeRoot как cr // app.js import cube, cubeRoot из 'functions'; console.log (куб (4)); // 64 console.log (cubeRoot (125)); // 5
Это блестящее решение, так как код, хранящийся в модуле, невидим извне, и нам нужно экспортировать только ту часть, к которой мы хотим получить доступ из других файлов. С модулями ES6 мы можем делать гораздо больше удивительных вещей, здесь вы найдете отличное и подробное описание.
10. Множество новых методов
ECMAScript 6 представляет множество новых методов для существующего String Prototype, Array Object, Array Prototype и Math Object. Новые методы могут значительно улучшить способ манипулирования этими объектами. У Mozilla Dev есть отличные примеры кода новых дополнений, стоит потратить время и тщательно изучить их.
Просто чтобы показать, насколько они крутые, вот мой любимый: метод find прототипа Array, который позволяет нам тестировать определенные критерии для элементов массива, выполняя функцию обратного вызова для каждого элемента, а затем возвращая первый элемент, который возвращается правда.
function isPrime (element, index, array) var start = 2; время (начало <= Math.sqrt(element)) if (element % 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
