Вы, возможно, уже знакомы с API Intl.NumberFormat, так как его поддержка существует в современных средах уже некоторое время.
В своей самой базовой форме Intl.NumberFormat позволяет создавать экземпляр форматтера, поддерживающий форматирование чисел с учетом локали. Так же, как и другие API Intl.*Format, экземпляр форматтера поддерживает методы format и formatToParts:
Если вы писали JavaScript для использования в веб-браузере, возможно, вы использовали window для доступа к глобальному объекту this. В Node.js вы могли использовать global. Если вы писали код, который должен работать в обеих средах, вы могли определить, какой из них доступен, и затем использовать его — но список идентификаторов, которые нужно проверять, растет с увеличением числа окружений и случаев использования. Это быстро выходит из-под контроля:
В общем случае ссылки на объекты в JavaScript являются сильно удерживаемыми, что означает, что пока у вас есть ссылка на объект, он не будет удален сборщиком мусора.
const ref = { x: 42, y: 51 };
// Пока у вас есть доступ к `ref` (или любой другой ссылке на
// тот же объект), объект не будет удален сборщиком мусора.
На данный момент WeakMap и WeakSet являются единственными способами частично слабой ссылки на объект в JavaScript: добавление объекта в качестве ключа в WeakMap или WeakSet не предотвращает его удаление сборщиком мусора.
const wm = new WeakMap();
{
const ref = {};
const metaData = 'foo';
wm.set(ref, metaData);
wm.get(ref);
// → metaData
}
// У нас больше нет ссылки на `ref` в этой области видимости блока, поэтому он
// может быть удален сборщиком мусора, даже если он является ключом в `wm`, к
// которому у нас все еще есть доступ.
Допустим, у вас есть массив собак, где каждая собака имеет имя и рейтинг. (Если это кажется странным примером, знайте, что существует аккаунт в Twitter, который специализируется именно на этом… Не спрашивайте!)
// Обратите внимание, что массив предварительно отсортирован по алфавиту по `name`.
const doggos = [
{ name: 'Abby', rating: 12 },
{ name: 'Bandit', rating: 13 },
{ name: 'Choco', rating: 14 },
{ name: 'Daisy', rating: 12 },
{ name: 'Elmo', rating: 12 },
{ name: 'Falco', rating: 13 },
{ name: 'Ghost', rating: 14 },
];
// Сортируем собак по рейтингу в порядке убывания.
// (Это обновляет `doggos` на месте.)
doggos.sort((a, b) => b.rating - a.rating);
Object.fromEntries — это полезное дополнение к встроенной библиотеке JavaScript. Перед тем как объяснить, что он делает, важно понять существующий API Object.entries.
Object.entriesAPI Object.entries существует уже некоторое время.
Для каждой пары ключ-значение в объекте Object.entries предоставляет массив, где первый элемент — это ключ, а второй элемент — значение.
Object.entries особенно полезен в сочетании с for-of, так как он позволяет элегантно проходить по всем парам ключ-значение в объекте:
const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]
for (const [key, value] of entries) {
console.log(`Значение ${key} равно ${value}.`);
}
// Результат:
// Значение x равно 42.
// Значение y равно 50.
К сожалению, нет простого способа преобразовать результат entries обратно в эквивалентный объект… до настоящего момента!
Object.fromEntriesНовый API Object.fromEntries выполняет обратное преобразование от Object.entries. Это делает легким восстановление объекта на основе его пар:
const object = { x: 42, y: 50 };
const entries = Object.entries(object);
// → [['x', 42], ['y', 50]]
const result = Object.fromEntries(entries);
// → { x: 42, y: 50 }
Один из частых случаев использования заключается в преобразовании объектов. Теперь вы можете делать это, проходя по его парам и используя методы массивов, которые вам уже знакомы:
const object = { x: 42, y: 50, abc: 9001 };
const result = Object.fromEntries(
Object.entries(object)
.filter(([ key, value ]) => key.length === 1)
.map(([ key, value ]) => [ key, value * 2 ])
);
// → { x: 84, y: 100 }
В этом примере мы фильтруем объект, чтобы оставить только ключи длиной 1, то есть только ключи x и y, исключая ключ abc. Затем мы преобразуем оставшиеся пары и возвращаем обновленные пары ключ-значение для каждой. В этом примере мы удваиваем каждое значение, умножая его на 2. Конечный результат — новый объект, содержащий только свойства x и y с новыми значениями.
С момента появления промисов в ES2015 JavaScript поддерживал ровно два комбинатора promise: статические методы Promise.all и Promise.race.
Два новых предложения в настоящее время проходят процесс стандартизации: Promise.allSettled и Promise.any. С этими дополнениями в JavaScript будут доступны четыре комбинатора promise, каждый из которых позволяет решать свои задачи.
Array.prototype.flatМассив в этом примере имеет несколько уровней вложенности: он содержит массив, который, в свою очередь, содержит другой массив.
const array = [1, [2, [3]]];
// ^^^^^^^^^^^^^ внешний массив
// ^^^^^^^^ вложенный массив
// ^^^ самый глубокий массив
Array#flat возвращает одномерную версию многомерного массива.
array.flat();
// → [1, 2, [3]]
// …эквивалентно:
array.flat(1);
// → [1, 2, [3]]
Глубина по умолчанию равна 1, но можно указать любое число для рекурсивного свёртывания до этой глубины. Чтобы продолжать свёртывание рекурсивно, пока в результате не останется вложенных массивов, нужно передать Infinity.
// Рекурсивное свёртывание до полного удаления вложенных массивов:
array.flat(Infinity);
// → [1, 2, 3]
Почему этот метод называется Array.prototype.flat, а не Array.prototype.flatten? Прочтите наш разбор #SmooshGate, чтобы узнать!
Array.prototype.flatMapВот ещё один пример. У нас есть функция duplicate, которая принимает значение и возвращает массив, содержащий это значение дважды. Если применить duplicate к каждому значению массива, получится вложенный массив.
const duplicate = (x) => [x, x];
[2, 3, 4].map(duplicate);
// → [[2, 2], [3, 3], [4, 4]]
Затем можно вызвать flat для результата, чтобы свести массив:
[2, 3, 4].map(duplicate).flat(); // 🐌
// → [2, 2, 3, 3, 4, 4]
Поскольку этот шаблон очень распространён в функциональном программировании, для него теперь существует специальный метод flatMap.
[2, 3, 4].flatMap(duplicate); // 🚀
// → [2, 2, 3, 3, 4, 4]
flatMap немного эффективнее, чем выполнение map, за которым следует flat по отдельности.
Интересуетесь вариантами использования flatMap? Ознакомьтесь с объяснением Акселя Раушмайера.
Array#{flat,flatMap}Большие числовые литералы трудно быстро воспринимать человеческим глазом, особенно когда много повторяющихся цифр:
1000000000000
1019436871.42
Для улучшения читаемости новая языковая возможность JavaScript позволяет использовать подчеркивания в качестве разделителей в числовых литералах. Таким образом, приведенный выше пример можно переписать, группируя цифры по тысячам, например:
Часто нужно повторно применять одно и то же регулярное выражение к строке, чтобы получить все совпадения. В некоторой степени это уже возможно с помощью метода String#match.
В этом примере мы найдем все слова, состоящие только из шестнадцатеричных символов, а затем выведем каждое совпадение:
const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.match(regex)) {
console.log(match);
}
// Результат:
//
// 'DEADBEEF'
// 'CAFE'
Однако это дает только подстроки, которые соответствуют. Обычно требуется не только подстроки, но и дополнительная информация, такая как индекс каждой подстроки или группы захвата внутри каждого совпадения.
Уже сейчас можно достичь этого, написав собственный цикл и ведя учет объектов совпадений вручную, но это немного неудобно и не очень удобно:
const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
let match;
while (match = regex.exec(string)) {
console.log(match);
}
// Результат:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]
Новый API String#matchAll делает это проще, чем когда-либо: теперь вы можете написать простой цикл for-of, чтобы получить все объекты совпадений.
const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.matchAll(regex)) {
console.log(match);
}
// Результат:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]
String#matchAll особенно полезен для регулярных выражений с группами захвата. Он предоставляет полную информацию для каждого отдельного совпадения, включая группы захвата.
const string = 'Favorite GitHub repos: tc39/ecma262 v8/v8.dev';
const regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)) {
console.log(`${match[0]} на ${match.index} в '${match.input}'`);
console.log(`→ владелец: ${match.groups.owner}`);
console.log(`→ репо: ${match.groups.repo}`);
}
Современные веб-приложения часто используют списки, состоящие из динамических данных. Например, приложение для просмотра фотографий может отображать что-то вроде:
Эта фотография включает Аду, Эдит и Грейс.
Текстовая игра может иметь другой вид списка:
Выберите свою суперсилу: невидимость, психокинез или эмпатию.
Так как у каждого языка есть свои собственные правила форматирования списков и слова, реализация локализованного форматирования списка является нетривиальной задачей. Это требует не только списка всех слов (например, «и» или «или» в приведенных выше примерах) для каждого поддерживаемого языка — к тому же нужно описать точные правила форматирования для всех этих языков! Unicode CLDR предоставляет эти данные, но чтобы использовать их в JavaScript, их нужно интегрировать и включить в библиотеку. Это, к сожалению, увеличивает размер пакета для таких библиотек, что негативно сказывается на времени загрузки, стоимости обработки/компиляции и потреблении памяти.