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

Дата публикации: 2018-04-27

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

1	var x = 0;

ES6

let x = 0;

1	let x = 0;

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

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

ES6

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

1	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

1 2	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

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

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

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

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

ES5

var str = 'Release date: ' + date;

1	var str = 'Release date: ' + date;

ES6

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

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

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

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

ES5

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

var str = 'This text ' +

'is on ' +

'multiple lines';

ES6

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

let str = `This text

is on

multiple lines`;

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

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

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

ES5

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

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

ES6

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

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

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

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

ES5

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

var obj = {

a: a,

b: b

}

ES6

let obj = { 
    a, 
    b
}

let obj = {

}

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

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

ES5

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

var obj = {

a: function(c, d) {},

b: function(e, f) {}

};

ES6

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

let obj = {

a(c, d) {},

b(e, f) {}

}

obj.a(); // call method a

1	obj.a(); // call method a

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

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

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

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

ES5

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

var a = obj.a;

var b = obj.b;

var c = obj.c;

ES6

let {a, b, c} = obj;

1	let {a, b, c} = obj;

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

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

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

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

ES5

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

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

console.log(arr[i]);

}

ES6

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

for (let i of arr) {

console.log(i);

}

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

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

ES5

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

var func = function(a, b) {

b = (b === undefined) ? 2 : b;

return a + b;

}

ES6

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

let func = (a, b = 2) => {

return a + b;

}

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

1 2	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"]

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

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

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

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

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

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

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

1	y.getProduct(); // 60

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

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

index.html

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

1 2	<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 };

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

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

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

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 колбек

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

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

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

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.

Метки: EcmaScript 6

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

Легенда

Объявление переменных

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Promises/колбеки

Похожие статьи:

Комментарии Вконтакте:

Материалы

Мы в соц. сетях

Связь

Информация