Что такое функция map() и как мы ее используем? Давайте воспользуемся аналогией со Губкой Бобом, чтобы понять, что он делает.
В этом эпизоде Губка Боб, Патрик и мистер Крабс отправляются в приключение, чтобы найти сокровища голландца. Трое полагаются на карту, чтобы добраться до места назначения. Это хорошее начало. Обычная карта очерчивает ландшафт реального мира, дает нам копию существующих особенностей, и мы можем прийти к разным конечным точкам в зависимости от выбранного пути. Наша функция map() имеет аналогичные характеристики, следовательно, «map»().
W3schools определяет карту() как
— метод, создающий новый массив с результатами вызова функции для каждого элемента массива
— метод вызывает предоставленную функцию один раз для каждого элемента в массиве по порядку.
— метод, который не изменяет исходный массив.
Давайте разберемся, что это значит, на примере:
В приведенном выше примере у нас есть массив «numOfKrabbyPatties», который показывает количество крабсбургеров, которое, как мы можем представить, было у мистера Крабса, Губки Боба и Патрика в начале их охоты за сокровищами. Затем создается переменная «leftoverPattiesArr» для представления того, что происходит с крабсбургерами каждого персонажа через определенное время. В этом случае 3 съедаются каждым персонажем.
Если мы посмотрим на значение «leftoverPattiesArr», то увидим, что мы берем наш массив «numOfKrabbyPatties» и применяем к нему функцию map(). Функция map() по своей сути вызывает КАЖДЫЙ элемент в массиве «numOfKrabbyPatties», но нам нужно сообщить ей, что мы хотим, чтобы она сделала с массивом «numOfKrabbyPatties». Здесь свою роль играет функция «hungryCharacters». Это дает map() некоторое руководство. Точно так же, как наши три персонажа пересекают дно океана, чтобы найти «X» на карте сокровищ, наша функция «hungryCharacters» похожа на то, что она обеспечивает путь, по которому массив должен пройти, чтобы добраться до своей новой конечной точки.
Присмотревшись к нашей функции «hungryCharacters», можно заметить, что задан параметр «пирожки». Поначалу было немного сложно понять, что делает этот параметр. Увы, с помощью Губки Боба и его друзей возможно все! Помните, что функция вызывается один раз для КАЖДОГО элемента массива.
Когда мы вызываем «leftoverPattiesArr», карта берет первый элемент в «numOfKrabbyPatties» и передает его через нашу функцию. В нашем случае 12 крабсбургеров становятся заполнителями «пирожков», и выполняется вычитание (12–3). Опять же, неотъемлемое свойство map() теперь состоит в том, чтобы брать второй элемент «numOfKrabbyPatties» и следовать по тому же пути. Второй элемент равен 6, поэтому при перемещении по функции он временно заменяет заполнители «пирожков». Выполняя таким образом (6–3). Тот же процесс повторяется и для последнего элемента в нашем массиве. Наконец, у нас есть неразрушающий процесс, который сохраняет наш старый массив «numOfKrabbyPatties» в неприкосновенности, предоставляя нам новый обработанный массив «leftoverPattiesArr».
Когда мы перемещаемся по нашей карте, меняется то, как мы существуем в этой местности. Другими словами, мы вносим изменения в наши отношения с нашей картой. Через минуту мы в точке «а», через некоторое время мы в точке «б». Точно так же в нашем примере манипулируют крабсбургерами, когда они перемещаются по своей местности map(). В так называемом начале, точка «а» карты() они в одну сторону, а в конец, в точку «б», в другую.
Давайте копнем глубже!
Мы не всегда имеем дело с такими простыми массивами. Давайте посмотрим на один с некоторыми объектами внутри. Если вы не знакомы с эпизодом про Губку Боба, о котором упоминается в этой статье, вы должны знать, что эти трое вступают в небольшую ссору из-за сокровища после того, как оно было найдено. Их волнение будит призрак Летучего Голландца, и впоследствии он злится. Для этого примера предположим, что он забирает свой сундук с сокровищами и дает каждому из наших персонажей по 1 золотой монете.
Мы хотим выразить это, создавая предложения с новой информацией, которая у нас есть. Ниже вы увидите «символы», массив из 3 объектов, содержащих 2 пары ключ:значение. Наша функция «getTreasure» будет вызываться для каждого объекта в нашем массиве. В данном случае 3. Как и в предыдущем примере, параметр oneCharacter является заполнителем для каждого объекта целиком. Например, первая итерация примет {name : «Mr. Krabs», Treasure: 0} и передайте его как новый временный заполнитель. В этот момент между фигурными скобками «{}» мы говорим, что мы хотим сделать с этим объектом. В этой функции мы говорим, что нам нужен ${oneCharacter.name}. «OneCharacter» является заполнителем для каждой итерации объекта в массиве. Затем мы хотим получить значение «имя», чтобы начать наше предложение. Это интерполируется с помощью обратных галочек в начале и в конце оператора return. Затем поместите наши переменные между ${}. Это позволяет нам включать струнные элементы, такие как «имеет» и «кусок золота!». Мы интерполируем второй раз, используя ${oneCharacter.treasure + 1}. Как и в предыдущей интерполяции, наш «OneCharacter» является заполнителем для каждой итерации объектов. Затем мы хватаемся за ключ «сокровище», чтобы получить его значение. Наконец, мы добавляем 1 к значению. В итоге можно увидеть, что character.map(getTreasure) дает нам новый массив из трех разных строк! Помните, наш первоначальный массив «символов» не изменился, потому что map() не является деструктивным.
Использованная литература:
