Версии JavaScript — ECMAScript 2020

ECMAScript 2020, также известный как ES2020, является одиннадцатым изданием спецификации языка ECMAScript. В этой версии JavaScript появилось несколько новых функций и улучшений, которые делают язык более мощным и простым в использовании. В этой статье мы обсудим некоторые ключевые функции ES2020 с примерами кода.

BigInt

В JavaScript всегда было ограничение на числовой тип, который может представлять только числа от -2⁵³ до 2⁵³. Функция BigInt в ES2020 решает эту проблему, вводя новый примитивный тип BigInt, который может представлять целые числа с произвольной точностью.

Пример:

const x = 9007199254740991n; // an integer with arbitrary precision
const y = BigInt(9007199254740991); // equivalent to x
const z = BigInt('9007199254740991'); // equivalent to x
const sum = x + y + z;
console.log(sum); // Output: 27021597752164573n

Необязательная цепочка

Необязательная цепочка — это новая функция, упрощающая доступ к свойствам объекта, когда свойства могут быть неопределенными или нулевыми. Это позволяет безопасно перемещаться по вложенному объекту, не выдавая ошибки.

Пример:

const user = {
  name: 'John',
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

// access the street property of the address object without throwing an error
const street = user?.address?.street;
console.log(street); // Output: '123 Main St'

Нулевое слияние

Нулевой оператор объединения (??) используется для предоставления значения по умолчанию, когда переменная имеет значение null или не определена. Он проверяет, является ли значение нулевым или неопределенным, и, если это так, возвращает значение по умолчанию.

Пример:

const x = null;
const y = undefined;
const z = 'Hello';

// use nullish coalescing operator to provide default value
const a = x ?? 'Default Value';
const b = y ?? 'Default Value';
const c = z ?? 'Default Value';
console.log(a); // Output: 'Default Value'
console.log(b); // Output: 'Default Value'
console.log(c); // Output: 'Hello'

Promise.allSettled

Promise.allSettled — это новый метод Promise, который позволяет дождаться выполнения всех промисов, независимо от того, разрешаются они или отклоняются. Он возвращает массив объектов, представляющих результат каждого промиса.

Пример:

const promises = [
  Promise.resolve('Resolved'),
  Promise.reject('Rejected'),
  Promise.resolve('Resolved Again')
];

Promise.allSettled(promises)
  .then(results => console.log(results))
  .catch(error => console.log(error));
  
/* Output:
[
  {status: "fulfilled", value: "Resolved"},
  {status: "rejected", reason: "Rejected"},
  {status: "fulfilled", value: "Resolved Again"}
]
*/

глобальныйЭто

До ES2020 не существовало стандартного способа доступа к глобальному объекту в JavaScript, что приводило к коду, зависящему от платформы. Свойство globalThis было введено для решения этой проблемы. Он предоставляет стандартный способ доступа к глобальному объекту независимо от платформы, на которой выполняется код.

Вот пример:

console.log(globalThis.setTimeout === setTimeout); // true
console.log(globalThis.parseInt === parseInt); // true

String.prototype.matchAll

В ES2020 был представлен метод String.prototype.matchAll, который возвращает итератор всех совпадений регулярного выражения в строке. Это похоже на метод String.prototype.match, но он возвращает итератор вместо массива, что позволяет перебирать совпадения одно за другим.

Вот пример:

const str = 'hello world';
const regex = /l/g;

const matches = str.matchAll(regex);
for (const match of matches) {
  console.log(match);
}

Выход:

["l", index: 2, input: "hello world", groups: undefined]
["l", index: 3, input: "hello world", groups: undefined]

Числовые разделители

Числовые разделители были введены в ES2020, чтобы упростить чтение больших чисел, используя символы подчеркивания (_) для разделения цифр. Подчеркивания игнорируются движком JavaScript, поэтому число анализируется так, как если бы их не было.

Вот пример:

const num = 1_000_000;
console.log(num); // 1000000

Динамический импорт:

Функция динамического импорта позволяет вам импортировать модуль динамически во время выполнения, а не статически во время компиляции. Это может быть полезно, когда вам нужен определенный модуль только при определенных обстоятельствах, а не всегда. Вот пример:

// Before
import { someFunction } from './module.js';
// After
async function loadModule() {
  const module = await import('./module.js');
  const someFunction = module.someFunction;
  someFunction();
}

В этом примере функция loadModule() использует динамический импорт для загрузки файла module.js, а затем получает из него экспорт someFunction.

Поля закрытого класса:

Поля закрытого класса позволяют добавлять в класс личные данные, доступ к которым возможен только из самого класса. Это может быть полезно для инкапсуляции данных и предотвращения случайного доступа из других частей вашего кода. Вот пример:

class Person {
  #name;
  constructor(name) {
    this.#name = name;
  }
  getName() {
    return this.#name;
  }
}

const person = new Person('John');
console.log(person.#name); // Error: Private field '#name' must be declared in an enclosing class
console.log(person.getName()); // 'John'

В этом примере класс Person имеет закрытое поле #name, доступ к которому возможен только внутри класса. Метод getName() используется для получения значения имени, которое затем регистрируется в консоли.

Заключение

ES2020 представил несколько новых функций, которые делают программирование на JavaScript более мощным и эффективным. Новые функции, такие как необязательная цепочка, нулевое объединение, динамический импорт, поля закрытого класса и т. д., помогают разработчикам писать более лаконичный и выразительный код. С каждой новой версией JavaScript продолжает развиваться и предоставлять разработчикам новые возможности, что делает его универсальным и важным языком в мире веб-разработки.