Если вам нужно выполнить итерацию по массиву и выполнить действие для каждого элемента, вы, вероятно, используете циклы 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 вы можете изменить условие для итерации, тогда как с картой функция будет выполняться для каждого элемента в массиве.
Спасибо, что прочитали мою первую статью о разработке, надеюсь, она оказалась вам полезной!