Извлечение индекса из map() функции в Immutable.js List

Быстрый ответ

Для доступа к индексу в map() воспользуйтесь вторым аргументом коллбэк-функции:

const array = ['a', 'b', 'c'];
const withIndex = array.map((element, index) => ({element, index}));

console.log(withIndex); 
// [{ element: 'a', index: 0 }, { element: 'b', index: 1 }, { element: 'c', index: 2 }]

Пример кода выше является эффективным и позволяет отследить позицию элемента в процессе преобразования массива.

Индексирование в Immutable.js

Immutable.js позволяет провести аналогичную операцию индексирования для неизменяемого списка List:

const { List } = require('immutable');
const myList = List(['x', 'y', 'z']);
const indexedList = myList.map((item, index) => ({item, index}));

console.log(indexedList.toArray()); 
// [{ item: 'x', index: 0 }, { item: 'y', index: 1 }, { item: 'z', index: 2 }]

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

Классическая функция в классическом контексте

Стрелочные функции очень удобны, но у них нет собственного this. Но это не проблема, поскольку классические функции всегда могут помочь!

function myMapper(el, idx) {
  console.log(this.prefix + el, idx); // "this" возвращает в игру!
}

const boundMap = Array.prototype.map.bind(array, myMapper, {prefix: 'value:'});
boundMap(); // выведет "value:a 0", "value:b 1", "value:c 2"

Если вам нужен свой контекст this для коллбэка, просто явно его привяжите.

Нюансы использования map()

Двойное нажатие – использование третьего параметра

Третий аргумент в map() даёт доступ ко всему массиву. Этот часто игнорируемый параметр может быть полезен для контекстуализации операций:

array.map((el, idx, arr) => {
  console.log(`Эй, ${el}, ты не одинок. Ты часть этого `, arr);
});

Подробнее об этом расскажет наш спикер на видео

Отслеживание состояния с помощью индекса

Индексацию удобно использовать для отслеживания изменений в массивах состояния React:

stateArray.map((item, index) => {
  // Журнал стража: день №${index}. Сегодня были замечены изменения в ${item}.
});

Обходные пути: метод индексированного маппинга от Ramda

Вы также можете использовать библиотеку Ramda и её функцию addIndex для работы с индексами:

const R = require('ramda');
const indexedMap = R.addIndex(R.map);
const result = indexedMap((elem, idx) => [elem, idx], ['a', 'b', 'c']);

console.log(result); 
// [['a', 0], ['b', 1], ['c', 2]]

Визуализация

Представьте ситуацию: на вечеринку приглашены гости (👥): [Алиса, Боб, Чарли, Дейв]

С помощью map() каждый из них получает порядковый номер:

const badges = guests.map((guest, index) => `${guest} — гость №${index + 1}`);

Теперь их можно представить следующим образом:

1. 🏷️ Алиса — гость №1
2. 🏷️ Боб — гость №2
3. 🏷️ Чарли — гость №3
4. 🏷️ Дейв — гость №4

Это как распределение мест в очереди за обедом! 🍲

Как индексы могут углубить ваш код

Условная логика, опирающаяся на индекс

Индекс может управлять вашей условной логикой, как если бы вы были судьёй на модном показе:

const highlightedIndices = array.map((el, idx) => 
  idx % 2 === 0 ? `<strong>${el}</strong>` : el // "Вы, да, именно вы, будете выделены!"
);

Преобразованные массивы с богатым контекстом

Сочетайте индекс и преобразования массива для осуществления изящных манипуляций:

const withPrevious = array.map((current, index, arr) => 
  index === 0 ? current : [arr[index – 1], current] // "Гарри, позволь мне представить тебе Салли. Вы — команда на этом проекте."
);

Отладка с использованием map: комментарии внутри

Выдели console.log внутри map для более эффективной отладки:

array.map((el, idx) => {
  // Об этом говорит Ватсон! Вот ключ к отладке!
  if (idx === 1) console.log(`Debug: index ${idx}`, el);
  return el.toUpperCase();
});

Полезные материалы

1. Array.prototype.map() – JavaScript | MDN — подробное описание метода .map() на JavaScript.
2. Метод массива map() на JavaScript — простые примеры и объяснения метода .map().
3. Методы массива — углублённое рассмотрение методов массива, включая .map().
4. javascript – Правильное изменение массивов состояний в React.js – Stack Overflow — сообщество обсуждает работы с .map() в массивах состояния React.
5. ECMAScript 6: Новые функции: Обзор и сравнение — освоение новых функций ES6 вместе с примерами использования .map().
6. Map, Filter и Reduce – Обучающее видео по JavaScript – YouTube — визуальное пособие по использованию .map() на практике.
7. Списки и ключи – React — официальное руководство React по эффективному использованию .map() для отрисовки списков и ключей.