JavaScript ES6 добился огромных успехов в том, чтобы сделать JavaScript более удобным для пользователя . В нем реализованы функции, которые разработчики ожидают от современного языка, и некоторые, которые просто облегчают жизнь программистам. Это лучшие новые функции, которые появятся в JavaScript с ES6.
Параметры по умолчанию
Это довольно стандартная практика — устанавливать параметры по умолчанию для автоматического заполнения ключевых значений функции, но до ES6 опция не была доступна в JavaScript. Вместо этого вам нужно было определить свои собственные значения по умолчанию с помощью хака своего рода в самой функции. В ES6 вы можете установить параметры по умолчанию, как в большинстве других языков.
До ES6:
функция умножения (x, y) {
var a = x || 1;
var b = y || 1;
вернуть a * b;
}
После ES6:
функция умножения (x = 1, y = 1) {
return x * y;
}
Шаблонные литералы
Шаблонные литералы — еще одно важное удобство при работе со строками. Шаблонные литералы — это еще одна особенность, распространенная в других языках, которая позволяет вставлять переменные непосредственно в строки. До ES6 вам приходилось полагаться на несколько запутанную конкатенацию строк для достижения аналогичного эффекта, и полученный код был совсем не чистым.
До ES6:
var приветствие = "Привет" + первый + "" + последний + "! Добро пожаловать!";
После ES6:
var приветствие = "Привет, $ {first} $ {last}! Добро пожаловать!";
Многострочные строки
Многострочные строки могут не быть основным фактором удобства использования, но они очень удобны, особенно при работе с большим количеством текста. Поскольку JavaScript является веб-языком, обработка текста является обычной, поэтому любое улучшение юзабилити может иметь большое значение. Как и в случае литералов шаблонов, эффект многострочных строк был достигнут с помощью конкатенации строк до ES6. Теперь вы можете получить многострочные строки, инкапсулировав все это между двумя обратными галочками.
До ES6:
var multiline = "Эта строка вроде \ n"
+ ", как многострочная строка, \ n"
+ ", но на самом деле она не одна."
После ES6:
var multiline = `С другой стороны, это на
самом деле многострочная строка,
благодаря JavaScript ES6`
Блок Область для Let и Const
До ES6 блоки действительно ничего не делали с переменными. Все было глобально с var, и это все еще так, но пусть и const предоставляют способы объявления и назначения переменных в пределах блока. Пусть ведет себя в основном как var, но с размахом. Const является неизменной константой, но поскольку она ограничена, вы можете повторно использовать одну и ту же константу в разных блоках, и они не будут мешать.
До ES6:
функция scopetest {
var x = 10;
{
var x = 100;
}
{
var x = "Это даже строка!";
}
return x;
}
console.log (scopetest ());
Это на самом деле возвращает строку!
После ES6:
функция scopetest {
let x = 10;
{
пусть х = 100;
}
{
let x = "Это даже строка!";
}
return x;
}
console.log (scopetest ());
Исходное значение возвращается на этот раз, потому что оно единственное, объявленное в той же области видимости. Конечно, это надуманные примеры, но должно быть понятно, как полезно использование scoping with let.
Истинные Классы
JavaScript ES6, наконец, привносит истинный объектно-ориентированный дизайн классов в JavaScript, дополненный ключевыми словами «класс» и «конструктор». ES6 также принес с собой простой способ наследования от одного класса к другому, используя ключевые слова «extends». Теперь JavaScript ведет себя гораздо более похоже на другие объектно-ориентированные языки.
Теперь вы можете создавать и расширять классы в ES6 следующим образом:
class Book {
constructor (title, author, pages) {
this.title = title;
this.author = автор;
this.pages = страниц;
}
function getPageCount () {
return this.pages;
}
function getAuthor () {
return this.author;
}
function getTitle () {
return this.title;
}
}
класс Novel extends Book {
constructor (название, автор, страницы, жанр) {
super (название, автор, страницы);
this.genre = жанр;
}
function getGenre () {
return this.genre;
}
}
let book = new Novel («Хоббит», «Дж. Р. Р. Толкиен», 310, «Фэнтези»);
console.log (book.getAuthor ());
Новые функции массива
Вообще говоря, функции массива обычно не нужны в языке, но они делают вещи проще. Эти вспомогательные функции сокращают общий объем вашего кода и избавляют вас от написания и переписывания похожих шаблонов Таким образом, хотя вспомогательные функции массива не будут создавать или разрушать ваш код, на самом деле они могут помешать вам нарушить ваш код.
для каждого
Этот не соответствует шаблону, который вы, вероятно, думаете, «для х в массиве», но его можно использовать аналогичным образом. Он перебирает массив и передает значения из этого массива в назначенную функцию.
номера var = [1, 2, 3, 4, 5];
function timesTwo (число) {
console.log (число * 2);
}
numbers.forEach (timesTwo);
карта
Функции карты довольно распространены. Они позволяют выполнить действие для каждого элемента в массиве и создать новый массив, содержащий результаты.
номера var = [1, 2, 3, 4, 5];
function timesTwo (number) {
return number * 2;
}
var doubleNumbers = numbers.map (timesTwo);
console.log (doubleNumbers);
фильтр
Функция ‘filter’ проверяет каждый элемент в массиве, чтобы увидеть, соответствует ли он определенному условию, и добавляет его в новый массив, если это так. При этом создается новое подмножество исходного массива.
номера var = [1, 2, 3, 4, 5];
function isOdd (number) {
if (number% 2) {
return number;
}
}
var oddNumbers = numbers.filter (isOdd);
console.log (oddNumbers);
В ES6 добавлено еще несколько функций массива, например, any, some и find, но это, вероятно, те, которые вы будете использовать чаще всего.
Стрелка Функции
Если вы работали с Coffeescript, вы должны быть знакомы с функциями стрелок. Теперь они получили доступ к JavaScript с ES6.
Функции стрелок имеют два основных преимущества, для которых большинство людей будут использовать их. Во-первых, они упрощают ваш синтаксис и сокращают общий объем кода, который вам нужно написать для функции. Затем они не дают «этому» измениться. Он останется в той же области, что и функция, использующая его, что сделает его гораздо более эффективным для взаимодействия DOM, например, нажатия кнопок.
Основная функция:
var timesTwo = число => число * 2;
timesTwo (8)
Функция стрелки использует параметры в строке и опирается на неявный оператор возврата. Это также работает с различным количеством параметров.
var multiply = (x, y) => x * y;
Из-за легкого синтаксиса функции стрелок также являются отличным вариантом для анонимных функций.
Для «этого» у вас также есть более легкое время, потому что нет никакого беспокойства о мутации или потере возможности.
$ ('. btnSend'). click ((событие) => {
this.sendMail ();
});
Общий синтаксис упрощен.
Улучшенные литералы объектов
Объектные литералы также получили повышение читабельности. Это может быть не так сильно, как некоторые другие улучшения, но это определенно помогает. Ранее вам приходилось пересчитывать переменные, чтобы связать их со свойствами объекта. Теперь JavaScript автоматически связывает значение с именем переменной.
До ES6:
функция showBookInfo (название, автор, жанр) {
return {
title: название,
автор: автор,
жанр: жанр
}
}
console.log (showBookInfo («Хоббит», «Дж.Р.Р. Толкин», «Фэнтези»));
После ES6:
function showBookInfo (title, author, genre) {
return {
title,
author,
genre
}
}
console.log (showBookInfo ("Хоббит", "Дж. Р. Р. Толкиен", "Фэнтези"));
Это не большая разница, но это определенно помогает.
деструктурирующие
Разрушение гораздо сложнее, чем кажется. Это сокращенный способ извлечения переменных и связанных с ними значений из объектов и массивов. В JavaScript ES5 вам нужно будет выписывать имя объекта, из которого вы извлекаете значения, каждый раз, когда вы хотите создать новую переменную.
До ES6:
var randomData = {a: 12, b: false, c: 'blue'};
var a = randomData.a;
var c = randomData.c;
С деструктурой вам не нужно все это выписывать.
После ES6:
var randomData = {a: 12, b: false, c: 'blue'};
var {a, c} = randomData;
Переменные ‘a’ и ‘c’ будут созданы из данных, хранящихся в объекте.
обещания
Обещания в каком-то странном месте. Из всего этого списка они единственные, которые действительно увеличивают количество строк вашего кода . Это не обязательно плохо, хотя. Обещания направлены на создание инфраструктуры для асинхронного кода. Они предназначены для упрощения вещей в долгосрочной перспективе. Тем не менее, если вы не пишете кучу асинхронного кода или не вкладываете тайм-ауты, нет реальной причины, по которой старая функция setTimeout не будет работать.
До ES6:
setTimeout (functon () {
console.log ('Время истекло!');
}, 1000);
После ES6:
var asyncPromise = new Promise ((разрешить, отклонить) => {
console.log ('Первым делом асинхронно ...');
resol ();
}). then (() => {
console.log ('Делать что-то еще ... ');
})
Это случай чего-то, что может быть очень полезным или не полезным вообще, в зависимости от того, над чем вы работаете.