Программирование

10 лучших функций JavaScript ES6

ES6 Параметры по умолчанию

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

01
из 10

Параметры по умолчанию

ES6 Параметры по умолчанию

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;
}
04
из 10

Блок Область для Let и Const

ES6 Block Scope

ES6 Block Scope.

Снимок экрана


До 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.

06
из 10

Новые функции массива

ES6 Array Функции

ES6 Array Функции.

Снимок экрана


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

для каждого

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

номера 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, но это, вероятно, те, которые вы будете использовать чаще всего.

07
из 10

Стрелка Функции

ES6 Arrow Функции

ES6 Arrow Функции.

Снимок экрана


Если вы работали с Coffeescript, вы должны быть знакомы с функциями стрелок. Теперь они получили доступ к JavaScript с ES6.

Функции стрелок имеют два основных преимущества, для которых большинство людей будут использовать их. Во-первых, они упрощают ваш синтаксис и сокращают общий объем кода, который вам нужно написать для функции. Затем они не дают «этому» измениться. Он останется в той же области, что и функция, использующая его, что сделает его гораздо более эффективным для взаимодействия DOM, например, нажатия кнопок.

Основная функция:

var timesTwo = число => число * 2; 
timesTwo (8)

Функция стрелки использует параметры в строке и опирается на неявный оператор возврата. Это также работает с различным количеством параметров.

var multiply = (x, y) => x * y;

Из-за легкого синтаксиса функции стрелок также являются отличным вариантом для анонимных функций.

Для «этого» у вас также есть более легкое время, потому что нет никакого беспокойства о мутации или потере возможности.

$ ('. btnSend'). click ((событие) => { 
this.sendMail ();
});

Общий синтаксис упрощен.

10
из 10

обещания

ES6 Promises

ES6 обещает.

Снимок экрана


Обещания в каком-то странном месте. Из всего этого списка они единственные, которые действительно увеличивают количество строк вашего кода . Это не обязательно плохо, хотя. Обещания направлены на создание инфраструктуры для асинхронного кода. Они предназначены для упрощения вещей в долгосрочной перспективе. Тем не менее, если вы не пишете кучу асинхронного кода или не вкладываете тайм-ауты, нет реальной причины, по которой старая функция setTimeout не будет работать.

До ES6:

setTimeout (functon () { 
console.log ('Время истекло!');
}, 1000);

После ES6:

var asyncPromise = new Promise ((разрешить, отклонить) => { 
console.log ('Первым делом асинхронно ...');
resol ();
}). then (() => {
console.log ('Делать что-то еще ... ');
})

Это случай чего-то, что может быть очень полезным или не полезным вообще, в зависимости от того, над чем вы работаете.

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика