Понимание определенных концепций на любом языке программирования является ключом к изучению того, как овладеть этим языком программирования. Поначалу это может показаться ошеломляющим, но чем больше вы читаете и практикуетесь, тем комфортнее вам становится при кодировании.
Array.map () в JavaScript - это концепция, которую некоторые неправильно понимают, а иногда неправильно истолковывают из-за непонимания. Эта статья помогает восполнить этот пробел, подробно объясняя array.map () и приводя примеры того, как его можно использовать.

Что такое Array.map ()?

Array.map () также может называться array.prototype.map ().

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

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

Array.map () Синтаксис

Array.map (обратный вызов функции (currentValue, index, arr), thisValue)

Где,
Обратный вызов: функция обратного вызова - это функция, переданная в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для выполнения какой-либо процедуры или действия, в данном случае в массив.
currentValue: это текущий элемент, обрабатываемый в массиве.
index: это индекс текущего элемента. ( это необязательно)
arr: это массив, для которого вызывается карта. (это необязательно)
thisValue: это значение для использования в качестве этого при выполнении обратных вызовов (необязательно) Это - это свойство контекста выполнения, оно имеет другое значение по сравнению с другими языками программирования. Это может быть ссылка на объект в нестрогом режиме и значение в строгом режиме в JavaScript.

Примеры, объясняющие, как можно использовать Array.map ().

  1. Разделите числа в массиве на 2 и верните новый массив с результатами без изменения исходного массива с помощью метода array.map ():
//declare the array
let numbers = [20, 44, 55, 102, 105];
//using Array.map syntax
let newArray = numbers.map(myFunction)
function myFunction(num) {
return num / 2 ;
}
console.log(newArray);//it returns [10, 22, 27.5, 51, 52.5]

2. Умножьте числа в массиве на значение и верните новый массив с результатами без изменения исходного массива с помощью метода array.map ():

//declare the array
let newNumbers = [20, 44, 55, 102, 105];
//using Array.map syntax & arrow function in ES6 notation
let Array = newNumbers.map(num => num * 2 );
console.log(Array);//it returns [40, 88, 110, 204, 210]

Примечание. Если вы не очень разбираетесь в стрелочной функции, возможно, вам придется ее прочитать, чтобы полностью понять приведенный выше код.

3. Добавьте число к набору чисел в массиве, если индекс меньше или равен array.length, и верните новый массив с результатами без изменения исходного массива с помощью метода array.map ():

//declare the array
let oldNumbers = [15, 18, 20, 25, 34, 45,]
//using Array.map syntax add ten to each number in the array
let addTen = oldNumbers.map(function(num, index){
if(index <= oldNumbers.length){
return num + 10
}
}
)
console.log(addTen)//it returns [25, 28, 30, 35, 44, 55]

4. Умножьте на пять значения в массиве, если индекс меньше пяти, используя метод array.map (). Помните, что индекс начинается с нуля.

//declare the array
let oddNumbers = [3,5,7,9,11,13,15,17,19,21,23,25,27,29]
//using Array.map syntax multiply by 5 all the numbers in the array //when index is less than 5
let multiplyByFive = oddNumbers.map((num, index) =>{
if(index < 5){
return num * 5
}else{return num}
}
)
console.log(multiplyByFive)//it returns[15, 25, 35, 45, 55, 13, 15, 17, 19, 21, 23, 25, 27, 29]

5. Array.map () также можно использовать для извлечения данных из массива.
Предположим, что повар хочет получить доступ к предпочтениям четырех детей на обед из информации ниже:

Я надеюсь, что эта статья поможет вам лучше понять метод array.map (). Пожалуйста, оставьте свои комментарии и, конечно же, аплодисменты !!!

Использованная литература: