Синтаксис и обзор функций ES6

27.04.2018 Комментарии к записи Синтаксис и обзор функций ES6 отключены 717 Просмотров

От автора: введение в 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

var x = 0;

ES6

let x = 0;

Объявление констант

ES6 ввел ключевое слово const, которое нельзя переобъявить или переназначить. Оно не поддается мутации.

ES6

const CONST_IDENTIFIER = 0; // constants are uppercase by convention

Стрелочные функции

Синтаксис стрелочной функции – это более короткий способ создания функции. У стрелочной функции нет своего this, своих прототипов, их нельзя использовать для конструкторов. Также их нельзя использовать как методы объекта.

ES5

function func(a, b, c) {} // function declaration
var func = function(a, b, c) {} // function expression

ES6

let func = a => {} // parentheses optional with one parameter
let func = (a, b, c) => {} // parentheses required with multiple parameters

Шаблонные литералы

Конкатенация/строковая интерполяция

В строки шаблонных литералов можно вставлять выражения.

ES5

var str = 'Release date: ' + date;

ES6

let str = `Release Date: ${date}`;

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

Благодаря синтаксису шаблонных литералов, JS строки можно превратить в многострочные без конкатенации.

ES5

var str = 'This text ' + 'is on ' + 'multiple lines';

ES6

let str = `This text is on multiple lines`;

Заметка: в многострочных шаблонных литералах сохраняются пробелы.

Явный возврат

Ключевое слово return подразумевается и может быть опущено в стрелочных функциях без тела блока.

ES5

function func(a, b, c) { return a + b + c; }

ES6

let func = (a, b, c) => a + b + c; // curly brackets must be omitted

Сокращение ключ/свойство

ES6 ввел сокращенную запись для присвоения свойств переменным с таким же именем.

ES5

var obj = { a: a, b: b
}

ES6

let obj = { a, b
}

Сокращенное определение метода

При присвоении методов объекту можно опустить function.

ES5

var obj = { a: function(c, d) {}, b: function(e, f) {}
};

ES6

let obj = { a(c, d) {}, b(e, f) {}
}

obj.a(); // call method a

Деструктуризация (сопоставление объектов)

Используйте фигурные скобки для присвоения свойств объекта его переменной.

var obj = { a: 1, b: 2, c: 3 };

ES5

var a = obj.a;
var b = obj.b;
var c = obj.c;

ES6

let {a, b, c} = obj;

Перебор массива в цикле

Был представлен более краткие синтаксис перебора массивов и других итерируемых объектов.

var arr = ['a', 'b', 'c'];

ES5

for (var i = 0; i < arr.length; i++) { console.log(arr);
}

ES6

for (let i of arr) { console.log(i);
}

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

Функции можно инициализировать с параметрами по умолчанию, которые будут задействованы только, если эти параметры не переданы в функцию.

ES5

var func = function(a, b) { b = (b === undefined) ? 2 : b; return a + b;
}

ES6

let func = (a, b = 2) => { return a + b;
}

func(10); // returns 12
func(10, 5) // returns 15

Синтаксис расширения

С помощью синтаксиса расширения можно расширить массив.

ES6

let arr1 = [1, 2, 3];
let arr2 = ['a', 'b', 'c'];
let arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, "a", "b", "c"]

Синтаксис расширения можно использовать в аргументах функций.

ES6

let arr1 = [1, 2, 3];
let func = (a, b, c) => a + b + c; console.log(func(...arr1)); // 6

Классы/функции конструкторы

ES6 вводит синтаксис class поверх функций-конструкторов на основе прототипов.

ES5

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

class Func { constructor(a, b) { this.a = a; this.b = b; } getSum() { return this.a + this.b; }
} let x = new Func(3, 4);

x.getSum(); // returns 7

Наследование

Ключевое слово extends создает подкласс.

ES5

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

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);

y.getProduct(); // 60

Модули – экспорт/импорт

Модули можно создавать для экспорта и импорта кода между файлами.

index.html

<script src="export.js"></script>
<script type="module" src="import.js"></script>

export.js

let func = a => a + a;
let obj = {};
let x = 0; export { func, obj, x };

import.js

import { func, obj, x } from './export.js'; console.log(func(3), obj, x);

Promises/колбеки

Promises – это завершение асинхронной функции. Их можно использовать вместо цепочки вызова функций.

ES5 колбек

function doSecond() { console.log('Do second.');
} function doFirst(callback) { setTimeout(function() { console.log('Do first.'); callback(); }, 500);
} doFirst(doSecond);

ES6 promise

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).