От автора: введение в ES6 синтаксис и функции, такие как классы, promises, константы, деструктуризация. А также сравнение со старыми версиями JS. ECMAScript 2015 или ES6 ввел множество изменений в JS. Это обзор самых распространенных функций и различий синтаксисов со сравнением с ES5 там, где это возможно.
Смотреть на GitHub. Заметка: общепринято использовать const, за исключением циклов и переназначений. Однако в этом уроке я буду использовать let вместо var для всех примеров ES6.
Легенда
Я не фанат foo bar baz. Ниже представлена большая часть имен, используемых в этой статье.
Переменная: x
Объект: obj
Массив: arr
Функция: func
Параметр, метод: a, b, c
Строка: str
Объявление переменных
ES6 ввел ключевое слово let, с помощью которого можно объявлять переменные с блочной областью видимости, которые нельзя поднять или переобъявить.
ES5
1 |
var x = 0; |
ES6
1 |
let x = 0; |
Объявление констант
ES6 ввел ключевое слово const, которое нельзя переобъявить или переназначить. Оно не поддается мутации.
ES6
1 |
const CONST_IDENTIFIER = 0; // constants are uppercase by convention |
Стрелочные функции
Синтаксис стрелочной функции – это более короткий способ создания функции. У стрелочной функции нет своего this, своих прототипов, их нельзя использовать для конструкторов. Также их нельзя использовать как методы объекта.
ES5
1 2 |
function func(a, b, c) {} // function declaration var func = function(a, b, c) {} // function expression |
ES6
1 2 |
let func = a => {} // parentheses optional with one parameter let func = (a, b, c) => {} // parentheses required with multiple parameters |
Шаблонные литералы
Конкатенация/строковая интерполяция
В строки шаблонных литералов можно вставлять выражения.
ES5
1 |
var str = 'Release date: ' + date; |
ES6
1 |
let str = `Release Date: ${date}`; |
Многострочные строки
Благодаря синтаксису шаблонных литералов, JS строки можно превратить в многострочные без конкатенации.
ES5
1 2 3 |
var str = 'This text ' + 'is on ' + 'multiple lines'; |
ES6
1 2 3 |
let str = `This text is on multiple lines`; |
Заметка: в многострочных шаблонных литералах сохраняются пробелы.
Явный возврат
Ключевое слово return подразумевается и может быть опущено в стрелочных функциях без тела блока.
ES5
1 |
function func(a, b, c) { return a + b + c; } |
ES6
1 |
let func = (a, b, c) => a + b + c; // curly brackets must be omitted |
Сокращение ключ/свойство
ES6 ввел сокращенную запись для присвоения свойств переменным с таким же именем.
ES5
1 2 3 4 |
var obj = { a: a, b: b } |
ES6
1 2 3 4 |
let obj = { a, b } |
Сокращенное определение метода
При присвоении методов объекту можно опустить function.
ES5
1 2 3 4 |
var obj = { a: function(c, d) {}, b: function(e, f) {} }; |
ES6
1 2 3 4 |
let obj = { a(c, d) {}, b(e, f) {} } |
1 |
obj.a(); // call method a |
Деструктуризация (сопоставление объектов)
Используйте фигурные скобки для присвоения свойств объекта его переменной.
1 |
var obj = { a: 1, b: 2, c: 3 }; |
ES5
1 2 3 |
var a = obj.a; var b = obj.b; var c = obj.c; |
ES6
1 |
let {a, b, c} = obj; |
Перебор массива в цикле
Был представлен более краткие синтаксис перебора массивов и других итерируемых объектов.
1 |
var arr = ['a', 'b', 'c']; |
ES5
1 2 3 |
for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } |
ES6
1 2 3 |
for (let i of arr) { console.log(i); } |
Параметры по умолчанию
Функции можно инициализировать с параметрами по умолчанию, которые будут задействованы только, если эти параметры не переданы в функцию.
ES5
1 2 3 4 |
var func = function(a, b) { b = (b === undefined) ? 2 : b; return a + b; } |
ES6
1 2 3 |
let func = (a, b = 2) => { return a + b; } |
1 2 |
func(10); // returns 12 func(10, 5) // returns 15 |
Синтаксис расширения
С помощью синтаксиса расширения можно расширить массив.
ES6
1 2 3 4 5 |
let arr1 = [1, 2, 3]; let arr2 = ['a', 'b', 'c']; let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, "a", "b", "c"] |
Синтаксис расширения можно использовать в аргументах функций.
ES6
1 2 3 4 |
let arr1 = [1, 2, 3]; let func = (a, b, c) => a + b + c; console.log(func(...arr1)); // 6 |
Классы/функции конструкторы
ES6 вводит синтаксис class поверх функций-конструкторов на основе прототипов.
ES5
1 2 3 4 5 6 7 8 9 10 |
function Func(a, b) { this.a = a; this.b = b; } Func.prototype.getSum = function() { return this.a + this.b; } var x = new Func(3, 4); |
ES6
1 2 3 4 5 6 7 8 9 10 11 12 |
class Func { constructor(a, b) { this.a = a; this.b = b; } getSum() { return this.a + this.b; } } let x = new Func(3, 4); |
1 |
x.getSum(); // returns 7 |
Наследование
Ключевое слово extends создает подкласс.
ES5
1 2 3 4 5 6 7 8 9 10 11 12 |
function Inheritance(a, b, c) { Func.call(this, a, b); this.c = c; } Inheritance.prototype = Object.create(Func.prototype); Inheritance.prototype.getProduct = function() { return this.a * this.b * this.c; } var y = new Inheritance(3, 4, 5); |
ES6
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class Inheritance extends Func { constructor(a, b, c) { super(a, b); this.c = c; } getProduct() { return this.a * this.b * this.c; } } let y = new Inheritance(3, 4, 5); |
1 |
y.getProduct(); // 60 |
Модули – экспорт/импорт
Модули можно создавать для экспорта и импорта кода между файлами.
index.html
1 2 |
<script src="export.js"></script> <script type="module" src="import.js"></script> |
export.js
1 2 3 4 5 |
let func = a => a + a; let obj = {}; let x = 0; export { func, obj, x }; |
import.js
1 2 3 |
import { func, obj, x } from './export.js'; console.log(func(3), obj, x); |
Promises/колбеки
Promises – это завершение асинхронной функции. Их можно использовать вместо цепочки вызова функций.
ES5 колбек
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function doSecond() { console.log('Do second.'); } function doFirst(callback) { setTimeout(function() { console.log('Do first.'); callback(); }, 500); } doFirst(doSecond); |
ES6 promise
1 2 3 4 5 6 7 8 9 10 11 12 13 |
let doSecond = () => { console.log('Do second.'); } let doFirst = new Promise((resolve, reject) => { setTimeout(() => { console.log('Do first.'); resolve(); }, 500); }); doFirst.then(doSecond); |
В примере ниже чисто для демонстрации используется XMLHttpRequest (лучше использовать современный Fetch API).
ES5 колбек
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function makeRequest(method, url, callback) { var request = new XMLHttpRequest(); request.open(method, url); request.onload = function() { callback(null, request.response); }; request.onerror = function() { callback(request.response); }; request.send(); } makeRequest('GET', '//url.json', function (err, data) { if (err) { throw new Error(err); } else { console.log(data); } } ); |
ES6 promise
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function makeRequest(method, url) { return new Promise((resolve, reject) => { let request = new XMLHttpRequest(); request.open(method, url); request.onload = resolve; request.onerror = reject; request.send(); }); } makeRequest('GET', '//url.json') .then(event => { console.log(event.target.response); }) .catch(err => { throw new Error(err); }); |
Автор: Tania Rascia
Источник: //www.taniarascia.com/
Редакция: Команда webformyself.