ECMAScript 2015, 2016, 2017, 2018, 2019, 2020, 202109.06.2023 15:17

ECMAScript — стандарт, на котором основан JavaScript, его часто называют ES.

ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017, ES2018, ES2019, ECMAScript 2015, ECMAScript 2016, ECMAScript 2017, ECMAScript 2018, ECMAScript 2019 — как разобраться во всем этом?

ECMAScript (/ˈɛkməskrɪpt/) (или ES) является языком программирования общего назначения , стандартизирован ассоциацией Ecma International согласно документу ECMA-262 . Это стандарт JavaScript, предназначенный для обеспечения взаимодействия веб-страниц в разных веб-браузерах.

Историческая справка

Ecma International — основанная в 1961 году ассоциация, деятельность которой посвящена стандартизации информационных и коммуникационных технологий. Изначально ассоциация называлась ECMA — European Computer Manufacturers Association, однако она сменила название в 1994 году в связи с глобализацией деятельности. Вследствие этого название Ecma перестало быть аббревиатурой и больше не пишется заглавными буквами.

Когда JavaScript был создан, он был представлен Netscape и Sun Microsystems для Ecma, и они дали ему имя ECMA-262 (псевдоним ECMAScript).

До ES2015 спецификации ECMAScript обычно назывались их редакцией. Таким образом, ES5 является официальным названием обновления спецификации ECMAScript, опубликованной в 2009 году.

В процессе разработки ES2015, название было изменено с ES6 на ES2015, но мир всё еще называет релизы ES номером издания.

Также комитетом было принято решение о ежегодном пересмотре и выпуске стандарта, в результате, начиная с 2015 года, мы каждый год получаем новый стандарт ECMAScript.

Для лучшего понимания исторической последовательности развития стандартов JavaScript смотрите табличку ниже:

Даты релиза различных версий JavaScript

ECMAScript2015 (ES6)

ES5 разрабатывался 10 лет, с 1999 по 2009 год и был полон существенных изменений, поэтому он считает фундаментальной версией стандарта ECMAScript.

• Стрелочные функции let func = (arg1, arg2, arg3) => expression

• Более интуитивное управление текущим контекстом объекта this

• Объявление переменных с помощью let и const

• Промисы (Promises)

const waitFunc = () => 
  new Promise((resolve, reject) => { 
    setTimeout(resolve, 1000);  
  });

waitFunc().then(() => {    
  console.log("I promised to run after 1s");  
});

• Генераторы (Generators)— это особый тип функций, которые могут приостанавливать своё выполнение, возвращать промежуточный результат и далее возобновлять его позже, в произвольный момент времени, что позволяет запускать другой код в момент приостановления функции. Для объявления генератора используется синтаксическая конструкция:  function* (функция со звёздочкой).

• Шаблонные литералы (Template Literals) — это новый синтаксис для создания строк, обеспечивающий способ встраивания выражений в строки, используя синтаксис ${имя_переменной}:

const name = "Irina";
const string = `Hey ${name}`; // Hey Irina

const sayMyName = function (name = "Irina") {  
  console.log(name);
};
sayMyName(); // Irina

// spread
Math.max(...[2,100,1,6,43]) // 100

// rest
function print(format, ...params) {     
  console.log('params: ', params);     
  console.log('format: ', format); 
}  

print('hello', 'adrian', 321, Math.PI);

const user = {firstName: 'Adrian', lastName: 'Mejia'};  

function getFullName({ firstName, lastName }) {      
  return `${firstName} ${lastName}`; 
} 

console.log(getFullName(user));

• Symbol — это уникальный и неизменяемый тип данных, который может быть использован как идентификатор для свойств объектов.

var sym1 = Symbol();
var sym2 = Symbol("foo");

Symbol("foo") === Symbol("foo"); // false

• Цикл for...of выполняет цикл обхода любых итерируемых объектов (включая Array,  Map,  Set, объект аргументов и т.д.), и имеет возможность разрыва break;

Итерируемым объектом является любой объект, который реализует интерфейс Iterable, то есть у которого есть метод Symbol.iterator, возвращающий объект с методом next ().

Map содержит пары ключ-значение и сохраняет порядок вставки. Любое значение может быть использовано в качестве ключа.

Set позволяет сохранять уникальные значения любого типа.

Классы:

• Конструктор — специальный метод constructor, который вызывается, когда класс инициализируются с помощью new. Родительский constructor наследуется автоматически, если у потомка нет своего метода constructor. Если же потомок имеет свой constructor, то, чтобы унаследовать конструктор родителя нужно использовать super() с аргументами для родителя.

• super() — используется для вызова функций, принадлежащих родителю объекта;

• Getters and setters:

get связывает свойство объекта с функцией, которая вызывается при обращении к этому свойству

class Person {  
  get fullName() {   
    return `${this.firstName} ${this.lastName}`;  
  }
}

set связывает свойство объекта с функцией, он будет вызываться при попытке установить это свойство

class Person {  
  set age(years) {    
    this.theAge = years;  
  }
}

Модули:

import defaultExport from "module-name";
import * as name from "module-name";
import * from 'module-name';
import { namedExport } from 'module-name';
import "module-name";

export { name1, name2, …, nameN };
export default выражение;
export * from …;
export default function (…) { … };

Расширенные литералы объекта:

// вместо этого:
const name = "Irina";
const x = {  
  name: name,
};

// можно писать так:
const name = "Irina";
const x = {  
  name,
};

const person = { name: "Irina", say: () => "Hello " };
const developer = {  
  __proto__: person,  
  say() {    
    return super.say() + this.name; 
  },
};

developer.say(); // Hello Irina

const myObj = {  
  ["some" + "thing"]: "123",
};

myObj.something; // 123

Новые строковые методы:

• repeat() повторяет строку указанное количество раз;

• codePointAt() возвращает не отрицательное целое число, которое является закодированным в UTF-16 значением кодовой точки.

Новые методы объекта:

• Object.is() определяет, являются ли два значения одинаковыми var isSame = Object.is(value1, value2);

• Object.assign() используется для поверхностного копирования всех свойств объекта в целевой объект Object.assign(target, ...sources);

• Object.setPrototypeOf устанавливает прототип объекта Object.setPrototypeOf(obj, prototype).

ECMAScript2016 (ES7)

Cодержит всего две функции:

• Array.prototype.includes() — проверяет, содержит ли массив элемент, возвращая в зависимости от этого true или false.

• Оператор возведения в степень ** — является эквивалентом Math.pow()


ECMAScript2017 (ES8)

• String.prototype.padStart() и String.prototype.padEnd() — позволяют присоединять к строкам, в их начало или конец, некоторое количество символов для дополнения строк до заданной длины. Это полезно, если нужно выровнять текст, например, при выводе в консоль.

• Object.values() — возвращает массив, содержащий все значения свойств объекта, исключая любые значения в цепочке прототипов.

• Object.entries() — возвращает массив, содержащий все собственные свойства объекта, в виде массива пар [key, value].

• getOwnPropertyDescriptors() — принимает объект и возвращает все собственные дескрипторы свойств данного объекта (включая данные о геттерах и сеттерах).

• «Висячие» запятые в параметрах функций — позволяет ставить запятую после последнего параметра функции.

const someFunc = (var1, var2,) => {  
  //...
};

someFunc("test2", "test2",);

• async/await или асинхронные функции — абстракция более высокого уровня по сравнению с промисами. Асинхронные функции позволяют избавиться от так называемого «ада коллбэков» и улучшить внешний вид и читаемость кода.

• Разделяемая память (shared memory) и атомарные операции (atomics) — это функционал, который является основным улучшением движков JS.

Основная идея состоит в том, чтобы привнести в JavaScript какую-то многопоточность, для того чтоб разработчики JS могли писать высокопроизводительные параллельные программы и управлять памятью самостоятельно, а не позволять это делать движку JS.

Для этого задействуется новый тип глобального объекта SharedArrayBuffer, который хранит данные в общем пространстве памяти. Эти данные могут быть разделены между основным потоком JS и потоками web-workers.

WebWorkers предлагают протокол обмена сообщениями через события. Начиная с ES2017, мы можем создавать массив разделяемой памяти между web-workers и их создателями, используя SharedArrayBuffer.

Поскольку неизвестно, сколько времени занимает запись в разделяемую часть памяти, мы используется Atomics — способ удостоверится, что при чтении значения, любой вид операции записи завершен.

Более подробно об этом можно почитать в статье

ECMAScript2018 (ES9)

• Асинхронная итерация for-await-of — позволяет вызывать асинхронные функции, которые возвращают промис (или массив с кучей промисов) в цикле:

const promises = [  
  new Promise(resolve => resolve(1)),  
  new Promise(resolve => resolve(2)),  
  new Promise(resolve => resolve(3))];

async function testFunc() {  
  for await (const obj of promises) {    
    console.log(obj);  
  }
}

testFunc(); // 1, 2, 3

fetch(myRequest)  
  .then(res => res.json())  
  .catch(error => console.error(error))  
  .finally(() => console.log("finished"));

Spread/Rest операторы для свойств объекта:

const arr = { first, second, ...others };
arr; //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

• rest — cинтаксис для rest оператора выглядит таким же как и для spread оператора, однако он используется для деструктуризации массивов и объектов. Фактически, rest оператор противоположен spread оператору: последний раскладывает массив на элементы, тогда как первый собирает много элементов в один.

const { first, second, ...others } = {  
  first: 1,  
  second: 2,  
  third: 3, 
  fourth: 4,  
  fifth: 5};

first; // 1
second; // 2
others; // { third: 3, fourth: 4, fifth: 5 }

Улучшения регулярных выражений:

Позитивная ретроспективная проверка:  (?<=Y)X, ищет совпадение с X при условии, что перед ним ЕСТЬ Y.

Негативная ретроспективная проверка:  (?, ищет совпадение с X при условии, что перед ним НЕТ Y.

let dateRegexp = /(?[0-9]{4})-(?[0-9]{2})-(?[0-9]{2})/;
let str = "2021-03-30";
let groups = str.match(dateRegexp).groups;
alert(groups.year); // 2021
alert(groups.month); // 03
alert(groups.day); // 30

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

console.log(Symbol('desc').description); // expected output: "desc"

JSON.stringify('\uD800');
> '"�"'

JSON.stringify('\uD800');
> '"\\ud800"' 

function /* a comment */ name() {}

// Поведение было таким:
name.toString();
// "function name() {}"

// Стало таким:
name.toString();
// "function /* a comment */ name () {}"

const str = "abc";
const regexp = /[a-c]/g;
const iterator = str.matchAll(regexp);

for (result of iterator) {  
  console.log(result);
}
// ["a", index: 0, input: "abc", groups: undefined]
// ["b", index: 1, input: "abc", groups: undefined]
// ["c", index: 2, input: "abc", groups: undefined]

let modulePath = prompt("Какой модуль загружать?");

import(modulePath)   
.then(obj => <объект модуля>)   
.catch(err => <ошибка загрузки, например если нет такого модуля>)

const bigint = 1234567890123456789012345678901234567890n;  

const sameBigint = BigInt("1234567890123456789012345678901234567890");  

const bigintFromNumber = BigInt(10); // то же самое, что и 10n

const car = {};
const color = car?.color;
const colorName = car?.color?.name;

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

export * as utils from "./utils.mjs";

// эквивалентно следующему:
import * as utils from "./utils.mjs";
export { utils };

class Person {         
  
  #setType() {            
    console.log("I am Private");      
  }          
  
  show() {            
    this.#setType();      
  } 
}  

const personObj = new Person(); 
personObj.show(); // "I am Private"; 
personObj.setType(); // TypeError: personObj.setType is not a function

class Person {        
  get name() { return "Backbencher" }      
  set name(value) {}          
  
  get #age() { return 42 }       
  set #age(value) {} 
}

const obj = new Person(); 
console.log(obj.name); // "Backbencher" console.log(obj.age); // undefined

const x = 1;  
const y = 2; 
const z;

x &&= y;  // 2
x ||= y;  // 1
z ??= y;  // 2