Что такое map в javascript

Метод map

Метод map позволяет применить заданную функцию для каждого элемента массива. При этом метод не изменяет исходный массив, а возвращает измененный.

Метод в параметре получает функцию, которая выполнится для каждого элемента массива. То, что вернет эта функция через return для элемента массива, станет новым значением этого элемента (см. примеры).

В функцию можно передавать 3 параметра. Если эти параметры есть (они не обязательны), то в первый автоматически попадет элемент массива, во второй попадет его номер в массиве (индекс), а в третий — сам массив.

Синтаксис

let новый массив = массив.map(function(элемент, индекс, массив) < код return измененный элемент; >);

Пример

Создадим массив, каждый элемент которого вдвое больше соответствующего элемента начального массива:

let arr = [1, 2, 3, 4, 5]; let res = arr.map(function(elem) < return elem * 2; >); console.log(res);

Результат выполнения кода:

[2, 4, 6, 8, 10]

Пример

Создадим массив, каждый элемент которого получается так — значение элемента умножается на его порядковый номер в массиве:

let arr = [1, 2, 3, 4, 5]; let res = arr.map(function(elem, index) < return elem * index; >); console.log(res);

Результат выполнения кода:

[0, 2, 6, 12, 20]

Пример

При необходимости в третий параметр можно передать сам массив:

let arr = [1, 2, 3, 4, 5]; let res = arr.map(function(elem, index, arr) < тут будет доступен массив arr >);

Смотрите также

• метод forEach ,
  который применяет функцию для каждого элемента массива
• метод filter ,
  который позволяет фильтровать элементы массива
• методы some и every ,
  выполняющие проверку массива
• методы reduce и reduceRight ,
  сворачивающие массив к одному значению

Map и Set

Сейчас мы знаем о следующих сложных структурах данных:

• Объекты для хранения именованных коллекций.
• Массивы для хранения упорядоченных коллекций.

Но этого не всегда достаточно для решения повседневных задач. Поэтому также существуют Map и Set .

Map

Map – это коллекция ключ/значение, как и Object . Но основное отличие в том, что Map позволяет использовать ключи любого типа.

Методы и свойства:

• new Map() – создаёт коллекцию.
• map.set(key, value) – записывает по ключу key значение value .
• map.get(key) – возвращает значение по ключу или undefined , если ключ key отсутствует.
• map.has(key) – возвращает true , если ключ key присутствует в коллекции, иначе false .
• map.delete(key) – удаляет элемент (пару «ключ/значение») по ключу key .
• map.clear() – очищает коллекцию от всех элементов.
• map.size – возвращает текущее количество элементов.

let map = new Map(); map.set("1", "str1"); // строка в качестве ключа map.set(1, "num1"); // цифра как ключ map.set(true, "bool1"); // булево значение как ключ // помните, обычный объект Object приводит ключи к строкам? // Map сохраняет тип ключей, так что в этом случае сохранится 2 разных значения: alert(map.get(1)); // "num1" alert(map.get("1")); // "str1" alert(map.size); // 3

Как мы видим, в отличие от объектов, ключи не были приведены к строкам. Можно использовать любые типы данных для ключей.

map[key] это не совсем правильный способ использования Map

Хотя map[key] также работает, например, мы можем установить map[key] = 2 , в этом случае map рассматривался бы как обычный JavaScript объект, таким образом это ведёт ко всем соответствующим ограничениям (только строки/символьные ключи и так далее).

Поэтому нам следует использовать методы map : set , get и так далее.

Map может использовать объекты в качестве ключей.

let john = < name: "John" >; // давайте сохраним количество посещений для каждого пользователя let visitsCountMap = new Map(); // объект john - это ключ для значения в объекте Map visitsCountMap.set(john, 123); alert(visitsCountMap.get(john)); // 123

Использование объектов в качестве ключей – одна из наиболее заметных и важных функций Map . Это то что невозможно для Object . Строка в качестве ключа в Object – это нормально, но мы не можем использовать другой Object в качестве ключа в Object .

Давайте попробуем заменить Map на Object :

let john = < name: "John" >; let ben = < name: "Ben" >; let visitsCountObj = <>; // попробуем использовать объект visitsCountObj[ben] = 234; // пробуем использовать объект ben в качестве ключа visitsCountObj[john] = 123; // пробуем использовать объект john в качестве ключа, при этом объект ben будет замещён // Вот что там было записано! alert( visitsCountObj["[object Object]"] ); // 123

Так как visitsCountObj является объектом, он преобразует все ключи Object , такие как john и ben , в одну и ту же строку «[object Object]» . Это определенно не то, чего мы хотим.

Как объект Map сравнивает ключи

Чтобы сравнивать ключи, объект Map использует алгоритм SameValueZero. Это почти такое же сравнение, что и === , с той лишь разницей, что NaN считается равным NaN . Так что NaN также может использоваться в качестве ключа.

Этот алгоритм не может быть заменён или модифицирован.

Цепочка вызовов

Каждый вызов map.set возвращает объект map, так что мы можем объединить вызовы в цепочку:

map.set("1", "str1") .set(1, "num1") .set(true, "bool1");

Перебор Map

Для перебора коллекции Map есть 3 метода:

• map.keys() – возвращает итерируемый объект по ключам,
• map.values() – возвращает итерируемый объект по значениям,
• map.entries() – возвращает итерируемый объект по парам вида [ключ, значение] , этот вариант используется по умолчанию в for..of .

let recipeMap = new Map([ ["огурец", 500], ["помидор", 350], ["лук", 50] ]); // перебор по ключам (овощи) for (let vegetable of recipeMap.keys()) < alert(vegetable); // огурец, помидор, лук >// перебор по значениям (числа) for (let amount of recipeMap.values()) < alert(amount); // 500, 350, 50 >// перебор по элементам в формате [ключ, значение] for (let entry of recipeMap) < // то же самое, что и recipeMap.entries() alert(entry); // огурец,500 (и так далее) >

Используется порядок вставки

В отличие от обычных объектов Object , в Map перебор происходит в том же порядке, в каком происходило добавление элементов.

Кроме этого, Map имеет встроенный метод forEach , схожий со встроенным методом массивов Array :

// выполняем функцию для каждой пары (ключ, значение) recipeMap.forEach((value, key, map) => < alert(`$: $`); // огурец: 500 и так далее >);

Object.entries: Map из Object

При создании Map мы можем указать массив (или другой итерируемый объект) с парами ключ-значение для инициализации, как здесь:

// массив пар [ключ, значение] let map = new Map([ ['1', 'str1'], [1, 'num1'], [true, 'bool1'] ]); alert( map.get('1') ); // str1

Если у нас уже есть обычный объект, и мы хотели бы создать Map из него, то поможет встроенный метод Object.entries(obj), который получает объект и возвращает массив пар ключ-значение для него, как раз в этом формате.

Так что мы можем создать Map из обычного объекта следующим образом:

let obj = < name: "John", age: 30 >; let map = new Map(Object.entries(obj)); alert( map.get('name') ); // John

Здесь Object.entries возвращает массив пар ключ-значение: [ [«name»,»John»], [«age», 30] ] . Это именно то, что нужно для создания Map .

Object.fromEntries: Object из Map

Мы только что видели, как создать Map из обычного объекта при помощи Object.entries(obj) .

Есть метод Object.fromEntries , который делает противоположное: получив массив пар вида [ключ, значение] , он создаёт из них объект:

let prices = Object.fromEntries([ ['banana', 1], ['orange', 2], ['meat', 4] ]); // prices = < banana: 1, orange: 2, meat: 4 >alert(prices.orange); // 2

Мы можем использовать Object.fromEntries , чтобы получить обычный объект из Map .

К примеру, у нас данные в Map , но их нужно передать в сторонний код, который ожидает обычный объект.

Вот как это сделать:

let map = new Map(); map.set('banana', 1); map.set('orange', 2); map.set('meat', 4); let obj = Object.fromEntries(map.entries()); // создаём обычный объект (*) // готово! // obj = < banana: 1, orange: 2, meat: 4 >alert(obj.orange); // 2

Вызов map.entries() возвращает итерируемый объект пар ключ/значение, как раз в нужном формате для Object.fromEntries .

Мы могли бы написать строку (*) ещё короче:

let obj = Object.fromEntries(map); // убрать .entries()

Это то же самое, так как Object.fromEntries ожидает перебираемый объект в качестве аргумента, не обязательно массив. А перебор map как раз возвращает пары ключ/значение, так же, как и map.entries() . Так что в итоге у нас будет обычный объект с теми же ключами/значениями, что и в map .

Set

Объект Set – это особый вид коллекции: «множество» значений (без ключей), где каждое значение может появляться только один раз.

Его основные методы это:

• new Set(iterable) – создаёт Set , и если в качестве аргумента был предоставлен итерируемый объект (обычно это массив), то копирует его значения в новый Set .
• set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set .
• set.delete(value) – удаляет значение, возвращает true , если value было в множестве на момент вызова, иначе false .
• set.has(value) – возвращает true , если значение присутствует в множестве, иначе false .
• set.clear() – удаляет все имеющиеся значения.
• set.size – возвращает количество элементов в множестве.

Основная «изюминка» – это то, что при повторных вызовах set.add() с одним и тем же значением ничего не происходит, за счёт этого как раз и получается, что каждое значение появляется один раз.

Например, мы ожидаем посетителей, и нам необходимо составить их список. Но повторные визиты не должны приводить к дубликатам. Каждый посетитель должен появиться в списке только один раз.

Множество Set – как раз то, что нужно для этого:

let set = new Set(); let john = < name: "John" >; let pete = < name: "Pete" >; let mary = < name: "Mary" >; // считаем гостей, некоторые приходят несколько раз set.add(john); set.add(pete); set.add(mary); set.add(john); set.add(mary); // set хранит только 3 уникальных значения alert(set.size); // 3 for (let user of set) < alert(user.name); // John (потом Pete и Mary) >

Альтернативой множеству Set может выступать массив для хранения гостей и дополнительный код для проверки уже имеющегося элемента с помощью arr.find. Но в этом случае будет хуже производительность, потому что arr.find проходит весь массив для проверки наличия элемента. Множество Set лучше оптимизировано для добавлений, оно автоматически проверяет на уникальность.

Перебор объекта Set

Мы можем перебрать содержимое объекта set как с помощью метода for..of , так и используя forEach :

let set = new Set(["апельсин", "яблоко", "банан"]); for (let value of set) alert(value); // то же самое с forEach: set.forEach((value, valueAgain, set) => < alert(value); >);

Заметим забавную вещь. Функция в forEach у Set имеет 3 аргумента: значение value , потом снова то же самое значение valueAgain , и только потом целевой объект. Это действительно так, значение появляется в списке аргументов дважды.

Это сделано для совместимости с объектом Map , в котором колбэк forEach имеет 3 аргумента. Выглядит немного странно, но в некоторых случаях может помочь легко заменить Map на Set и наоборот.

Set имеет те же встроенные методы, что и Map :

• set.keys() – возвращает перебираемый объект для значений,
• set.values() – то же самое, что и set.keys() , присутствует для обратной совместимости с Map ,
• set.entries() – возвращает перебираемый объект для пар вида [значение, значение] , присутствует для обратной совместимости с Map .

Итого

Map – коллекция пар ключ-значение.

Методы и свойства:

• new Map([iterable]) – создаёт коллекцию, можно указать перебираемый объект (обычно массив) из пар [ключ,значение] для инициализации.
• map.set(key, value) – записывает по ключу key значение value .
• map.get(key) – возвращает значение по ключу или undefined , если ключ key отсутствует.
• map.has(key) – возвращает true , если ключ key присутствует в коллекции, иначе false .
• map.delete(key) – удаляет элемент по ключу key .
• map.clear() – очищает коллекцию от всех элементов.
• map.size – возвращает текущее количество элементов.

Отличия от обычного объекта Object :

• Что угодно может быть ключом, в том числе и объекты.
• Есть дополнительные методы, свойство size .

Set – коллекция уникальных значений, так называемое «множество».

Методы и свойства:

• new Set(iterable) – создаёт Set , можно указать перебираемый объект со значениями для инициализации.
• set.add(value) – добавляет значение (если оно уже есть, то ничего не делает), возвращает тот же объект set .
• set.delete(value) – удаляет значение, возвращает true если value было в множестве на момент вызова, иначе false .
• set.has(value) – возвращает true , если значение присутствует в множестве, иначе false .
• set.clear() – удаляет все имеющиеся значения.
• set.size – возвращает количество элементов в множестве.

Перебор Map и Set всегда осуществляется в порядке добавления элементов, так что нельзя сказать, что это – неупорядоченные коллекции, но поменять порядок элементов или получить элемент напрямую по его номеру нельзя.

Задачи

Фильтрация уникальных элементов массива

важность: 5

Допустим, у нас есть массив arr .

Создайте функцию unique(arr) , которая вернёт массив уникальных, не повторяющихся значений массива arr .

function unique(arr) < /* ваш код */ >let values = ["Hare", "Krishna", "Hare", "Krishna", "Krishna", "Krishna", "Hare", "Hare", ":-O" ]; alert( unique(values) ); // Hare,Krishna,:-O

P.S. Здесь мы используем строки, но значения могут быть любого типа.

P.P.S. Используйте Set для хранения уникальных значений.

function unique(arr)

Array.prototype.map()

Метод map() создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.

Синтаксис

const new_array = arr.map(function callback( currentValue[, index[, array]]) < // Возвращает элемент для new_array >[, thisArg])

Параметры

Функция, вызываемая для каждого элемента массива arr . Каждый раз, когда callback выполняется, возвращаемое значение добавляется в new_array .

Функция callback , создающая элемент в новом массиве, принимает три аргумента:

Текущий обрабатываемый элемент массива.

Индекс текущего обрабатываемого элемента в массиве.

Массив, по которому осуществляется проход.

Необязательный параметр. Значение, используемое в качестве this при вызове функции callback

Возвращаемое значение

Новый массив, где каждый элемент является результатом callback функции.

Описание

Метод map вызывает переданную функцию callback один раз для каждого элемента, в порядке их появления и конструирует новый массив из результатов её вызова. Функция callback вызывается только для индексов массива, имеющих присвоенные значения, включая undefined . Она не вызывается для пропущенных элементов массива (то есть для индексов, которые никогда не были заданы, которые были удалены или которым никогда не было присвоено значение.

Функция callback вызывается с тремя аргументами: значением элемента, индексом элемента и массивом, по которому осуществляется проход.

Если в метод map был передан параметр thisArg , при вызове callback он будет использоваться в качестве значения this . В противном случае в качестве значения this будет использоваться значение undefined . В конечном итоге, значение this , наблюдаемое из функции callback , определяется согласно обычным правилам определения this , видимого из функции.

Метод map не изменяет массив, для которого он был вызван (хотя функция callback может это делать).

Диапазон элементов, обрабатываемых методом map , устанавливается до первого вызова функции callback . Элементы, добавленные в массив после начала выполнения метода map , не будут посещены функцией callback . Если существующие элементы массива изменяются функцией callback , их значения, переданные в функцию, будут значениями на тот момент времени, когда метод map посетит их; удалённые элементы посещены не будут.

Примеры

Пример: отображение массива чисел на массив квадратных корней

Следующий код берёт массив чисел и создаёт новый массив, содержащий квадратные корни чисел из первого массива.

const numbers = [1, 4, 9]; const roots = numbers.map(Math.sqrt); // теперь roots равен [1, 2, 3], а numbers всё ещё равен [1, 4, 9] 

Пример: отображение массива чисел с использованием функции, содержащей аргумент

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

const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // теперь doubles равен [2, 8, 18], а numbers всё ещё равен [1, 4, 9] 

Пример: обобщённое использование map

Этот пример показывает, как использовать map на объекте строки String для получения массива байт в кодировке ASCII, представляющего значения символов:

const map = Array.prototype.map; const charCodes = map.call("Hello World", (x) => x.charCodeAt(0)); // теперь charCodes равен [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] 

Пример: обобщённое использование map вместе с querySelectorAll

Этот пример показывает, как пройтись по коллекции объектов, собранных с помощью querySelectorAll . В данном случае мы получаем все выбранные опции на экране и печатаем их в консоль:

const elems = document.querySelectorAll("select option:checked"); const values = Array.prototype.map.call(elems, ( value >) => value); 

Более простым способом будет использование метода Array.from() .

Пример: использование map для переворачивания строки

const string = "12345"; const reversed = Array.prototype.map .call(string, (x) => x) .reverse() .join(""); // reversed равен '54321' // Бонус: используйте '===' для проверки того, является ли строка палиндромом 

Более простым способом будет использование метода String.split() (см. пример обращение строки при помощи метода split()).

Пример: хитрый вариант использования

Распространённой практикой является использование колбэк-функции с одним аргументом (элемент, над которым производится операция). Некоторые функции также широко используется с одним аргументом, хотя они принимают дополнительные необязательные аргументы. Эти привычки могут привести к неожиданному поведению программы.

// Рассмотрим пример: ["1", "2", "3"].map(parseInt); // Хотя ожидаемый результат вызова равен [1, 2, 3], // в действительности получаем [1, NaN, NaN] // Функция parseInt часто используется с одним аргументом, но она принимает два. // Первый аргумент является выражением, а второй - основанием системы счисления. // В функцию callback Array.prototype.map передаёт 3 аргумента: // элемент, его индекс и сам массив. // Третий аргумент игнорируется parseInt, но не второй, следовательно, // возможна путаница. Смотрите запись в блоге для дополнительной информации. const returnInt = (element) => parseInt(element, 10); ["1", "2", "3"].map(returnInt); // Результатом является массив чисел (как и ожидалось) // Простейший способ добиться вышеозначенного поведения и избежать чувства "чё за!?": ["1", "2", "3"].map(Number); // [1, 2, 3] 

Спецификации

Specification
ECMAScript Language Specification # sec-array.prototype.map

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Polyfill of Array.prototype.map in core-js
• Array.prototype.forEach()
• объект Map (en-US)
• Array.from()

Что такое map в javascript

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

const myMap = new Map();

Также можно инициализировать словарь начальными значениями. Для этого в конструктор передается массив, элементы которого представляют массивы из двух элементов — первый элемент будет выступать в качестве ключа, а второй — в качестве значения:

const myMap = new Map([[1, "a"], [2, "b"], [3, "c"]]); console.log(myMap); // Map(3) "a", 2 => "b", 3 => "c">

В данном случае числа 1, 2, 3 являются ключами, а строки «a», «b», «c» — значениями.

При этом ключи и значения необзательно должны быть одного типа. Тип ключей и значений может совпадать::

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); console.log(dict); // Map(3) "красный", "green"=> "зеленый", "blue"=>"синий">

Размер словаря

С помощью свойства size можно проверить количество элементов в Map:

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); console.log(dict.size); // 3

Добавление и изменение элементов

Для установки значения применяется метод set() :

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); dict.set("yello", "желтый"); // добавление элемента dict.set("red", "червонный"); // изменение элемента console.log(dict); // Map(4) "червонный", "green" => "зеленый", "blue" => "синий", "yello" => "желтый">

Первый параметр метода set() представляет ключ, а второй параметр — значение элемента. Если по такому ключу нет элементов, то добавляется новый элемент. Если ключ уже есть, то уже имеющийся элемент изменяет свое значение.

Получение элементов

Для получения элемента по ключу применяется метод get() , в который передается ключ элемента:

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); console.log(dict.get("red")); // красный console.log(dict.get("violet")); // undefined

Если map не содержит элемента по заданному ключу, то метод возвращает undefined.

Чтобы избежать возвращения undefined мы можем проверить наличие элемента по ключу с помощью метода has() . Если элемент по ключу имеется, то метод возвращает true , иначе возвращается false :

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); console.log(dict.has("red")); // true console.log(dict.has("violet")); // false if(dict.has("red")) console.log(dict.get("red")); // красный

Удаление элементов

Для удаления одного элемента по ключу применяется метод delete() :

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); dict.delete("red"); console.log(dict); // Map(2) "зеленый", "blue" => "синий">

Для удаления всех элементов используется метод clear() :

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); dict.clear(); console.log(dict); // Map(0)<>

Перебор элементов

Для перебора элементов используется метод forEach :

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); dict.forEach(function(value, key, map)< console.log(key, ":", value); >)

Метод forEach в качестве параметра получает функцию обратного вызова, которая имеет три параметра. Первый и второй параметры — это соответственно значение и ключ текущего перебираемого элемента, а третий параметр — перебираемый объект Map.

Консольный вывод данного примера:

red : красный green : зеленый blue : синий

Также для перебора объекта Map можно использовать циклы, например, цикл for. of :

const dict = new Map([[«red», «красный»], [«green», «зеленый»], [«blue», «синий»]]); for(item of dict)

Каждый элемент из Map помещается в переменную item, которая в свою очередь представляет массив. Первый элемент этого массива — ключ, а второй элемент — значение элемента.

Также объект Map имеет два дополнительных метода: keys() позволяет перебрать только ключи и values() позволяет перебирать значения элементов. Оба метода возвращают итераторы, поэтому для перебора ключей и значений по отдельности также можно использовать цикл for. of:

const dict = new Map([["red", "красный"], ["green", "зеленый"], ["blue", "синий"]]); for(item of dict.keys()) < console.log(item); >// Консольный вывод: // red // green // blue for(item of dict.values()) < console.log(item); >// Консольный вывод: // красный // зеленый // синий