В подкасте Real Talk JavaScript Episode 46: Using New JavaScript Features блестящая Tara Manicsic рассказала о процессе приема TC39 и некоторых новых функциях ES2019, которые ей нравятся: в основном Array.flat/flatMap и Object.fromEntries. Итак, давайте посмотрим, о чем идет речь.
Array.flat и Array.flatMap
В документации сказано:
Array.prototype.flat
возвращает новый массив со всеми элементами подмассива, объединенными в него рекурсивно до указанной глубины.
Array.prototype.flatMap
сначала сопоставляет каждый элемент с помощью функции сопоставления, а затем объединяет результат в новый массив. Он идентичен карте, за которой следует сглаживание глубины 1, но flatMap довольно часто бывает полезен, а слияние обоих в один метод немного более эффективно.
Давайте разберем это на реальных примерах кода.
Array.prototype.flat
Это означает, что массив, содержащий другие массивы, может быть «сведен» в другой массив: [[1, 2, 3], [4, 5, 6]]
-> [1, 2, 3, 4, 5, 6]
И это можно сделать на нескольких глубинах:
[[1, 2, 3], [4, 5, 6], [7, [8, 9]]]
можно сгладить до [1, 2, 3, 4, 5, 6, 7, 8, 9]
и так далее.
Обычно этого можно добиться с помощью рекурсивной функции, или одного из многих других решений, но писать это не очень весело, а в рекурсии легко ошибиться. Функция flat
очень удобна и позволяет не тратить время на переписывание того, что было сделано до смерти, или полагаться на удобную библиотеку, такую как lodash. Функция flat
принимает аргумент глубины (по умолчанию 1), который позволяет вызывающей стороне указать, сколько уровней должно быть сведено.
const numbers = [[1, 2, 3], [4, 5, 6], [7, [8, 9]]]; numbers.flat(); // [1, 2, 3, 4, 5, 6, 7, [8, 9]]; numbers.flat(1); // [1, 2, 3, 4, 5, 6, 7, [8, 9]]; (same as above) numbers.flat(2); // [1, 2, 3, 4, 5, 6, 7, 8, 9];
Array.prototype.flatMap
Функция flatMap похожа на создание карты, за которой следует плоскость, а не наоборот, как следует из названия.
Без flat
или flatMap
нам пришлось бы написать так:
const words = ["it's always", "sunny in", "philadelphia"]; words.reduce((a, w) => a.concat(w.split(" ")), []); // ["it's", "always", "sunny", "in", "philadelphia"]
С flat
теперь это возможно:
const words = ["it's always", "sunny in", "philadelphia"]; words.map(x => x.split(' ')).flat(1); // ["it's", "always", "sunny", "in", "philadelphia"]
С flatMap
еще проще:
const words = ["it's always", "sunny in", "philadelphia"]; words.flatMap(x => x.split(' ')); // ["it's", "always", "sunny", "in", "philadelphia"]
Объект.fromEntries
Чтобы понять Object.fromEntries
, давайте сначала посмотрим на Object.entries
. Это удобный способ преобразования и массива в объект, который используется постоянно.
Допустим, служба возвращает что-то вроде этого:
{ "1": { "id": 1, "name": "Joe" }, "2": { "id": 2, "name": "Mary" } }
Этот тип полезной нагрузки довольно типичен, и нет ничего удивительного в том, что его нужно перебирать, и один из способов сделать это — преобразовать его в массив.
Для этого я могу использовать Object.entries
Object.entries(payload);
Каждая пара ключ/значение хранится в виде массива в массиве, поэтому наша полезная нагрузка будет выглядеть так:
[ ["1", { id: 1, name: "Joe" }], ["2", { id: 2, name: "Mary" }] ];
Довольно полезно!
Object.fromEntries
— полная противоположность, он преобразует массив в объект:
const array = [ [1, { id: 1, name: "John" }], [2, { id: 2, name: "Mary" }] ]; const users = Object.fromEntries(array); // {"1": { id: 1, name: "John" }, "2": { id: 2, name: "Mary" }}
Без Object.fromEntries нам нужно было бы написать что-то вроде этого:
array.reduce((acc, v) => { acc[v[0]] = v[1]; return acc; }, {});
Легко увидеть, как Object.fromEntries упрощает код!
Узнайте больше о предстоящих функциях в JavaScript (например, стабильный Array.prototype.sort()) на сайте Акселя Раушмайера: https://2ality.com