Функция Javascript array map () — это чистая функция, и она не изменяет существующий массив, вместо этого она возвращает новый массив.
Javascript array map ( )
Javascript array map () — это встроенная функция, которая создает новый массив с результатами предоставленной функции для каждого элемента в вызывающем массиве. Функция map () вызывает предоставленную функцию обратного вызова один раз для каждого элемента в массиве и по порядку и создает новый массив из результатов.
Карта ( ) метод вызывает предоставленную функцию один раз для каждого элемента в массиве по порядку. Функция обратного вызова вызывается со следующими тремя аргументами: значением элемента, индексом элемента и объектом Array, по которому выполняется обход.
Синтаксис следующий.
array.map (function (currentValue, index, arr), thisValue)
Параметры
currentValue — обязательный параметр, и это текущее значение элемента.
index — необязательный параметр, и это индекс текущего элемента.
arr — это необязательный параметр, который является объектом массива, которому принадлежит текущий элемент.
Под капотом функция map передает три аргумента вашему обратному вызову:
- текущий элемент в массиве
- индекс массива текущего элемента
- весь массив , на котором вы вызвали карту
Если существующие элементы массива изменяются в соответствии с логикой, то их значение, переданное в обратный вызов, будет v alue в то время, когда карта посещает их.
Давайте рассмотрим пример, создав файл с именем app.js. Добавьте следующий код.
let numbers = [1, 2, 3]; let squares = numbers.map (item => item * item); console.log (squares) ;
Итак, в приведенном выше примере массив чисел будет пройден и выполнит квадратную операцию для каждого элемента массива и вернет новый массив с этими элементами, заполненными. Таким образом, новый массив будет состоять из квадратов каждого элемента.
Использование карты для переформатирования объектов в массиве
Мы также можем использовать метод карты для форматирования объекта в данном массиве, как в следующем коде.
//app.jslet gtu = [{enrollnumber: 18, name: 'Shree'}, {enrollnumber: 21, name: 'Krunal'}, {enrollnumber: 22, name: 'Rushikesh' }]; let mappedArrayObj = gtu.map (obj => {let newObj = {}; newObj [obj.enrollnumber] = obj.name; return newObj;}); console.log (mappedArrayObj);
Итак, в приведенном выше примере мы взяли массив объектов. У объекта есть два свойства. Итак, мы переформатировали новый объект, создав значение первого объекта как ключ, а значение второго объекта как значение.
Итак, результат будет таким.
Индекс доступа к массиву в методе map ()
Мы можем получить доступ к индексу, минуя второй аргумент функции обратного вызова.
//app.jslet no = [1, 3, 4, 5]; no.map ((item, i) => console.log (i));
Теперь вы можете получить доступ ко всему индексу текущего повторяемого элемента.
Мы можем определить функцию отдельно и передать значение этой функции и получить результат.
//app.jslet no = [1, 3, 4, 5]; const square = ( x) => {return x * x;} let newArray = no.map ((item, i) => square (item)); console.log (newArray);
В приведенном выше Например, мы определили функцию отдельно и передаем текущий элемент в эту функцию, и эта функция возвращает квадрат этого элемента.
Метод Javascript Array map () является чистая функция, и если у вас есть опыт работы с Redux, то он вам знаком. Он всегда будет возвращать новый массив, что является принципом неизменности.
Если нам нужно преобразовать весь массив в новый массив, то map () — полезный метод в Javascript.
Вам следует использовать метод filter (), а не map, если вы не хотите изменять элементы в массиве в дополнение к фильтрации.
Map, For цикл и функция forEach
Давайте возьмем три одинаковых примера, но реализация будет отличаться с использованием метода Javascript map (), цикла Javascript for и функции Javascript forEach ().
Давайте создадим еще один массив, используя цикл for.
//app.jslet strangerThings = [{name: 'Dustin', age: 13}, {name: 'Майк', возраст: 12}, {имя: 'Одиннадцать', возраст: 11}]; let characters = []; for (let i = 0, max = strangerThings.length; i См. следующий вывод.
es git: (master) ✗ node app ['Dustin', 'Mike', 'Eleven'] ➜ es git: (master) ✗
В приведенном выше примере мы повторяем каждый элемент один за другим и добавляем имена в новый массив.
Теперь давайте посмотрим на этот пример, используя функцию Javascript forEach.
//app.jslet strangerThings = [{name: 'Dustin', возраст: 13}, {name: 'Mike', age: 12}, {name: 'Eleven', age: 11} ]; let characters = []; strangerThings.forEach (function (role) {characters.push (role.name);});
См. следующий вывод.
➜ es git: (master) ✗ node app ['Dustin', 'Mike', 'Eleven'] ➜ es git: (master) ✗
Array forEach function loop item one by one и добавьте элемент в новый массив.
Теперь давайте воспользуемся функцией Javascript map ().
let strangerThings = [{имя: 'Дастин', возраст: 13}, {имя: 'Майк', возраст: 12}, {имя: 'Одиннадцать', возраст: 11}]; let characters = strangerThings.map (function (character, index, array) {return character.name;}); console.log (characters);
Функция map () возвращает новый массив и это чистая функция. Таким образом, он не изменяет старый массив.
См. Вывод.
➜ es git: (master) ✗ node app ['Dustin', 'Mike' , 'Eleven'] ➜ es git: (master) ✗
Между этими двумя подходами есть несколько важных различий:
- Использование map () , вам не нужно самостоятельно управлять состоянием цикла for.
- Вы можете работать с элементом напрямую, вместо того, чтобы индексировать в массив.
- Вам не нужно создавать новый массив и вставлять в него. Map () возвращает готовый продукт за один раз, поэтому мы можем просто присвоить возвращаемое значение новой переменной.
- Вы действительно должны не забыть включите оператор возврата в свой обратный вызов. Если вы этого не сделаете, вы получите новый массив, заполненный undefined.
Оказывается, все функции, которые мы рассмотрим сегодня, обладают этими характеристиками.
Факт то, что нам не нужно вручную управлять состоянием цикла, делает наш код более простым и удобным в обслуживании. Мы можем работать непосредственно с элементом вместо того, чтобы индексировать его в массиве, что делает вещи более читаемыми.
Использование функции forEach решает за нас обе эти проблемы. Но функция Javascript map () по-прежнему имеет как минимум два явных преимущества:
- forEach возвращает undefined, поэтому она не связана с другими Методы массива Javascript. Функция map () возвращает массив, поэтому вы можете связать его с другими методами массива.
- map () возвращает массив с готовым продуктом, вместо того, чтобы требовать от нас изменения массива внутри цикла.
Сведение к абсолютному минимуму количества мест, где вы изменяете состояние, является важным принципом функционального программирования. Это делает код более безопасным и понятным.
Если вы хотите фильтровать и отображать значения массива с помощью одной функции, вам следует использовать Array.reduce () для выполнения задачи.
Сопоставить массив объектов и вернуть новый объект с новыми ключами
Вы можете выполнить итерацию массив объектов, а затем измените ключ этого объекта и верните массив объектов с новым ключом.
См. следующий пример кода.
//app. jslet strangerThings = [{name: 'Dustin', возраст: 13}, {name: 'Mike', age: 12}, {name: 'Eleven', age: 11}]; let characters = strangerThings.map (data = > ({актуально: data.name, main: data.age})); консоль. log (characters);
В приведенном выше примере у нас есть массив объектов с именем strangerThings , а его ключи объекта - name и
Теперь нам нужно изменить ключ name и значения и поместите actual и main.
Итак, мы использовали map () , измените ключи и верните новый массив символов с двумя разными ключами. См. Следующий вывод.
➜ es git: (master) ✗ node app [{actual: 'Dustin', main: 13}, {actual: 'Mike', main: 12}, { actual: 'Eleven', main: 11}] ➜ es git: (master) ✗
Наконец, пример массива JavaScript map () завершен.
