5 функций ES2019, которые вы можете использовать сегодня
ECMAScript 2015, также известный как ES6, был основным релизом, для выпуска которого потребовалось шесть лет. С тех пор Технический комитет 39 (ТК39), орган, отвечающий за разработку стандарта ECMAScript, выпускает новую редакцию стандарта каждый год. Этот годовой цикл релизов упростил процесс и быстро сделал доступными новые функции, что приветствовало сообщество JavaScript.
В этом году будет выпущен ECMAScript 2019 (или ES2019 для краткости). Новые функции включают Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(), свойство description для объектов Symbol, необязательная переменная в catch и многое другое.
Хорошей новостью является то, что эти функции уже были реализованы в последних версиях Firefox и Chrome. В этом посте мы подробно рассмотрим эти функции и посмотрим, как они обновляют язык.
1. Object.fromEntries()
Преобразование данных из одного формата в другой очень распространено в JavaScript. Чтобы упростить преобразование объектов в массивы, ES2017 ввел метод Object.entries(). Этот метод принимает объект в качестве аргумента и возвращает массив собственных перечисляемых пар свойств строкового ключа объекта в виде [key, value]. Например:
const obj = {one: 1, two: 2, three: 3};
console.log(Object.entries(obj));
// => [["one", 1], ["two", 2], ["three", 3]]
Но что, если мы хотим сделать обратное и преобразовать список пар ключ-значение в объект? Некоторые языки программирования, такие как Python, предоставляют для этого функцию dict(). В Underscore.js и Lodash также есть функция _.fromPairs.
ES2019 призван привнести аналогичную функцию в JavaScript путем введения метода Object.fromEntries(). Этот статический метод позволяет легко преобразовать список пар ключ-значение в объект:
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);
console.log(obj); // => {one: 1, two: 2, three: 3}
Как вы можете видеть, Object.fromEntries() — это просто противоположность Object.entries(). Хотя раньше было возможно достичь того же результата, это было не очень просто:
const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Array.from(myArray).reduce((acc, [key, val]) => Object.assign(acc, {[key]: val}), {});
console.log(obj); // => {one: 1, two: 2, three: 3}
Имейте в виду, что аргумент, передаваемый Object.fromEntries(), может быть любым объектом, который реализует итеративный протокол, если он возвращает двухэлементный объект в виде массива.
Например, в следующем коде Object.fromEntries() принимает объект Map в качестве аргумента и создает новый объект, ключи и соответствующие значения которого задаются парами в Map:
const map = new Map();
map.set('one', 1);
map.set('two', 2);
const obj = Object.fromEntries(map);
console.log(obj); // => {one: 1, two: 2}
Метод Object.fromEntries() также очень полезен для преобразования объектов. Рассмотрим следующий код:
const obj = {a: 4, b: 9, c: 16};
// convert the object into an array
const arr = Object.entries(obj);
// get the square root of the numbers
const map = arr.map(([key, val]) => [key, Math.sqrt(val)]);
// convert the array back to an object
const obj2 = Object.fromEntries(map);
console.log(obj2); // => {a: 2, b: 3, c: 4}
Этот код преобразует значения в объекте в квадратный корень. Для этого сначала он преобразует объект в массив, а затем использует метод map() для получения квадратного корня из значений в массиве. В результате получается массив массивов, которые можно преобразовать обратно в объект.
Другая ситуация, в которой Object.fromEntries() оказывается полезной, — при работе со строкой запроса URL-адреса, как показано в следующем примере:
const paramsString = 'param1=foo¶m2=baz';
const searchParams = new URLSearchParams(paramsString);
Object.fromEntries(searchParams); // => {param1: "foo", param2: "baz"}
В этом коде строка запроса передается в конструктор URLSearchParams(). Затем возвращаемое значение, которое является экземпляром объекта URLSearchParams, передается методу Object.fromEntries(). Результатом является объект, содержащий каждый параметр в качестве свойства.
Метод Object.fromEntries() в настоящее время является предложением этапа 4, что означает, что он готов для включения в стандарт ES2019.
2. trimStart() и trimEnd()
Методы trimStart() и trimEnd() технически совпадают с методами trimLeft() и trimRight(). Эти методы в настоящее время являются предложениями этапа 4 и будут добавлены в спецификацию для согласованности с padStart() и padEnd(). Давайте рассмотрим несколько примеров:
const str = " string "; // es2019 console.log(str.trimStart()); // => "string " console.log(str.trimEnd()); // => " string" // the same as console.log(str.trimLeft()); // => "string " console.log(str.trimRight()); // => " string"
Для веб-совместимости trimLeft() и trimRight() останутся псевдонимами для trimStart() и trimEnd().
3. flat() и flatMap()
Метод flat() позволяет вам легко объединять все элементы подмассива в массив. Рассмотрим следующий пример:
const arr = ['a', 'b', ['c', 'd']]; const flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"]
Ранее для получения плоского массива вам пришлось бы использовать Reduce() или Concat():
const arr = ['a', 'b', ['c', 'd']]; const flattened = [].concat.apply([], arr); // or // const flattened = [].concat(...arr); console.log(flattened); // => ["a", "b", "c", "d"]
Обратите внимание, что если в предоставленном массиве есть пустые слоты, они будут отброшены:
const arr = ['a', , , 'b', ['c', 'd']]; const flattened = arr.flat(); console.log(flattened); // => ["a", "b", "c", "d"]
flat() также принимает необязательный аргумент, который задает количество уровней, на которые должен быть сведен вложенный массив. Если аргумент не указан, будет использовано значение по умолчанию 1:
const arr = [10, [20, [30]]]; console.log(arr.flat()); // => [10, 20, [30]] console.log(arr.flat(1)); // => [10, 20, [30]] console.log(arr.flat(2)); // => [10, 20, 30]
Метод flatMap() объединяет map() и flat() в один метод. Сначала он создает новый массив с возвращаемым значением предоставленной функции, а затем объединяет все элементы подмассива в массив. Пример должен сделать это более понятным:
const arr = [4.25, 19.99, 25.5]; console.log(arr.map(value => [Math.round(value)])); // => [[4], [20], [26]] console.log(arr.flatMap(value => [Math.round(value)])); // => [4, 20, 26]
Уровень глубины выравнивания массива равен 1. Если вы хотите удалить элемент из результата, просто верните пустой массив:
const arr = [[7.1], [8.1], [9.1], [10.1], [11.1]];
// do not include items bigger than 9
arr.flatMap(value => {
if (value >= 10) {
return [];
} else {
return Math.round(value);
}
});
// returns:
// => [7, 8, 9]
Помимо текущего обрабатываемого элемента, функция обратного вызова также получит индекс элемента и ссылку на сам массив. Методы flat() и flatMap() в настоящее время являются предложениями этапа 4.
4. Описание свойства для объектов Symbol
При создании Symbol вы можете добавить описание для отладки. Иногда полезно иметь прямой доступ к описанию в вашем коде.
Это предложение ES2019 добавляет свойство описания только для чтения к объекту Symbol, которое возвращает строку, содержащую описание Symbol. Вот некоторые примеры:
let sym = Symbol('foo');
console.log(sym.description); // => foo
sym = Symbol();
console.log(sym.description); // => undefined
// create a global symbol
sym = Symbol.for('bar');
console.log(sym.description); // => bar
5. Опциональная переменная в catch
Переменная в catch в выражении try… catch теперь будет опциональным. Рассмотрим следующий код:
try {
// использовать функцию, которую браузер, возможно, не реализовал
} catch (unused) {
// вернуться к уже реализованной функции
}
В этом коде нет смысла для переменной unused в catch. Тем не менее, он все еще должен использоваться, чтобы избежать SyntaxError. Это предложение вносит небольшое изменение в спецификацию ECMAScript, которая позволяет вам пропустить переменную в catch и окружающие ее скобки:
try {
// использовать функцию, которую браузер, возможно, не реализовал
} catch {
// сделать что-то, что не заботится о значение thrown
}
Бонус: ES2020 String.prototype.matchAll
Метод matchAll() является предложением ES2020 этапа 4, которое возвращает объект итератора для всех совпадений, включая группы захвата, для регулярного выражения.
Для согласованности с методом match() TC39 выбрал «matchAll» среди других предложенных имен, таких как «matches» или «scan» Руби. Давайте рассмотрим простой пример:
const re = /(Dr\. )\w+/g;
const str = 'Dr. Smith and Dr. Anderson';
const matches = str.matchAll(re);
for (const match of matches) {
console.log(match);
}
// logs:
// => ["Dr. Smith", "Dr. ", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr. ", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
Группа захвата в этом регулярном выражении соответствует символам «Dr», за которыми следуют точка и пробел. \w+ соответствует любому символу слова один или несколько раз. А флаг g указывает движку искать шаблон по всей строке.
Раньше вам приходилось использовать метод exec() в цикле для достижения того же результата, что было не очень эффективно:
const re = /(Dr\.) \w+/g;
const str = 'Dr. Smith and Dr. Anderson';
let matches;
while ((matches = re.exec(str)) !== null) {
console.log(matches);
}
// logs:
// => ["Dr. Smith", "Dr.", index: 0, input: "Dr. Smith and Dr. Anderson", groups: undefined]
// => ["Dr. Anderson", "Dr.", index: 14, input: "Dr. Smith and Dr. Anderson", groups: undefined]
Важно отметить, что хотя метод match() можно использовать с глобальным флагом g для доступа ко всем совпадениям, он не предоставляет группы захвата или индексную позицию совпадений. Для сравнения:
const re = /page (\d+)/g; const str = 'page 2 and page 10'; console.log(str.match(re)); // => ["page 2", "page 10"] console.log(...str.matchAll(re)); // => ["page 2", "2", index: 0, input: "page 2 and page 10", groups: undefined] // => ["page 10", "10", index: 11, input: "page 2 and page 10", groups: undefined]
Завершение
В этой статье мы подробно рассмотрели несколько ключевых функций, представленных в ES2019, включая Object.fromEntries(), trimStart(), trimEnd(), flat(), flatMap(), свойство description для объектов Symbol и необязательная переменная в catch.
Несмотря на то, что некоторые функции браузеров еще не полностью реализовали эти функции, вы все равно можете использовать их в своих проектах благодаря Babel и другим транспортерам JavaScript.
Темпы развития ECMAScript в последние годы ускорились, и новые функции внедряются и внедряются время от времени, поэтому обязательно ознакомьтесь со списком готовых предложений, чтобы быть в курсе того, что нового. У вас есть несколько советов? Поделитесь ими в комментариях!
Оригинальная статья: Faraz Kelhini 5 ES2019 features you can use today