Знакомство с новыми функциями ECMAScript 2021 (ES12)

Node.js задняя часть JavaScript
Знакомство с новыми функциями ECMAScript 2021 (ES12)

Введение

ES12 — это версия, выпущенная ассоциацией ECMA в июне 2021 года. Поскольку это двенадцатая версия ECMAScript, ее также называют ES12.

Прошел месяц с момента выпуска ES12, так в чем же новые возможности и отличия ES12? Давайте посмотрим вместе.

По сути, ES12 представил метод replaceAll для работы со строкой, Promise.any для объединения операций Promise, AggregateError для представления набора нескольких ошибок, новые логические операторы ??=, &&=, ||= , слабую ссылку WeakRef, FinalizationRegistry для сборки мусора. регистрация, разделитель чисел 1_000, более точный метод сортировки массива Array.prototype.sort.

Следующая статья объяснит их один за другим.

replaceAll

Друзья, знакомые с java, должны знать, что в java есть два метода замены строки, а именно replace и replaceAll, разница между ними в том, что replace — это замена строки, а replaceAll — сопоставление с регулярным выражением.

Но в javascript эти два значения различны. В JS replace — это замена первого вхождения строки, а replaceAll — буквально замена всех строк. Давайте рассмотрим пример:

const string="flydean is a good fly"
console.log(string.replace("fly", "butterfly"));

Приведенное выше значение возвращает:

butterflydean is a good fly

Если вместо этого вы используете replaceAll:

const string="flydean is a good fly"
console.log(string.replaceAll("fly", "butterfly"));
butterflydean is a good butterfly

частный метод

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

class Student {
  getAge() {
    console.log("永远18岁")
  }
}

student= new Student();
student.getAge();

Результат выполнения приведенного выше кода:

"永远18岁"

Но если мы не хотим, чтобы метод getAge() был напрямую открыт для внешнего использования, то есть мы хотим, чтобы getAge() был закрытым методом, нам нужно только добавить # перед методом.

class Student {
  #getAge() {
    console.log("永远18岁")
  }
}

student= new Student();
student.getAge();

Запустите то же самое, тогда вы получите следующее сообщение об ошибке:

Error: student.getAge is not a function

Как с этим бороться? Мы знаем, что приватные методы можно вызывать внутри методов, поэтому нам нужно только создать публичный метод, а затем вызвать приватный метод в этом публичном методе, как показано ниже:

class Student {
  #getAge() {
    console.log("永远18岁")
  }
  
  getPublicAge(){
    this.#getAge();
  }
 
}

student= new Student();
student.getPublicAge();

Мы можем получить тот же результат.

частная собственность

Вышеупомянутые частные методы, так что же делать с частными свойствами?

Обычно для свойств мы можем украсить их модификатором get, а затем получить к ним доступ напрямую через имя свойства:

class Student {
  get Age() {
    return 18;
  }
 
}

student= new Student();
console.log(student.Age);

В результате мы получим на выходе 18.

Точно так же вы можете сделать имя свойства приватным, добавив к нему префикс #, например:

class Student {
  get #Age() {
    return 18;
  }
 
}

student= new Student();
console.log(student.Age);

Приведенный выше код выведет undefined.

Чтобы получить доступ к указанным выше частным свойствам, вы можете использовать общедоступные свойства для вызова методов частных свойств:

class Student {
  get #Age() {
    return 18;
  }
   get publicAge() {
    return this.#Age
  }
}

student= new Student();
console.log(student.publicAge);

отлично работал.

Promise.any() и AggregateError

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

const prom1 = new Promise((resolve, reject) => {
  setTimeout(
    () => resolve("promise one"),
    Math.floor(Math.random() * 100)
  );
});
const prom2 = new Promise((resolve, reject) => {
  setTimeout(
    () => resolve("promise two"),
    Math.floor(Math.random() * 100)
  );
});
const prom3 = new Promise((resolve, reject) => {
  setTimeout(
    () => resolve("promise three"),
    Math.floor(Math.random() * 100)
  );
});

(async function() {
  const result = await Promise.any([prom1, prom2, prom3]);
  console.log(result); 
})();

Приведенный выше код может случайным образом выводить обещание один, обещание два и обещание три.

Если вы измените приведенный выше код, чтобы отклонить все, будет выдан AggregateError:

const prom1 = new Promise((resolve, reject) => {
  setTimeout(
    () => reject("promise one rejected"),
    Math.floor(Math.random() * 100)
  );
});
const prom2 = new Promise((resolve, reject) => {
  setTimeout(
    () => reject("promise two rejected"),
    Math.floor(Math.random() * 100)
  );
});
const prom3 = new Promise((resolve, reject) => {
  setTimeout(
    () => reject("promise three rejected"),
    Math.floor(Math.random() * 100)
  );
});

try{
(async function() {
  const result = await Promise.any([prom1, prom2, prom3]);
  console.log(result); 
})();
} catch(error) {
  console.log(error.errors);
}

Сообщение об ошибке выглядит следующим образом:

Uncaught (in promise) AggregateError: No Promise in Promise.any was resolved

Обратите внимание, что AggregateError должен быть выброшен после того, как все обещания будут отклонены.Если некоторые из обещаний будут успешными, будет возвращен успешный результат.

разделитель чисел

Эта новая функция предназначена для удобства просмотра кода программистами.Если число относительно велико, оно не будет выглядеть так ясно с первого взгляда, как, например, следующее длинное число:

const number= 123456789；

Вы не можете сразу сказать, насколько велико число, поэтому ES12 предоставляет разделитель чисел _.

Разделитель может не только делить десятичное число, но также может делить данные чистого значения или чистого значения 16, что очень просто в использовании.

const number = 1_000_000_000_000;
const binary = 0b1010_0101_1111_1101;
const hex = 0xAF_BF_C3;

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

новые логические операторы

Мы знаем, что операторы && и || используются для выполнения логических операций.

Например:

1 && 2 
1 || 2

и другие операции, ES12 предоставляет бинарные операторы для && и ||, как показано ниже:

var x = 1;
var y = 2;
x &&= y;
x ||= y;

Кроме того, предусмотрены бинарные операторы ??, такие как:

var x;
var y = 2;
x ??= y;

Смысл приведенного выше кода состоит в том, чтобы определить, пусто ли x, и, если оно пусто, присвоить значение y переменной x.

Суммировать

Несколько новых функций ES12 весьма практичны, вы можете их опробовать.

Эта статья была включена вWoohoo. Флойд пресс .com/EC code script-…

Самая популярная интерпретация, самая глубокая галантерея, самые краткие уроки и множество трюков, о которых вы не знаете, ждут вас!

Добро пожаловать, чтобы обратить внимание на мой официальный аккаунт: «Программируйте эти вещи», разбирайтесь в технологиях, лучше поймите себя!

Категории