Метод карты JavaScript()

Привет,👋🏻

Я Гибсон. В потерянном блоге мы обсуждали обзор методов преобразования данных в JavaScript. Если вы не видели последний блог, я рекомендую вам посмотреть блог методы преобразования данных. Я поделился ссылкой под блогом.

Теперь в этом блоге мы увидим, как работать с методами карты на примерах. Так что не теряйте время, давайте перейдем к темам.

метод сопоставления:

Как мы узнали, метод map — это еще один способ, который мы можем использовать для циклического обхода массива. Метод карты вернет новый массив.

Давайте посмотрим, как это работает.

Рекомендовать темы:

Сначала мы создаем массив чисел с именем numArr,

const numArr = [1, 2, 3, 4, 5, 6];

Теперь попробуем их умножить. И создайте еще одну переменную с именем num.

const num = 5;

Теперь нам нужно умножить каждый элемент numArr на это num.

numArr.map(function(value){
  return value * num
})

Допустим, numArr.map. Затем нам нужна функция обратного вызова. И эта функция обратного вызова принимает аргумент в качестве текущего элемента массива. А затем здесь, в функции обратного вызова, выполнить для каждого элемента в массиве. Его возвращаемое значение добавляется как один элемент в новый массив.

И в этом случае мы хотим умножить, т.е. исходный элемент массива умножить на переменную num.

Давайте теперь сохраним его как переменную. Итак, мы уже знаем, что метод карты вернет новый массив. Так что нам нужно где-то это хранить.

const newArr = numArr.map(function(value){
  return value * num
});

console.log(numArr);

console.log(newArr);

Выход:

Здесь вы можете видеть, что исходные элементы массива не изменились.

[ 1, 2, 3, 4, 5, 6 ]
[ 5, 10, 15, 20, 25, 30 ]

Примечание. Метод map() возвращает только новый массив с новыми элементами.

Это основы работы метода map().

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

const newArr = numArr.map((value) => value * num);
console.log(numArr); // [ 1, 2, 3, 4, 5, 6 ]
console.log(newArr); // [ 5, 10, 15, 20, 25, 30 ]

Теперь давайте более подробно рассмотрим метод карты.

Метод карты имеет доступ к трем параметрам. помимо текущего элемента массива, мы также получаем доступ к текущему индексу, а также всему массиву.

const test = numArr.map(
  (value, index, arr) => `current element: ${value}, current index: ${index}, whole Array: ${arr}`,
);

console.log(test);

Выход:

  'current element: 1, current index: 0, whole Array: 1,2,3,4,5,6',
  'current element: 2, current index: 1, whole Array: 1,2,3,4,5,6',
  'current element: 3, current index: 2, whole Array: 1,2,3,4,5,6',
  'current element: 4, current index: 3, whole Array: 1,2,3,4,5,6',
  'current element: 5, current index: 4, whole Array: 1,2,3,4,5,6',
  'current element: 6, current index: 5, whole Array: 1,2,3,4,5,6'

Все в порядке. На этом мы завершаем map() метод в JavaScript.

Заключение:

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

Спасибо, что читаете этот блог🤝…

Хорошего дня🫶🏻…

Дополнительные ссылки: