JavaScript

JavaScript Map получает upsert!

Spread the love

Оригинальная статья: Laurie  – JavaScript Map is getting upsert!

В JavaScript предлагается новый элемент синтаксиса!

Спонсор поста Каталог мобильных приложений AppVisor.ru:

Проект AppVisor.ru основан в 2012 году для того, что бы решить проблему, с которой столкнулись авторы, используя те или иные вычислительные устройства. Где найти лучшие программы и приложения для ваших мобильных гаджетов, компьютеров? Что если существует масса полезных приложений, а вы о них не знаете?

Что такое Map?

Map – это структура данных в JavaScript, о которой вы, возможно, не слышали! Когда вы слышите о map, вы, вероятно, думаете что это что то типа Array.prototype.map.

Но Map это другое. Это объект в JavaScript, который содержит пары ключ-значение.

Подождите секунду … чем это отличается от Object ?!

У них есть некоторые сходства. Фактически, раньше всегда использовался Object для этих целей. Однако есть и различия:

  • Не имеет prototype, поэтому не будет никаких ключей, кроме тех что вы создали
  • Ключами может быть что угодно, включая функции или объекты
  • запоминается порядок вставки ключей
  • поставляется с функцией size()
  • итерируемы (Iterables)
  • могут быть более производительными при частом добавлении или удалении пар ключ-значение

Добавляем значения

Вы можете создать Map и добавить пары ключ-значение, используя функцию set.

let example = new Map()
example.set('test', 'value')
// пример Map { 'test' => 'value' }

Однако, если вы установите что-то с тем же ключом, значение будет перезаписано.

example.set('test', true)
// пример Map { 'test' => true }

Если вы хотите работать с определенным ключом, то в начале вам нужно убедиться, что он есть, и создать его, только если его нет.

if (!example.has('test')) {
  example.set('test', 'new value')
}
example.get('test').myFunctionForMessingWithThisKeyEntry()

И это не единственная подобная ситуация. Возможно, вы захотите вставить ключ, если он отсутствует, только обновить, если он присутствует, и т. д. Было бы неплохо не выполнять проверки существования и использовать set и get в любой момент.

И тут приходит upsert

upsert делаем это проще!
upsert функция входит в prototype Map. Ей требуется всего три аргумента:

Первый аргумент – это ключ, который вы хотите использовать.

Второй – это функция, которая будет использовать если ключ уже существует.

Третий – это функция которая будет использоваться, если ключ не существует.

Таким образом, наш предыдущий пример становится таким.

example
  .upsert('test', undefined, () => 'new value')
  .myFunctionForMessingWithThisKeyEntry()

В этом случае мы оставляем существующее значение в покое, если оно уже существует, то есть undefined.

В качестве альтернативы, у нас есть этот пример.

example.upsert('test', old => old.someOperation(), undefined)

Здесь old эквивалентен map.get (‘test’). Если ключ не существует, мы ничего не делаем.

Из этих двух примеров становится ясно, что существует множество различных возможностей использования upsert.

TC39 Stage 2

Это предложение (proposal) в настоящее время находится на этапе 2 процесса TC39. Если вы заинтересованы в участии в этом разговоре, пожалуйста присоединяйтесь (https://github.com/tc39/proposal-upsert)!

Была ли вам полезна эта статья?
[3 / 3]

Spread the love
OlegA

View Comments

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

  • > Не имеет prototype, поэтому не будет никаких ключей, кроме тех что вы создали

    Сомнительно. Прототип есть, `__proto__` указывает на `Map.prototype`. Тот же `upsert` именно там и будет находиться.

Recent Posts

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование​ v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

4 месяца ago

Анонс Vue 3.4

Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…

4 месяца ago

Как принудительно пере-отобразить (re-render) компонент Vue

Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…

1 год ago

Проблемы с установкой сертификата на nginix

Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…

1 год ago

Введение в JavaScript Temporal API

Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…

1 год ago

Когда и как выбирать между медиа запросами и контейнерными запросами

Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…

1 год ago