Расширенные функции JavaScript

JavaScript — один из самых динамичных языков. Каждый год добавляется множество функций, чтобы сделать язык более управляемым и практичным.
Как и многие другие языки программирования, JavaScript постоянно развивается. С каждым годом язык становится все более мощным благодаря новым возможностям, которые позволяют разработчикам писать более выразительный и лаконичный код.
Давайте рассмотрим самые последние функции, добавленные в ECMAScript 2022 (ES13), и посмотрим на примеры их использования, чтобы лучше понять их. .

1. Ожидание верхнего уровня
Асинхронные функции были добавлены в JavaScript в 2017 году. До сих пор мы могли использовать ожидание только внутри async функций. Но теперь ключевое слово await также можно использовать вне функций async на верхнем уровне модуля для ожидания Promise.

До ES2022

await Promise.resolve(console.log('Hello Javascript'));
// Output: SyntaxError: await is only valid in async function
// Alternative to fix the problem
(async function() {
  await Promise.resolve(console.log('Hello Javascript'));
  // Output: Hello World
}());

После ES2022

await Promise.resolve(console.log('Hello Javascript'));
//Hello Javascript

2. Объявления полей класса
До ES13 поля класса можно было объявлять только в их конструкторе. Но теперь мы можем объявить или определить их в самой внешней области видимости класса.

До ES2022

class team{
  constructor() {
    this.teamName = 'Avengers';
    this.teamMember = 10;
  }
}
const oppositeTeam = new team();
console.log(oppositeTeam.teamName); // Avengers

После ES2022

class team {
  teamName = 'Avengers';
  teamMember = 10;
}
const oppositeTeam = new team();
console.log(oppositeTeam.teamName); // Avengers

3. Частные поля экземпляров, методы и средства доступа
Однако ранее, когда требовалось объявить частный метод или поле, необходимо было добавить символ подчеркивания _ в начале имени метода (на основе соглашения), что не гарантирует, что метод будет закрытым.
В ES2022 были добавлены новые функции, такие как закрытые поля экземпляра, методы и средства доступа. Нам нужно добавить только # в начале имени метода, и таким образом он будет объявлен закрытым.

До ES2022

class Person {
  _firstName = 'Merry';
   lastName = 'Smith'; 
  printPrivateField() {
    console.log(this.#firstName) // Merry
  }
  #sayHello() {
    console.log("Hello")
  }
}
const user = new Person();
// Members intended to be private can still be accessed from outside the class
console.log(person._firstName); // Merry
person._firstName = 'Robert'; // They can also be modified

После ES2022

class Person {
  #firstName = "Merry"
  lastName = "Smith"

  printPrivateField() {
    console.log(this.#firstName) // Merry
  }

  #sayHello() {
    console.log("Hello")
  }
}
const user = new Person()
console.log(user.#firstName) // SyntaxError: Private field '#firstName' must be declared in an enclosing class
console.log(user.lastName) // Smith
user.printPrivateField() // Merry
user.#sayHello() // SyntaxError: Private field '#sayHello' must be declared in an enclosing class

4. Эргономичные проверки бренда для приватных полей
Эта функциональность помогает нам проверить, что объект имеет в себе заданный приватный слот, для этого используется оператор in.

class Person {
 #name = "Random User"
 isNamePresent () {
  return #name in this;
 }
}
const user = new Person()
console.log(user.isNamePresent());//true

5. Статические поля класса и статические частные методы
Теперь мы можем объявлять статические поля и статические частные методы для класса в ES13. Статические методы могут обращаться к другим закрытым/общедоступным статическим членам класса с помощью ключевого слова this, а методы экземпляра могут обращаться к ним с помощью this.constructor.

class Person {
  static #marks = 25;
  static getMarks() {
  return this.#marks;
  }
  constructor() {
    this.constructor.#incrementMarks();
  }
  static #incrementMarks() {
    this.#marks++;
  }
}
const user= new Person();
console.log(Person.getMarks()); // 2

метод 6.at() для Strings, Arrays и TypedArrays
До этого момента программисты просили предоставить возможность выполнять отрицательное индексирование массивов JS, как вы можете делать с другими языками программирования. То есть запрашивается возможность писать arr[-1] вместо arr[arr.length-1], где отрицательные числа отсчитываются в обратном порядке от последнего элемента.< br /> В этом году с ES2022 у нас есть большое изменение с новым методом, который помогает программистам с отрицательным индексированием, .at() метод, поддерживаемый Array, String или TypedArray.

До ES2022

const array = ["a", "b", "c"]
// Using the length property
const lastItem = array[array.length - 1]
console.log(lastItem) // Output: "c"

После ES2022

const array = ["a", "b", "c"]
// Using the new at method
const lastElement = array.at(-1)
console.log(lastElement) // Output: "c"

7. Индексы соответствия RegExp
ES2022 добавляет новую функцию в регулярные выражения, которая называется Индексы соответствия. используя это, мы можем получить дополнительную информацию о начальном и конечном индексах захваченной подстроки. Чтобы использовать эту функцию, нам просто нужно передать флаг the/d в регулярном выражении. Эта функция добавляет свойство index в массив результатов, возвращаемый методами RegExp.prototype.exec и String.prototype.matchAll. Свойство indexes — это массив, содержащий начальные и конечные индексы каждой совпадающей подстроки относительно начала ввода.

До ES2022

const str = "welcome to welcome"
// without /d flag
const regex = /(welcome)/g
console.log(...str.matchAll(regex));
//output
[
  'welcome',
  'welcome',
  index: 0,
  input: 'welcome to welcome',
  groups: undefined
]

После ES2022

const str = "welcome to welcome"
// without /d flag
const regex = /(welcome)/dg
console.log(...str.matchAll(regex));
//output
[
  'welcome',
  'welcome',
  index: 0,
  input: 'welcome to welcome',
  groups: undefined,
  indices: [ [ 0, 7 ], [ 0, 7 ], groups: undefined ]
]

8. Object.hasOwn()
В JavaScript у нас уже есть Object.prototype.hasOwnProperty, но лучше не использовать hasOwnProperty вне самого прототипа, поскольку это не защищенное свойство, а это означает, что object может иметь свойство с именем hasOwnProperty

До ES2022

const object = {
 name: "Draxlr",
 hasOwnProperty (){
  return false
 }
}
console.log(object.hasOwnProperty("name")); // false
console.log(object.hasOwnProperty("hasOwnProperty")); // false

После ES2022

const user = {
 name: "JavaScript",
 hasOwnProperty() {
   return false;
 },
}
console.log(Object.hasOwn(user, "name")); // Output: true
console.log(Object.hasOwn(user, "hasOwnProperty")); // Output: true

9. Причина ошибки
Ошибка и ее подклассы теперь позволяют указать причину ошибки. Иногда мы перехватываем ошибки, возникающие во время более глубоко вложенных вызовов функций, и хотели бы прикрепить к ним дополнительную информацию.
С помощью причины ошибки мы можем добавить больше внутренней информации о наших ошибках. Чтобы использовать эту новую функцию, мы должны указать параметры ошибки в качестве второго параметра, а с помощью ключа cause мы можем передать ошибку, которую мы хотим объединить в цепочку.

const getUsers = async(array)=> {
try {
  const users =  await fetch('https://myapi/myusersfake');
  return users;
}
catch (error) {
  console.log('enter');
  throw new Error('Something when wrong, please try again later', 
  {cause: error });
}
}
try{
  const users =  getUsers();
} 
catch(error) {
  console.log(error); 
  // Error: The array need a minimum of two   elements
  console.log(error.cause); // TypeError: Failed to fetch
}

10. Поиск массива из последнего
В JavaScript у нас уже есть Array.prototype.find и Array.prototype.findIndex. Мы знаем, как поиск из последнего может иметь лучшую производительность (целевой элемент в хвосте массива может добавляться с push или concat в очереди или стеке, например,: недавно совпавший момент времени на временной шкале ). Если мы заботимся о порядке элементов (может иметь повторяющийся элемент в массиве, например,: последний нечетный элемент в списке чисел), лучший способ использовать новые методы Array.prototype.findLast и Array.prototype.findLastIndex.

До ES2022

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
const isLargeNumber = (element) => element > 10;
console.log(found);//12
console.log(array1.findIndex(isLargeNumber));//1

После ES2022

const array1 = [5, 12, 8, 130, 44];
const found = array1.findLast(element => element > 10);
const isLargeNumber = (element) => element > 10;
console.log(found);//44
console.log(array1.findLastIndex(isLargeNumber));//4

Заключение

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

— — —

Мы здесь, чтобы сделать сообщество сильнее, поделившись своими знаниями. Подпишитесь на меня и моя команда, чтобы быть в курсе последних и лучших событий в мире мобильных и веб-технологий.