Как преобразовать значения карты в массив в JavaScript

JavaScript имеет гораздо менее известные, но полезные функции. Одной из таких функций является объект Map. Представленный как часть спецификации ECMAScript 2015 (ES6) (и не путать с методом Array.protoype.map()), объект Map хранит упорядоченный список пар ключ-значение. Карты могут быть особенно полезны для хранения простых пар ключ-значение, таких как идентификаторы и имена пользователей:

const users = new Map();
users.set("1", "user1");
users.set("2", "user2");

Самое интересное в использовании Maps заключается в том, что пары ключ-значение могут быть даже больше, чем просто примитивные значения. Например, предположим, что у вас есть те же пользователи, за исключением того, что вы хотите хранить больше информации, чем просто их имя пользователя:

const user1 = {
  username: "user1",
  favoriteColor: "blue",
};
const user2 = {
  username: "user2",
  favoriteColor: "green",
};
const users = new Map();
users.set("1", user1);
users.set("2", user2);

Теперь, когда у нас есть карта и общее понимание ее назначения, как нам на самом деле получить значения карты? В частности, как преобразовать значения Map в массив?

Решение

Объекты карты JavaScript являются повторяемыми, поэтому у нас остается несколько различных способов доступа к значениям карты. Первый способ может прийти на ум, если вы раньше не использовали Карты много раз. В этих примерах мы будем использовать более простую карту, приведенную выше, где значения для краткости представляют собой просто строки.

const result = [];
users.forEach((user) => result.push(user));

В этом решении мы создаем массив result для хранения значений и перебираем карту, добавляя каждое значение в массив. При повторении карты JavaScript каждая запись представляет значение этой пары ключ-значение. Это простое решение, и на самом деле в этом нет ничего плохого. Но можно ли его улучшить?

const result = Array.from(users.values());

Здесь мы используем полезный метод карты: Map.protoype.values(). Этот метод возвращает объект итератора для значений, содержащихся в Map. Поскольку это всего лишь итератор для значений, вам все равно нужно будет повторить эти значения, прежде чем вы получите результат. К счастью, метод Array.from() принимает такой объект итератора и создает новый массив. Это массив с неглубоким копированием, поэтому имейте это в виду, если вы используете его с любыми объектами с глубоко вложенными свойствами.

Окончательное решение кажется самым современным, поскольку оно использует синтаксис распространения ES6:

const result = [...users.values()];

Это решение похоже на предыдущее, но просто распространяет значения в массив, а не использует метод Array.from().

Заключение

Теперь у вас есть несколько различных способов преобразования значений карты в массив в JavaScript. Хотя объект Map не является самым популярным, он определенно найдет место в вашем наборе инструментов, когда дело доходит до создания списка данных, особенно если порядок имеет значение, и вы хотите иметь быстрый и легкий доступ к каждому элементу данных. Могут возникнуть некоторые споры о том, какой метод является наиболее эффективным, но, в конце концов, все зависит от вашего варианта использования и от того, что вам кажется наиболее кратким и удобочитаемым. Если у вас есть какие-либо другие творческие методы или мысли по поводу использованных здесь, пожалуйста, оставьте нам отзыв.

Вот полное решение:

function getValuesFirstApproach(map) {
  const result = [];
  map.forEach((value) => result.push(value));
  return result;
}
function getValuesSecondApproach(map) {
  return Array.from(map.values());
}
function getValuesThirdApproach(map) {
  return [...map.values()];
}
const users = new Map();
users.set("1", "user1");
users.set("2", "user2");
console.log(getValuesFirstApproach(users));
console.log(getValuesSecondApproach(users));
console.log(getValuesThirdApproach(users));