Join
@metacode
September 28, 2018

7 бомбических фишек ES6 с примерами

Привет, ребята!

Хотите прямо сейчас ох**ть от возможностей ES6? Я знаю что ES6 — это не новое слово в JavaScript, ведь оно появилось в обиходе еще в далеком 2015 году.

ES6 — EcmaScript 6, стандарт, который был принят в июне 2015. На текущий момент его поддерживают все современные браузеры.

Но, для тех кто все еще “не в теме” — был собран сухой материал чтобы сразу отсечь все лишнее.

Приятного прочтения!

let, const и блочная область видимости

Ключевое слово let и const позволяет объявлять переменные с ограниченной областью видимости — только для блока {...}, в котором происходит объявление. Это называется блочной областью видимости.

Пример:

var a = 2;
{
    let a = 3;
    console.log(a); // 3
}
console.log(a); // 2

Другой формой объявления переменной с блочной областью видимости является ключевое слово const. Оно предназначено для объявления переменных (констант), значения которых доступны только для чтения. Это не означает что значение константы неизменно, это значит что идентификатор переменной не может быть присвоен заново.

Пример:

{
    const ARR = [5, 6];
    ARR.push(7);
    console.log(ARR); // [5,6,7]
    ARR = 10; // TypeError
    ARR[0] = 3; // значение можно менять
    console.log(ARR); // [3,6,7]
}

Вывод:

  • Стандарт ES6 рекомендует использовать let и const в приложениях вместо var.
  • Когда дело касается поднятия переменных (hoisting) let и const, их поведение отличается от традиционного поведения var и function. И let и const не существуют до своего объявления
  • Областью видимости let и const является ближайший блок {}.
  • При использовании const рекомендуется использовать UPPER_CASE_NAME.
  • В const одновременно с объявлением переменной должно быть присвоено значение.

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

Помните, что нам приходилось выполнять эти инструкции для определения параметров по умолчанию

var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://metacode.in'
    ...
}

Этот формат крайне нечитабелен, а что если аргументов будет на 10 больше? В языках Java или PHP возможно ставить параметры по умолчанию — в JavaScript нет. Но, теперь мы не будем это терпеть! В ES6 можно ставить значения по умолчанию в аргументы функции.

Пример:

var link = function(height = 50, color = 'red', url = 'http://metacode.in') {
  ...
}

Кстати, этот синтаксис похож на Ruby!

Литералы шаблонов

Литералы шаблонов — способ вывода переменных в строку. В ES5 нам приходилось собирать строку следующим образом:

var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id;

К счастью, в ES6 мы можем использовать новый синтаксис ${NAME}.

Пример:

var name = `Your name is ${first} ${last}.`;
var url = `http://localhost:3000/api/messages/${id}`;

Многострочные строки

Еще один вкусный синтаксический сахар — многострочная строка. В ES5 нам пришлось использовать один из этих подходов:

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'
В ES6 для такой задачи просто используйте символы тильды:

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

Деструкторы

Деструкторы поначалу могут казаться сложным понятием, потому в нем есть какая-то магия... Есть случаи, когда нужно взять необходимые ключи из объекта.

Пример:

var data = $('body').data(), // У data есть свойства house и mouse
    house = data.house,
    mouse = data.mouse;

Рассмотрим другой пример деструктуририрования (из Node.js)

Пример:

var { house, mouse } = $('body').data() // возьмем house и mouse переменные
var { json: jsonMiddleware } = require('body-parser')
var { username, password } = req.body

Деструкторы также работает с массивами. Безумие!

Пример:

var [col1, col2]  = $('.column'),
    [line1, line2, line3, , line5] = file.split('\n')

Может потребоваться некоторое время, чтобы использовать синтаксис назначения деструктуризации но, оно того стоит!

Spread / Rest оператор

... оператор называют как spread или rest, в зависимости от того, как и где он используется.

При использовании в любом итерируемом объекте (iterable), данный оператор "разбивает" ("spread") его на индивидуальные элементы.

Пример:

function foo(x, y, z) {
    console.log(x, y, z);
}
let arr = [1, 2, 3];
foo(...arr); // 1 2 3

Другим распространенным использованием оператора ... является объединение набора значений в один массив. В данном случае оператор работает как "rest"

Пример:

function foo(...args) {
    console.log(args);
}
foo(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Промисы

В ES6 появилась встроенная поддержка промисов. Промис это объект, который ждёт выполнения асинхронной операции, после которого (т.е. после выполнения) промис принимает одно из двух состояний: fulfilled (resolved, успешное выполнение) или rejected (выполнено с ошибкой).

Стандартным способом создания промиса является конструктор new Promise(), который принимает обработчик с двумя функциями как параметрами. Первый обработчик (обычно именуемый resolve) представляет собой функцию для вызова вместе с будущим значением, когда оно будет готово; второй обработчик (обычно именуемый reject) является функцией, которая вызывается для отказа от выполнения промиса, если он не может определить будущее значение.

Пример:

var p = new Promise(function(resolve, reject) {  
    if (/* условие */) {
        resolve(/* значение */);  // fulfilled successfully (успешный результат)
    } else {
        reject(/* reason */);  // rejected (ошибка)
    }
});

Каждый промис обладает методом then, в котором есть два коллбэка. Первый коллбэк вызывается, если промис успешно выполнен (resolved), тогда как второй коллбэк вызывается, если промис выполнен с ошибкой (rejected).

Пример:

p.then((val) => console.log("Промис успешно выполнен", val),
       (err) => console.log("Промис выполнен с ошибкой", err));

При возвращении значения от then коллбэки передадут значение следующему коллбэку then.

Пример:

var hello = new Promise(function(resolve, reject) {  
    resolve("Привет");
});
hello.then((str) => `${str} Мир`)
     .then((str) => `${str}!`)
     .then((str) => console.log(str)) // Привет Мир!

При возвращении промиса, успешно обработанное значение промиса пройдёт к следующему коллбэку, для того, чтобы эффективно соединить их вместе.

Эта простая техника помогает избежать ада с коллбэками ("callback hell").

Пример:

var p = new Promise(function(resolve, reject) {  
    resolve(1);
});
var eventuallyAdd1 = (val) => {
    return new Promise(function(resolve, reject){
        resolve(val + 1);
    });
}
p.then(eventuallyAdd1)
 .then(eventuallyAdd1)
 .then((val) => console.log(val)) // 3

Только что вы узнали примерно 30% всех возможностей ES6. Следите за нами дальше и вы узнаете еще больше!

Понравилась статья? Подписывайтесь на наш Телеграмм канал чтобы следить за последними новостями из мира JavaScript: https://t.me/metacode_ru

@iryna.masanskaya
September 28, 2018, 09:11
0 views
0 reactions