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

карта

Синтаксис —array.map(function(iterateValue, index, array), thisValue)

Аргументы —

  • функция обратного вызова (R) — она будет вызываться для каждого элемента в массиве.
  • thisValue (O) — любое значение, которое мы здесь передаем, может быть оценено с помощью this внутри функции обратного вызова.

Аргументы функции обратного вызова —

  • iterateValue (O) — значение текущего элемента массива
  • index (O) — индекс текущего элемента
  • array (O) — Исходный массив для метода карты

R — Обязательный, O — Необязательный параметр

const marks = [98, 100, 50, 75, 90];
const callbackFn = function () {
  return 'Some Value';
}
const transformedMarks = marks.map(callbackFn);
console.log(transformedMarks); 
// ["Some Value","Some Value","Some Value","Some Value","Some Value"]

Анализ кода

  • marks.map(callbackFn); — marks — это исходный массив, и мы передаем callbackFn в качестве аргумента.
  • массив меток будет повторяться, и функция обратного вызова будет вызываться с каждой итерацией
  • Обратите внимание, у нас есть пустой обратный вызов, и мы не используем значение из меток.
  • Все, что мы возвращаем из метода обратного вызова, будет добавлено к этому индексу только что созданного массива (transformedMarks)
  • Поскольку мы возвращаем статический ‘Some Value', новый массив просто содержит 'some Value’ во всех индексах.
  • Мы преобразовали [98, 100, 50, 75, 90] в [“Some Value”,”Some Value”,”Some Value”,”Some Value”,”Some Value”]
const marks = [98, 100, 50, 75, 90];
const callbackFn = function (value) {
  return value;
}
const transformedMarks = marks.map(callbackFn);
console.log(transformedMarks); 
// [98, 100, 50, 75, 90]

Анализ кода

  • Мы только что внесли пару изменений, включили параметр value в функцию обратного вызова и вернули value
  • Как я уже сказал, какое бы возвращаемое значение мы ни получили, это будут новые элементы массива, здесь мы возвращаем те же value, поэтому массив transformedMarks содержит те же значения, что и массив marks.
const marks = [98, 100, 50, 75, 90];
const callbackFn = function (value) {
  return value*2;
}
const transformedMarks = marks.map(callbackFn);
console.log(transformedMarks); 
// [196,200,100,150,180]

Анализ кода

  • Мы только что внесли пару изменений, включили параметр value в функцию обратного вызова и вернули value*2
  • Как я уже сказал, какое бы возвращаемое значение мы ни получили, это будут новые элементы массива, здесь мы возвращаем value*2 Таким образом, массив transformedMarks является произведением массива marks.

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

Аргумент индекса

const marks = [98, 100, 50, 75, 90];
const callbackFn = function (value, index) {
  return index > 2 ? value * 2 : value + 2;
};
const transformedMarks = marks.map(callbackFn);
console.log(transformedMarks);
// [100,102,52,150,180]

Теперь мы используем индекс вместе со значением для определения возвращаемого значения, если индекс больше 2, мы умножаем, если нет, мы добавляем 2 к значению.

Аргумент массива

const marks = [98, 100, 50, 75, 90];
const callbackFn = function (value, index, array) {
  return array[index]; // same value as return value or return marks[index]
};
const transformedMarks = marks.map(callbackFn);
console.log(transformedMarks);
//[98,100,50,75,90]

Массив обеспечит доступ к исходному массиву, над которым работает функция карты, в приведенном выше примере формируются те же значения массива, если возвращаемое значение равно array[index]или value или marks[index]

Почему бы не использовать сам массив меток, зачем нам такой же массив в качестве аргумента?

Взгляните на этот пример

const marks = [98, 100, 50, 75, 90];
const callbackFn = function (value, index, array) {
  return value + 2;
};

const determineEligibity = function (value, index, array) {
  return value > Math.max(...array) - 50;
};
const transformedMarks = marks.map(callbackFn).map(determineEligibity);
console.log(transformedMarks);
// [true,true,false,true,true]

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

поэтому третий аргумент полезен, когда мы объединяем методы массива, обычно мы сначала filter, а затем map, но, поскольку этот раздел представляет собой исключительно выделенную функцию карты массива, связанную с функцией карты.

Параметр thisValue

Мы можем передать любое значение второму параметру функции карты, и мы получим его доступным как this

const marks = [98, 100, 50, 75, 90];
const callbackFn = function (value, index, array) {
  return value + this.multiplicationFactor;
};

const obj = { multiplicationFactor: 5 };
const transformedMarks = marks.map(callbackFn, obj);
console.log(transformedMarks);
//[103,105,55,80,95]

Мы передаем объект, теперь вы можете this.multiplicationFactor это то же значение, что и в объекте, используя это, мы можем динамически изменять контекст, например, если мы передаем другой объект, мы получим другое преобразование.

Работа с массивом объектов

const students = [
  { name: 'Vinodh', dept: 'ECE' },
  { name: 'Sourav', dept: 'CSE' },
  { name: 'Ashok', dept: 'EEE' },
  { name: 'Yuganath', dept: 'ECE' },
  { name: 'Prasanth', dept: 'ECE' },
];
const callbackFn = function (value, index, array) {
  return value.name;
};

const studentNames = students.map(callbackFn);
console.log(studentNames);
//["Vinodh","Sourav","Ashok","Yuganath","Prasanth"]

Здесь мы выбираем свойство имени в каждом индексе массива и формируем новый массив строк (studentNames)

const students = [
  { name: 'Vinodh', dept: 'ECE' },
  { name: 'Sourav', dept: 'CSE' },
  { name: 'Ashok', dept: 'EEE' },
  { name: 'Yuganath', dept: 'ECE' },
  { name: 'Prasanth', dept: 'ECE' },
];
const callbackFn = function ({name, dept}, index, array) {
  return `${name} from ${dept}`;
};

const studentsDescription = students.map(callbackFn);
console.log(studentsDescription);
//["Vinodh from ECE","Sourav from CSE","Ashok from EEE","Yuganath from ECE","Prasanth from ECE"]

Теперь мы используем как name, так и dept и уничтожаем объект в разделе параметров.

Как функция карты используется в React

export default function App() {
  const marks = [98, 100, 50, 75, 90];

  const callbackFn = function (value, index, array) {
    return <li key={index}>{value + this.multiplicationFactor}</li>;
  };
  const obj = { multiplicationFactor: 5 };

  const transformedMarks = marks.map(callbackFn, obj);

  return <ul>{transformedMarks}</ul>;
}

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

карта – простая, но мощная функция