Понимание определенных концепций на любом языке программирования является ключом к изучению того, как овладеть этим языком программирования. Поначалу это может показаться ошеломляющим, но чем больше вы читаете и практикуетесь, тем комфортнее вам становится при кодировании.
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 ().
- Разделите числа в массиве на 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 (). Пожалуйста, оставьте свои комментарии и, конечно же, аплодисменты !!!
Использованная литература:
- freeCodeCamp: использовать метод map для извлечения данных из массива;
- freeCodeCamp: с использованием стрелочных функций;
- Веб-документы MDN: array.prototype.map ();
- Веб-документы MDN: функция обратного вызова;
- Веб-документы MDN: это;