Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Реальные примеры Map, Filter и Reduce в JavaScript

  1. Prerequisies
  2. Настройка веб-карты
  3. Использование map () для просмотра данных JSON
  4. Использование filter () для поиска подходящих значений
  5. Использование redu () для подсчета экземпляров значений в объекте
  6. Сводка map (), filter () и redu () `
  7. карта()
  8. фильтр()
  9. уменьшения ()
  10. Заключение

Я не знаю о вас, но мне не очень помогает просматривать бесконечные примеры foo и bar, чтобы попытаться выяснить, как использовать функцию языка программирования. Существуют некоторые концепции JavaScript / ES6, которые трудно воспринимать как отдельные фрагменты, не видя, как они работают как часть более крупного проекта, поэтому я собираюсь рассмотреть пример их использования в этой статье.

Недавно я изучал Чикаго и посещал различные местные кафе, чтобы писать с нежной, приятной атмосферой, как Дж. К. Роулинг. После того, как я случайно посетил одно, которое мне не очень понравилось, но я забыл о нем, я подумал, что это может быть забавный маленький проект, чтобы наметить все кафе, в которых я пишу, на веб-карте.

В другой раз я использовал Google Maps API для наметить несколько магазинов для концепции ресторана на моей последней работе. Для этого проекта я решил использовать листовка библиотека JavaScript для интерактивных карт.

Вот последний проект карты, который я создал: Cafétography

В этой статье вы можете создать свою собственную веб-карту для чего-то в вашем районе или в мире, который вы хотели бы отслеживать, или вы можете просто просмотреть мои примеры map (), filter () и redu ().

Prerequisies

цели

  • Следующая цель состоит в том, чтобы использовать redu () и map () в реальном примере (карте), чтобы упростить и сделать наш код более эффективным и DRY ( Не повторяйте себя ). Мы будем использовать Reduce (), чтобы получить количество кафе в одном районе Чикаго, и мы будем использовать map () для извлечения данных из внешнего канала JSON и отображения местоположений на веб-карте.

Давайте сделаем некоторые решения проблем.

Настройка веб-карты

Вот пример проекта на CodePen ты можешь использовать. Все, что для этого требуется, это html-файл ( index.html ) с необходимыми загрузками файлов листовок CSS и JavaScript в:

index.html

<link href = "https://unpkg.com/[email protected]/dist/leaflet.css" /> <script src = "https://unpkg.com/[email protected]/dist/leaflet. js "> </ script>

HTML-div с идентификатором карты:

index.html

Некоторые основные CSS ( style.css ) для отображения карты:

style.css

#map {height: 100vh; ширина: 100%; }

И этот JavaScript ( scripts.js ) для загрузки в карту и данные карты.

scripts.js

const myMap = L. map ('map') const myBasemap = L. tileLayer ('http: // {s} .tile.openstreetmap.org / {z} / {x} / {y} .png', {maxZoom: 19, атрибуция: '© <a href = "http: // www.openstreetmap.org/copyright">OpenStreetMap </a> ',}) myBasemap. addTo (myMap) myMap. setView ([41.939948, - 87.650673], 12)

Как только все будет готово, вот как будет выглядеть ваша загруженная в Leaflet веб-карта.

Как только все будет готово, вот как будет выглядеть ваша загруженная в Leaflet веб-карта

Опять же, вы можете найти и разложить рабочую версию всего этого Прямо здесь на CodePen, но вам придется перенести его на свой сервер или работать на нем локально.

Теперь я хочу начать добавлять местоположения в качестве маркеров на карту. Я могу легко это сделать, создав кучу переменных с широтой и долготой и используя метод addTo (). Допустим, я хочу добавить El Meson, Wormhole и Ipsento к моей карте. Я оставлю это до трех, чтобы оно было коротким и простым. Вот как я бы сделал это, чтобы начать.

scripts.js

const elMeson = L. маркер ([42.002439, - 87.672339]). addTo (myMap) const wormhole = L. маркер ([41.908415, - 87.674605]). addTo (myMap) const ipsento = L. маркер ([41.918639, - 87.687247]). addTo (myMap)

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

scripts.js

const elMeson = L. маркер ([42.002439, - 87.672339]). bindPopup (`<h2> Эль Мезон </ h2> <p> <b> Окрестности: </ b> Парк Роджерса </ p> <p> <b> Атмосфера: </ b> Отлично! </ p> <p > <b> Вкус: </ b> Отлично! </ p> <p> <b> Комментарии: </ b> Отлично! </ p> `). openPopup (). addTo (myMap) const wormhole = L. маркер ([41.908415, - 87.674605]). bindPopup (`<h2> Червоточина </ h2> <p> <b> Окрестности: </ b> Wicker Park </ p> <p> <b> Атмосфера: </ b> Отлично! </ p> <p> <b> Вкус: </ b> Отлично! </ p> <p> <b> Комментарии: </ b> Отлично! </ p> `). openPopup (). addTo (myMap)

Вот как это выглядит с загруженными маркерами и всплывающими окнами.

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

На этом этапе я удаляю всю информацию о маркере из scripts.js и создаю файл JSON с объектом, содержащим массив, содержащий объекты всех местоположений моей кофейни. Поначалу может быть немного сложно отслеживать все квадратные и фигурные скобки.

map.json

{"cafes": [{"name": "El Meson", "lat": 42.002439, "long": - 87.672339, "окрестности": "Rogers Park", "ambiance": "4/5", "flavour" ":" 5/5 "," comments ":" Лучший капучино и круассан, которые у меня когда-либо были. " }, {"name": "Wormhole", "lat": 41.908415, "long": - 87.674605, "окрестности": "Wicker Park", "ambiance": "5/5", "flavour": "4 / 5 "," comments ":" Симпатичная атмосфера с Nintendo, которая на самом деле работает правильно и с лучшими играми (включая FF1!). " }, {"name": "Ipsento", "lat": 41.918639, "long": - 87.687247, "окрестности": "Wicker Park", "ambiance": "4/5", "flavour": "5 / 5 "," comments ":" Действительно отличный пряный латте. Хорошая атмосфера. " }]}

Ладно, хорошо. Теперь у нас есть вся информация о каждом местоположении - имя, широта, долгота, окрестности и дополнительные сведения - аккуратно помещенные в файл JSON. Теперь, как мы можем получить этот файл JSON на страницу?

Мы не будем использовать jQuery - только простой JavaScript - так что это немного более сложный процесс. Я вернусь к Как использовать данные JSON с PHP или JavaScript для дальнейшего объяснения кода, но вот как мы открываем и получаем доступ к нашему файлу map.json .

scripts.js

const request = новый запрос XMLHttpRequest (). открытый ('GET', 'map.json', true) запрос. onload = function () {const data = JSON. parse (this. response)} запрос. Отправить ( )

Здесь говорится, что начать доступ к данным JSON здесь, где мы начнем работать с данными из map.json , который был помещен в переменную данных. Убедитесь, что map.json не является URL-адресом локального файла. Смотрите информацию ниже.

Предупреждение! Невозможно получить локальный файл JSON с помощью XMLHttpRequest. Другими словами, если полный URL-адрес начинается с file: // или C: /, он не будет правильно подключаться. Вы также можете настроить локальный сервер с MAMP , используйте http-сервер устанавливается через нпм использовать Бродяга / VirtualBox запустить сервер или использовать внешний хост.

Использование map () для просмотра данных JSON

Ранее мы создавали новую переменную для каждого маркера и помещали всю информацию вручную внутри этой переменной. Теперь мы собираемся извлечь все данные из JSON, и мы сделаем это с помощью map ().

map () принимает массив и создает новый массив с результатом функции для каждого элемента в исходном массиве. Например, вы можете создать массив [1, 2, 3] и применить функцию через map (), которая увеличивает каждое число в массиве на единицу. Вы бы в конечном итоге с [2, 3, 4].

Чтобы получить данные, найденные в кафе в JSON, мы будем использовать метод map () в data.cafes с функцией внутри.

const cafes = data .cafes. карта (функция (кафе) {})

Я просто собираюсь переписать эту функцию с Функция стрелки ES6 чтобы сделать его более кратким.

const cafes = data .cafes. карта (кафе => {})

Теперь, чтобы получить доступ к любому свойству из фида JSON, мы будем использовать точечную запись на объекте cafe. Итак, первая итерация cafe.name вернет El Meson, вторая - Wormhole и так далее. Все, что я здесь делаю, - это использую ту же самую функцию L.Marker, и заменяю все статические значения динамическими свойствами.

scripts.js

const cafes = data .cafes. map (cafe => {L. marker ([cafe .lat, cafe .long]). bindPopup (`<h2> $ {cafe .name} </ h2> <p> <b> Соседство: </ b> $ {cafe .neighborhood} </ p> <p> <b> Ambiance: </ b> $ {cafe .ambiance} </ p> <p> <b> Flavor: </ b> $ {cafe .flavor} < / p> <p> <b> Комментарии: </ b> $ {cafe .comments} </ p> `). openPopup (). addTo (myMap)})

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

Вот полный файл scripts.js до сих пор.

scripts.js

const myMap = L. map ('map') const myBasemap = L. tileLayer ('http: // {s} .tile.openstreetmap.org / {z} / {x} / {y} .png', {maxZoom: 19, атрибуция: '© <a href = "http: // www.openstreetmap.org/copyright">OpenStreetMap </a> ',}) myBasemap. addTo (myMap) myMap. setView ([41.939948, - 87.650673], 12) const request = новый запрос XMLHttpRequest (). открытый ('GET', 'map.json', true) запрос. onload = function () {const data = JSON. parse (this. response) const cafes = data .cafes. map (cafe => {L. marker ([cafe .lat, cafe .long]). bindPopup (`<h2> $ {cafe .name} </ h2> <p> <b> Соседство: </ b> $ {cafe .neighborhood} </ p> <p> <b> Ambiance: </ b> $ {cafe .ambiance} </ p> <p> <b> Flavor: </ b> $ {cafe .flavor} < / p> <p> <b> Комментарии: </ b> $ {cafe .comments} </ p> `). openPopup (). addTo (myMap)})} запрос. Отправить ( )

Конечно, map () способна на гораздо большее, чем то, что мы делаем в этом примере, но это хорошее и практичное начало.

Этот вариант использования map () технически работает, но поскольку кафе будет содержать пустой массив, forEach () также будет хорошим выбором для этой ситуации.

Использование filter () для поиска подходящих значений

На данный момент у меня была карта со всеми моими созданными маркерами. В нашем уменьшенном примере было три кафе, но в итоге я получил около дюжины. Каждое кафе было по соседству, и у меня было несколько кварталов, в которых было более одного кафе, которое я посетил. Я хотел подсчитать, сколько кафе я посетил в каждом районе.

В нашем примере у нас есть два квартала для трех кафе - одно в парке Роджерса и два в парке Викера. С таким небольшим примером, конечно, было бы очень просто написать «Парк Роджерса: 1; Парк Wicker: 2», но чем дольше он будет проходить и чем больше будет добавлено окрестностей и кафе, тем больше будет необходимости. автоматизировать этот процесс.

У нас есть все данные, которые нам нужны, в файле JSON, но я не был уверен, как кратко сосчитать все экземпляры. Сначала я подумал об использовании filter (), чтобы выяснить, сколько экземпляров каждого названия окрестности было найдено в канале. filter () записывается аналогично map () и также создает новый массив, но его функция выполняет тест и отфильтровывает все, что не прошло. filter () использует тот же синтаксис, что и map ().

const personalNeighborhood = data .cafes. фильтр (cafe => {})

Ниже я делаю тест для каждого района, который отфильтрует все результаты, которые не соответствуют моему тесту.

const rogersPark = data .cafes. фильтр (cafe => {return cafe .neighborhood === 'Rogers Park'}) const wickerPark = data .cafes. фильтр (cafe => {возврат кафе .neighborhood === 'Wicker Park'})

Используя этот метод, мне пришлось бы создать массив объектов, связывающих строку «Rogers Park» с результатом rogersPark.length

const neighboursArray = [{name: 'Rogers Park', номер: rogersPark .length,}, {name: 'Wicker Park', номер: wickerPark .length,},]

И, наконец, я мог бы просмотреть эти значения.

for (пусть окрестность окрестностей Array) {консоль. log (окрестности .name, окрестности .name)}

for ... of используется для перебора массивов. Вот вывод.

Роджерс Парк 1 Wicker Park 2

Технически это сработало, но сейчас я делаю то, чего не хотел делать в первый раз, - повторяюсь. Так что это оказалось неэффективным использованием метода filter (), но это нормально. Не все, что вы пишете в вашем учебном путешествии, будет идеальным, и теперь мы можем его реорганизовать.

Использование redu () для подсчета экземпляров значений в объекте

Reduce () записывается как map () и filter (), но внутренняя функция принимает два параметра. У него также есть дополнительное место в конце, куда мы вставим пустой объект {}. Это также может быть пустой массив [], но в нашем примере это будет объект. Этот дополнительный параметр является начальным значением , которое по умолчанию равно 0.

const districtCount = data .cafes. уменьшить ((суммы, значение) => {}, {})

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

const districtCount = data .cafes. уменьшить ((суммы, кафе) => {суммы [кафе. соседства] = (суммы [кафе. соседства] || 0) + 1 возвратные суммы}, {})

Теперь мы пройдемся по объекту, который мы создали для for ... in, который используется для перебора ключей объекта.

для (пусть окрестность в окрестности) {консоль. log (окрестности, окрестности [окрестности])}

И вот вывод.

Роджерс Парк 1 Wicker Park 2

Мы получили тот же результат, что и наш неэффективный код, всего за несколько коротких строк.

Как только это было закончено, я вставил это в DOM вместо того, чтобы просто распечатать его на консоли. Просто добавил новый идентификатор в index.html .

<div id = "окрестности"> </ div>

Затем передайте уменьшенные значения новому div.

const боковая панель = документ. getElementById («окрестности») для (пусть окрестности в окрестности) {const p = документ. createElement ('p') p .innerHTML = `<b> $ {окрестность} </ b>: $ {districtCount [окрестность]}` боковая панель. appendChild (p)}

Я добавил немного CSS, изображение кофейной чашки в качестве маркера, другую карту и другие локации, которые я не буду рассматривать, поскольку они не являются предметом статьи. Исходный код всего файла scripts.js, который мы только что создали прямо здесь. Вот как выглядит финальная версия.

Вот как выглядит финальная версия

Вы можете посмотрите окончательный источник карты здесь , или же посмотреть завершенный проект здесь если что-то было неясно.

Сводка map (), filter () и redu () `

Вот очень краткий обзор различий между map (), filter () и redu () с использованием очень простого массива [1, 2, 3, 4].

постоянные числа = [1, 2, 3, 4]

карта()

Используйте map (), чтобы получить массив с каждым значением, увеличенным на единицу.

const numbersIncremented = числа. карта (x => {return x + 1}) чисел

фильтр()

Используйте filter (), чтобы получить массив доступных значений больше 2.

const numbersFiltered = числа. фильтр (x => {return x> 2}) numbersFiltered

уменьшения ()

Используйте lower (), чтобы получить сумму чисел в массиве.

const numbersReduced = числа. уменьшить ((x, y) => {вернуть x + y}) numbersReduced

Заключение

Там у вас есть это. Небольшой проект с некоторым решением проблем, использующий map (), filter () и redu () по пути, с краткими фрагментами для просмотра. Комментарии и улучшения приветствуются!

Наконец, вот мое музыкальное исполнение Mad World Слезы для страхов. Не стесняйтесь импортировать это нерафинированное Слоновая кость и слоновая кость классика в вашей музыкальной библиотеке.

Понравились посты, которые вы видите здесь? Подпишитесь, чтобы получать уведомления о новых.

Похожие

ТЕСТ: Sony Xperia Z4 Tablet
... использование Как уже упоминалось выше, планшет Sony является водо- и пыленепроницаемым (IP68 / IP65) и может выдержать душ или даже посещение бассейна. Он имеет последнюю версию Android - 5.0 Lollipop - что является значительным улучшением по сравнению с прошлым, и Sony добавила собственный интерфейс поверх оригинальной и простой системы Lollipop. Как и предыдущие планшеты Xperia, Z4 имеет различные сервисы Sony, такие как PlayStation Mobile, позволяющие пользователям
Microsoft тихо прекращает использование беспроводного беспроводного адаптера клавиатуры
... в было объявлено в сентябре 2013 года для своего семейства планшетов Surface. Поверхностный адаптер
Видеогалерея лайтбокса K2 с использованием Microblog
... для создания видеогалереи лайтбокса с использованием вашего контента K2. Модуль теперь может отображать видео, которое вы указываете на вкладке видео K2 в лайтбокс colorbox , К2 + Микроблог Это гибкое решение для создания
Использование Tor Browser для проверки качества сайта Jungle Disk
Tor Browser это бесплатный инструмент обеспечения конфиденциальности в Интернете, который позволяет всем пользователям Интернета анонимно просматривать веб-страницы и размещать веб-службы в своей сети. Ваше использование Интернета отслеживается как веб-сайтами, которые вы посещаете, так и вашим интернет-провайдером (ISP). В первую очередь для оптимизации затрат на маркетинг, но в некоторых случаях и в некоторых местах по менее безобидным причинам.
Общие сведения об отчетах об активности пользователей с помощью журналов аудита в Office 365
Microsoft продолжает вкладывать значительные средства в службы Office 365, причем не только с точки зрения функциональности и функциональности, но и из внутренних компонентов, таких как ведение журнала и безопасность , Это означает, что вы можете легко узнать, какие задачи выполняют ваши конечные пользователи в любой части службы. Вы можете задаться вопросом, почему это важно для вас как организации. Ну, на
Программное обеспечение для магазина
... использованием считывателя штрих-кода сотрудничество с электронными весами Использование
Учебник по JavaScript-инъекциям: тестируйте и предотвращайте JS-атаки на веб-сайте
... вляется одной из самых популярных технологий и наиболее широко используется для веб-страниц и веб-приложений. Он может быть использован для реализации различных функций сайта. Однако эта технология может вызвать некоторые проблемы с безопасностью, о которых разработчик и тестировщик должны помнить. Javascript можно использовать не только для хороших целей, но и для некоторых злонамеренных атак. Одним из них является инъекция Javascript. Суть JS Injection заключается
Banner Blindness - почему интернет-пользователи игнорируют рекламу? - eMarketing.pl
... для их закрытия. В настоящее время рекламные баннеры становятся все больше и больше, скрывая нужный контент на веб-сайте , используя дополнительные элементы, такие как автоматически воспроизводимые звуки или фильмы. Несмотря на все эти способы привлечь внимание интернет-пользователя, сегодня объявления в Интернете нажимаются очень редко - теперь общий CTR (рейтинг кликов) составляет ... только
Скопируйте музыку с iPhone на компьютер
В этой статье вы узнаете, как перенести музыку с iPhone на компьютер. Посетите нашу страницу Droid Transfer, если вам нужно переносить музыку с Android на компьютер , Как скопировать музыку на компьютер с вашего iPhone Краткое руководство: Шаг 1:
Alibaba 101: как купить у Alibaba
Чтобы начать онлайн бизнес Вам нужны две вещи, идея продукта и поставки. Если у вас уже есть идея продукта электронной коммерции и ваш бизнес-план на месте, следующим шагом является поиск идеального поставщика. В нашей глобальной деревне никогда не было так легко найти
20 вдохновляющих дизайнов приборной панели
... использованием сеток и цветов. Дизайнер отлично использовал цветовую палитру. Макет панели управления хорошо структурирован и спроектирован таким образом, что он идеально вписывается в контент, что облегчает жизнь пользователя. Если вам нужна панель управления, которая знает, чего вы пытаетесь достичь, панель инструментов Panels - это правильный выбор. Панель инструментов iPad

Комментарии

Посетитель пришел на сайт поиска Google?
Посетитель пришел на сайт поиска Google? Покажите наиболее привлекательные продукты в вашем предложении в верхнем слое, чтобы вы могли найти то, что ищете, прямо сейчас! Модуль Toplayers and Widgets позволит вам уникальным образом предложить клиентам то, что они могут использовать или на что стоит обратить внимание. Это также значительно увеличивает конверсию и время, которое посетители тратят на просмотр вашего магазина. Что такое Toplayer и почему его стоит
Вы выполнили тестирование инъекций Javascript?
Вы выполнили тестирование инъекций Javascript? Мы будем рады услышать от вас, не стесняйтесь поделиться своим опытом в разделе комментариев ниже.
А что если введенная вами фраза имеет много значений?
А что если введенная вами фраза имеет много значений? Для этой цели были созданы следующие признаки: доминантный - сначала приходит на ум, общий - когда ни одно из значений не является доминантным и несущественным - редко используемые значения данной фразы или слова. В конечном итоге сайт может быть: - важно , запрос указывает, что пользователь хотел попасть на эту страницу. Обычно это веб-сайты компаний и т. Д. Только одна целевая страница может

Теперь, как мы можем получить этот файл JSON на страницу?
Понравились посты, которые вы видите здесь?
Посетитель пришел на сайт поиска Google?
Вы выполнили тестирование инъекций Javascript?
А что если введенная вами фраза имеет много значений?
А что если введенная вами фраза имеет много значений?