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

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

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

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', 'https://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', 'https://url.json')
.then(event => {
 console.log(event.target.response);
})
.catch(err => {
 throw new Error(err);
});

Автор: Tania Rascia

Источник: https://www.taniarascia.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree