Комментарии (1)
Ответ сгенерирован нейросетью и может содержать ошибки
Полный размотр callback-функции метода map()
Метод Array.prototype.map() принимает callback-функцию в качестве первого обязательного аргумента. Эта функция вызывается для каждого элемента исходного массива. Давайте детально разберем все параметры, которые получает callback.
Синтаксис и параметры callback
Параметры callback-функции строго стандартизированы и передаются в определенном порядке:
arr.map(function callback(currentValue, index, array) {
// Возвращаемое значение становится элементом нового массива
});
1. Текущий обрабатываемый элемент (currentValue)
Это основной параметр, который содержит значение текущего элемента массива на данной итерации.
const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
return num * 2; // num - это currentValue
});
console.log(doubled); // [2, 4, 6]
2. Индекс текущего элемента (index)
Второй параметр - это числовой индекс текущего элемента в исходном массиве. Индекс начинается с 0.
const fruits = ['apple', 'banana', 'cherry'];
const indexed = fruits.map(function(fruit, idx) {
return `${idx}: ${fruit}`;
});
console.log(indexed); // ['0: apple', '1: banana', '2: cherry']
3. Исходный массив (array)
Третий параметр содержит ссылку на весь исходный массив, над которым выполняется map(). Это полезно, когда нужно обратиться к другим элементам массива в процессе трансформации.
const numbers = [10, 20, 30];
const result = numbers.map(function(current, index, arr) {
// Используем исходный массив для вычислений
const nextValue = arr[index + 1] || 0;
return current + nextValue;
});
console.log(result); // [30, 50, 30]
4. Необязательный четвертый параметр - thisArg
Хотя это не параметр callback, а второй аргумент самого метода map(), он влияет на контекст выполнения callback:
const multiplier = {
factor: 3,
multiply(x) {
return x * this.factor;
}
};
const numbers = [1, 2, 3];
const multiplied = numbers.map(
function(num) {
return this.multiply(num);
},
multiplier // thisArg становится значением this в callback
);
console.log(multiplied); // [3, 6, 9]
Особенности использования
- Необязательность параметров: Можно использовать только первый параметр, если остальные не нужны:
[1, 2, 3].map(x => x * 2);
- Стрелочные функции: Со стрелочными функциями
thisArgигнорируется, так как они не имеют собственногоthis:
// this будет undefined в стрелочной функции
const result = [1, 2, 3].map(x => x * this.factor, multiplier);
-
Иммутабельность: Callback не должен мутировать исходный массив. Метод
map()предназначен для трансформации без побочных эффектов. -
Возвращаемое значение: Callback всегда должен возвращать значение, которое станет элементом нового массива. Если функция ничего не возвращает, в новый массив попадет
undefined.
Практический пример со всеми параметрами
const products = [
{ id: 1, name: 'Laptop', price: 1000 },
{ id: 2, name: 'Phone', price: 500 },
{ id: 3, name: 'Tablet', price: 300 }
];
const discountedProducts = products.map(function(item, index, originalArray) {
// Используем все три параметра
const discount = index === originalArray.length - 1 ? 0.2 : 0.1; // Последний товар получает большую скидку
return {
...item,
price: item.price * (1 - discount),
positionInCatalog: index + 1,
totalItemsInCatalog: originalArray.length
};
});
console.log(discountedProducts);
// [
// {id: 1, name: 'Laptop', price: 900, positionInCatalog: 1, totalItemsInCatalog: 3},
// {id: 2, name: 'Phone', price: 450, positionInCatalog: 2, totalItemsInCatalog: 3},
// {id: 3, name: 'Tablet', price: 240, positionInCatalog: 3, totalItemsInCatalog: 3}
// ]
Ключевые выводы
- Callback в
map()всегда получает три параметра: значение элемента, его индекс и ссылку на исходный массив - Порядок параметров фиксирован и соответствует соглашениям JavaScript для методов итерации
thisArg(если передан) устанавливает контекстthisвнутри callback (кроме стрелочных функций)- Callback должен быть чистой функцией без побочных эффектов для корректной работы
- Возвращаемое значение callback определяет содержимое нового массива
Понимание этих параметров критически важно для эффективного использования не только map(), но и других методов массива (filter(), reduce(), forEach()), которые следуют аналогичным соглашениям.