Виталий Котов
Как работает метод map() - JavaScript
Автор
Метод map()
создаёт новый массив с результатами вызова функции для каждого элемента массива.
Пример
let numbers = [2, 4, 6, 8, 10];
// функция для возврата квадрата числа
function square(number) {
return number * number;
}
// выполнить функцию Square() к каждому элементу массива numbers
let square_numbers = numbers.map(square);
console.log(square_numbers);
// Вывод в консоль: [ 4, 16, 36, 64, 100 ]
Синтаксис map()
Синтаксис метода map()
следующий:
arr.map(callback(currentValue), thisArg);
Где arr
- это массив.
Параметры map()
Метод map()
принимает:
callback
- функцию, которая будет вызываться для каждого элемента массива, добавляя возвращаемые значения в новый массив. Принимает:
currentValue
- текущий обрабатываемый элемент в массиве.
- функцию, которая будет вызываться для каждого элемента массива, добавляя возвращаемые значения в новый массив. Принимает:
thisArg
(необязательно) - значение, используемое в качествеthis
, при вызове функцииcallback
. По умолчанию определен какundefined
.
Возвращаемое значение map()
Возвращает новый массив с элементами в качестве значений, возвращенных функцией callback
для каждого элемента соответственно.
Примечания:
map()
не изменяет исходный массив.map()
вызывает функциюcallback
один раз для каждого элемента массива по порядку.map()
не вызывает функциюcallback
для элементов массива без значений.
Примеры
Пример 1: Применяем метод map() с использованием пользовательской функции
const prices = [1800, 2000, 3000, 5000, 500, 8000];
let newPrices = prices.map(Math.sqrt);
// [ 42.42640687119285, 44.721359549995796, 54.772255750516614,
// 70.71067811865476, 22.360679774997898, 89.44271909999159 ]
console.log(newPrices);
// пользовательская стрелочная функция
const string = "JavaScript";
const stringArr = string.split(""); // массив с пустой строкой
let asciiArr = stringArr.map((x) => x.charCodeAt(0));
// метод map() не изменяет исходный массив
console.log(stringArr); // ['J', 'a', 'v', 'a','S', 'c', 'r', 'i', 'p', 't']
console.log(asciiArr); // [ 74, 97, 118, 97, 83, 99, 114, 105, 112, 116 ]
Пример 2: Применяем метод map() в массивах с объектами
const employees = [
{ name: "Adam", salary: 5000, bonus: 500, tax: 1000 },
{ name: "Noah", salary: 8000, bonus: 1500, tax: 2500 },
{ name: "Fabiano", salary: 1500, bonus: 500, tax: 200 },
{ name: "Alireza", salary: 4500, bonus: 1000, tax: 900 },
];
// рассчёт чистой суммы (после вычета налогов), которая будет выдана сотрудникам
const calcAmt = (obj) => {
newObj = {};
newObj.name = obj.name;
newObj.netEarning = obj.salary + obj.bonus - obj.tax;
return newObj;
};
let newArr = employees.map(calcAmt);
console.log(newArr);
Вывод в консоль:
[
{ name: "Adam", netEarning: 4500 },
{ name: "Noah", netEarning: 7000 },
{ name: "Fabiano", netEarning: 1800 },
{ name: "Alireza", netEarning: 4600 },
];
Примечание: метод
map()
присваивает значениеundefined
новому массиву, еслиcallback
функция возвращаетundefined
или пустое значение.
Все гайды по Javascript
Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает свойство length - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
.textContent в JavaScript.style в JavaScript.setProperty() в JavaScript.scrollTo() в JavaScript.scrollIntoView() в JavaScript.scrollBy() в JavaScript.removeProperty() в JavaScript.removeEventListener() в JavaScript.querySelectorAll() в JavaScript.querySelector() в JavaScript.outerHTML в JavaScript.innerText в JavaScriptв JavaScript.hidden в JavaScript.getPropertyValue() в JavaScript.getElementsByTagName() в JavaScript.getElementsByClassName() в JavaScript.getAttribute() в JavaScript.focus() в JavaScriptЭлемент в JavaScript.dataset в JavaScript.closest() в JavaScript.classList в JavaScript.blur() в JavaScript.addEventListener() в JavaScript
Объект WeakSet в JavaScriptОбъект TypedArray в JavaScriptОбъект SharedArrayBuffer в JavaScriptОбъект Set в JavaScriptОбъект в JavaScriptОбъект Map в JavaScriptfunction в JavaScriptОбъект DataView в JavaScriptОбъект WeakMap в JavaScriptОбъект Atomics в JavaScriptМассивы в JavaScriptОбъект ArrayBuffer в JavaScript
window.print() в JavaScriptwindow.open() в JavaScriptwindow.navigator в JavaScriptwindow.location в JavaScriptwindow.history в JavaScriptURLSearchParams в JavaScriptsetTimeout() в JavaScriptsetInterval() в JavaScriptsessionStorage в JavaScriptqueueMicrotask() в JavaScriptprompt() в JavaScriptPerformance в JavaScriptwindow.matchMedia в JavaScriptlocalStorage в JavaScriptGeolocation API в JavaScriptFormData в JavaScriptfetch() в JavaScriptDOM в JavaScriptconsole.log() в JavaScriptconfirm() в JavaScriptclearTimeout() в JavaScriptclearInterval() в JavaScriptalert() в JavaScriptBOM в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript