В подкасте 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