JavaScript метод map()

Определение и применение

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

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

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

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

Поддержка браузерами

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
map()	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

// только с callback функцией
var newArray = array.map( function( currentValue, index, arr ) ); 

// с использованием объекта, на который может ссылаться ключевое слово this
var newArray = array.map( function( currentValue, index, arr ), thisValue ); 

Версия JavaScript

Значения параметров

Пример использования

В следующем примере с использованием JavaScript метода map() мы рассмотрим как получить новый массив, который содержит элементы другого массива увеличенные в два раза:

var array = [10, 20, 30]; // инициализируем переменную, содержащую массив числовых значений 

var double = array.map( // вызываем переданную функцию один раз для каждого элемента массива, формируя новый массив
  function doubleNumber( currentValue ) {
    return currentValue * 2;
  }
);
// аналогично с использованием стрелочной функции
let double = array.map( currentValue => currentValue * 2 );

console.log( double ); // выводим значение переменной double равное [20, 40, 60]

В следующем примере мы рассмотрим использование второго аргумента метода map(), который указывает на объект, на который мы можем ссылаться с использованием ключевого слова this внутри функции обратного вызова:

var numbers = [2, 3, 4]; // инициализируем переменную, содержащую массив числовых значений 
var myObject = { // инициализируем переменную, содержащую объект 
  square: function( currentValue ) { // метод объекта, который принимает значение  
    return currentValue * currentValue; // и возвращает его возведенным в квадрат 
  }
};

var squared = numbers.map( // вызываем переданную функцию один раз для каждого элемента массива, формируя новый массив
  function( currentValue ) {
    return this.square( currentValue ); //  возвращаемое значение метода square объекта myObject
  }, myObject // объект, на который мы ссылаемся с использованием ключевого слова this 
);

console.log( squared ); // выводим значение переменной squared равное [4, 9, 16];