JavaScript с нуля

Изменение каждого элемента с помощью map

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

Рис. 13.6. Оригинальный и новый массивы

Используется map следующим образом:

let newArray = originalArray.map(someFunction);

Эта единственная строка выглядит приятно и располагающе, но изнутри является весьма сложной. Давайте с этим разберемся. Работает метод map так: вы вызываете его для массива, на который хотите воздействовать (originalArray), и передаете ему функцию (someFunction) в качестве аргумента. Функция будет выполняться для каждого элемента массива, то есть вы изначально сможете написать код для изменения всех этих элементов на ваше усмотрение. В конечном итоге вы получите новый массив, содержащий данные, полученные после выполнения функции someFunction для элементов оригинального массива. Звучит просто, не правда ли?

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

let names = ["marge", "homer", "bart", "lisa", "maggie"];

function capitalizeItUp(item) {

let firstLetter = item.charAt(0). toUpperCase();

return firstLetter + item.slice(1);

}

let newNames = names.map(capitalizeItUp);

console.log(newNames);

Разберемся, как этот код работает. Нас интересует функция capitalizeItUp, переданная в виде аргумента методу map. Эта функция выполняется для каждого элемента, и стоит обратить внимание, что текущий элемент передается ей в качестве аргумента. Для ссылки на аргумент текущего элемента вы можете использовать любое имя на ваш выбор. Мы ссылаемся на этот аргумент с помощью банального item:

function capitalizeItUp(item) {

let firstLetter = item.charAt(0). toUpperCase();

return firstLetter + item.slice(1);

}

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

function capitalizeItUp(item) {

let firstLetter = item.charAt(0). toUpperCase();

return firstLetter + item.slice(1);

}

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

Функции обратных вызовов

Наша функция capitalizeItUp также известна как функция обратного вызова. Такие функции подразумевают два действия:

• передачу в качестве аргумента другой функции;

• вызов из другой функции.

Вы будете встречать ссылки на функции обратных вызовов постоянно. Например, когда мы вскоре начнем рассматривать методы filter и reduce. Если вы слышите о них впервые, то теперь будете иметь о них лучшее представление. Если же вы были знакомы с этими функциями ранее, тем лучше для вас.