Если вам нужно выполнить итерацию по массиву и выполнить действие для каждого элемента, вы, вероятно, используете циклы for. Сегодня я попытаюсь объяснить, как работает метод map() и как он поможет вам написать меньше кода, а также сделать ваш код более читабельным.

Что это?

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

Это немутирующий метод, что означает, что вызывающий массив не будет изменен.

Пример:

Вызовите функцию для объединения каждого элемента массива nameArray со строками «Hello» и «!»

const namesArray = ["Doug", "Jane", "Laura", "John"];       
const greetingsArray = namesArray.map((name) => `Hi, ${name}!`);

console.log(greetingsArray); // ["Hi, Doug!", "Hi, Jane!", "Hi, Laura!", "Hi, John!"]
console.log(namesArray); // ["Doug", "Jane", "Laura", "John"]

Теперь, когда мы увидели .map() в действии, давайте взглянем на синтаксис:

array.map(callback(currentValue, index, arr), thisValue)

Параметры:

Этот метод принимает два параметра:

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

∙ currentValue (обязательно): значение текущего элемента, переданного из массива.

∙ index (необязательно): индекс текущего значения.

∙ arr (необязательно): обрабатываемый массив.

2. thisValue (необязательно): значение, которое будет использоваться как this при выполнении обратного вызова. По умолчанию он не определен.

По мере того, как вы знакомитесь с картой, в приведенном ниже примере вы можете увидеть, как мы можем добиться одинаковых результатов, используя как цикл for, так и метод карты.

Использование цикла:

const numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let newArray = [];

for (let i = 0; i < numberArray.length; i++){
    newArray.push(numberArray[i] * 10);
}
console.log(newArray); // [10, 20, 30, 40, 50, 60, 70, 80, 90]
console.log(numberArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Использование карты():

const numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const newArray = numberArray.map((num) => num * 10);
console.log(newArray); // [10, 20, 30, 40, 50, 60, 70, 80, 90]
console.log(numberArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Я хотел бы отметить, что при использовании цикла for вы можете изменить условие для итерации, тогда как с картой функция будет выполняться для каждого элемента в массиве.

Спасибо, что прочитали мою первую статью о разработке, надеюсь, она оказалась вам полезной!