Карты JavaScript и как их использовать

Несколько дней назад мой коллега поделился этим постом о картах JavaScript и преимуществах их использования. Карта - это новая функция JavaScript. Доступен только с ES6. Так что неудивительно, что это не такая популярная функция, как должно быть. Опять же, использование обычного объекта может показаться более удобным в использовании, чем карта. Это причина для этого сообщения. Я не объясняю, почему вам следует использовать карты. Но это шпаргалка о том, как их использовать.

Основы

Если вы хотите заменить объекты JavaScript картами, вы хотите, чтобы они поддерживали те же основные функции. И они это делают, только немного по-другому. В следующих примерах показано, как создать карту, вставить элемент, получить его и удалить с карты.

Создание карты

Карта - это объект; следовательно, вам нужно использовать новое ключевое слово для его создания.

const map = new Map();

Использование карты

Создав его, вы можете использовать список различных функций, которые он предоставляет.

// insert into map
map.set("key", "value");
// get value from map
map.get("key"); //value
// get value for non-existing key
map.get("non-existing-key"); // undefined
// remove item from map
map.delete("key"); // true

Я думаю, что все три функции говорят сами за себя, поэтому я не буду их объяснять. Но я хочу упомянуть две вещи. Первый - это установка элементов. Если значение с таким же ключом уже существует, ошибки или предупреждения нет. Результат - единственное новое значение. Второе - это удаление. Если вы попытаетесь удалить несуществующий ключ, возвращаемое значение будет ложным. В противном случае верно. Метод удаления возвращает логическое значение, указывающее, было ли удаление успешным.

Другие полезные функции

Есть целый набор полезных функций, которые делают работу с картами проще, чем с объектами.

Содержащий элемент

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

// insert into map
map.set("key", "value");
// check if key exists
map.has("key"); // true
map.has("non-existing-key"); // false

Удаление всех значений

Использование функции удаления удаляет из него один элемент. Но вы не можете запускать его для каждой клавиши, если хотите очистить карту. Поэтому есть четкая функция.

map.clear();

Количество элементов на карте

С обычными объектами JavaScript проверять, пуст ли он, беспорядочно. Сначала вы используете функцию ключей объекта Object, чтобы получить их список. Затем вам нужно проверить количество этих ключей. У карт это одно свойство - размер.

// size of objects
const obj = {}
const sizeOfObj = Object.keys(obj).length; // 0
// size of maps
const map = new Map();
const sizeOfMap = map.size; // 0

Другие функции объекта

Как показано в предыдущем примере, вы можете использовать функции Object для объектов JavaScript. Карта поддерживает их изначально.

// old way
const obj = { test: 123 }
Object.keys(obj); // ["test"]
Object.values(obj); // [123]
Object.entries(obj); // [["test", 123]]
// new Map object
const map = new Map();
map.set("test", 123);
map.keys(); // MapIterator {"test"}
map.values(); // MapIterator {123}
map.entries(); // MapIterator {"test" => 123}

Вы могли заметить, что для карты все результаты являются экземплярами MapIterator. К сожалению, это означает, что вы не можете использовать для них функции массива (map, filter, forEach, reduce). Вы можете использовать цикл for..of. Но хорошая новость в том, что есть простой способ получить его в виде массива.

// Just use Array.from function
Array.from(map.keys()); ["test"]

Создание карты из JSON

Если вы используете JavaScript, велика вероятность, что вы взаимодействуете с каким-то сервером. В этом случае сервер, вероятно, вернет вам JSON. Итак, вопрос в том, как преобразовать его в карту? Если у вас есть один уровень глубины, следующий пример - самый простой способ. Если уровень глубины больше единицы, вам нужно сначала преобразовать каждое значение в карту.

const obj = {
    firstName: "john",
    lastName: "doe"
};
const asMap = new Map(Object.entries(obj)); // Map(2) {"firstName" => "john", "lastName" => "doe"}

Как упоминалось выше, эта одна линия работает только для уровня глубины объекта, равного единице. Если какое-либо значение в нем является объектом, вам необходимо преобразовать его индивидуально. Но для этого вы также можете использовать этот пакет NPM конвертера в карту.

Чтобы узнать больше, вы можете подписаться на меня в Twitter, LinkedIn, GitHub или Instagram.