JavaScript метод map()

JavaScript Array

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

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


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


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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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

ECMAScript 5.1 (Реализовано в JavaScript 1.6)

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

ПараметрОписание
function Функция обратного вызова, которая будет выполнена один раз для каждого элемента в массиве. Функция принимает следующие параметры:
  • currentValue - значение текущего элемента
  • index - индекс массива текущего элемента.
  • arr - массив, к которому принадлежит текущий элемент (по которому происходит проход).

Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError. Обязательный параметр.

thisValueОбъект, на который может ссылаться ключевое слово this внутри функции обратного вызова. Если параметр thisValue не используется, то в качестве значения this будет использоваться undefined (в конечном счете this будет зависеть от обычных правил контекста выполнения функции). Необязательный параметр.

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

В следующем примере с использованием 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];
JavaScript Array
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.