1. Передумови
2. Налаштування веб-карти
3. Використання map () для перегляду даних JSON
4. Використовуючи filter () для пошуку відповідних значень
5. Використовуючи зменшити () для підрахунку екземплярів значень в об'єкті
6. Підсумок карти (), фільтра () та зменшення () `
7. карта ()
8. filter ()
9. зменшити ()
10. Висновок

Я не знаю про вас, але це не дуже допомагає мені переглядати нескінченні приклади foo і bar, щоб спробувати зрозуміти, як використовувати функцію мови програмування. Існує кілька концепцій JavaScript / ES6, які важко зрозуміти як окремі фрагменти, не бачачи, як вони працюють як частина більшого проекту, тому я розкрию приклад того, як я їх використав у цій статті.

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

Іншим випадком я використовував API Карт Google відобразити декілька місць у магазині для концепцій ресторану на моїй останній роботі. Для цього проекту я вирішив скористатися Листовка , бібліотека JavaScript для інтерактивних карт.

Ось останній проект, який я створив: Кафетографія

У цій статті ви можете або створити власну веб-карту для чогось у власному районі чи світі, який ви хотіли б відстежувати, або ви можете просто переглянути мої приклади map (), filter () та зменшити ().

Передумови

Цілі

• Наступною метою є використання скорочення () та map () на прикладі реального світу (карти) для спрощення та підвищення нашого коду більш ефективним та СУХИЙ (Будь-ласка, самі себе ) Ми скористаємося функцією скарачення (), щоб отримати кількість кав’ярень в околицях Чикаго, а карта () використовуватимемо для витягу даних із зовнішнього каналу JSON та показу розташувань на веб-карті.

Давайте трохи вирішимо проблеми.

Налаштування веб-карти

Ось Приклад проекту на CodePen ви можете використовувати. Все, що потрібно, - це файл html ( index.html ) із необхідними умовами, що завантажуються у файли CSS та JavaScript Leaflet:

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

# карта {висота: 100vh; ширина: 100%; }

І цей JavaScript ( script.js ) для завантаження в карту та дані карти.

scriptpts.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.

Знову ж таки, ви можете знайти і роздрібнити робочу версію всієї справи саме тут на CodePen, але вам доведеться перенести його на власний сервер або працювати на ньому локально.

Тепер я хочу розпочати додавання локацій як маркерів до карти. Я можу це зробити легко, зробивши купу змінних з латитутом і довготою та використовуючи метод addTo (). Скажімо, я хочу додати до своєї карти Ель Месон, Червоточину та Іпсенто. Я триматиму його до трьох, щоб це було коротким і простим. Ось як я це зробив би для початку.

scriptpts.js

const elMeson = L. маркер ([42.002439, - 87.672339]). addTo (myMap) const червоточину = L. маркер ([41.908415, - 87.674605]). addTo (myMap) const ipsento = L. маркер ([41.918639, - 87.687247]). addTo (моя карта)

Це не здається занадто поганим - мені просто потрібно додати новий запис для кожного нового маркера. Однак він починає отримувати трохи більше деталізованих даних, як тільки я починаю додавати в спливаюче вікно з додатковою інформацією для кожного місця.

scriptpts.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 червоточину = 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 (моя карта)

Ось як це виглядає з завантаженими маркерами та спливаючими вікнами.

Тепер це може стати болем, щоб додати нову з них для кожної кав’ярні, на яку я натрапив. Набагато простіше було б створити файл JSON і пройти цикл через нього. Якщо ви ніколи раніше не використовували JSON, настійно рекомендую читаючи цей підручник з JSON щоб дізнатися про це з нуля і пройти певну практику.

У цей момент я видалю всю інформацію про маркер із script.js і зроблю файл JSON з об’єктом, що містить масив, що містить об’єкти всіх місць мого кав’ярні. Слід відстежувати спочатку всі квадратні та фігурні дужки.

map.json

{"cafes": [{"name": "El Meson", "lat": 42.002439, "long": - 87.672339, "околиці": "Rogers Park", "ambiance": "4/5", "аромат ":" 5/5 "," коментарі ":" Кращий капучино та круасани, які я коли-небудь мав. " }, {"name": "Wormhole", "lat": 41.908415, "long": - 87.674605, "околиці": "Wicker Park", "ambiance": "5/5", "аромат": "4 / 5 "," коментарі ":" Мила атмосфера з Nintendo, яка насправді працює належним чином і найкращі ігри (включаючи FF1!). " }, {"name": "Ipsento", "lat": 41.918639, "long": - 87.687247, "околиці": "Wicker Park", "ambiance": "4/5", "color": "5 / 5 "," коментарі ":" Дійсно чудова пікантна латте. Гарна атмосфера. " }]}

Так добре. Тепер у нас є вся інформація про кожне місце розташування - ім'я, широта, довгота, околиці та додаткові деталі - акуратно розміщена у файлі JSON. Тепер, як ми можемо отримати цей файл JSON на сторінку?

Ми не будемо використовувати jQuery - лише звичайний JavaScript - тому це трохи більше пов'язаний процес. Звернусь до Як використовувати дані JSON за допомогою PHP або JavaScript для подальшого пояснення коду, але ось як ми відкриваємо та отримуємо доступ до нашого файлу map.json .

scriptpts.js

const request = новий запит XMLHttpRequest () відкритий ('GET', 'map.json', правда) запит. onload = функція () {const data = JSON. розбір (цей. відповідь)} запит. send ()

Там, де сказано, Почніть доступ до даних JSON, тут ми розпочнемо роботу з даними з map.json , розміщеними у змінній даних. Переконайтеся, що map.json не є URL-адресою локального файлу. Дивіться інформацію нижче.

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

Використання map () для перегляду даних JSON

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

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

Для отримання даних, знайдених всередині кафе в JSON, ми будемо використовувати метод map () на data.cafes з функцією всередині.

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

Я просто перепишу цю функцію на Функція стрілки ES6 щоб зробити його більш лаконічним.

const кафе = дані .cafes. карта (кафе => {})

Тепер для доступу до будь-якої власності з каналу JSON ми будемо використовувати позначення крапок на об’єкті кафе. Отже, перша ітерація cafe.name поверне El Meson, друга - Wormhole тощо. Все, що я тут роблю, - це те саме функцію Л.Маркера, як і раніше, і заміна всіх статичних значень на динамічні властивості.

scriptpts.js

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

У цьому прикладі використовується рядкові рядки шаблону, які використовують зворотні посилання і можуть охоплювати декілька рядків, а також включати змінні з утеченими на відміну від конкатенації. Заціни якщо ви не знайомі з буквами шаблону.

Ось повний файл scriptpts.js до цього часу.

scriptpts.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', правда) запит. onload = функція () {const data = JSON. розбір (це. відповідь) const кафе = data .cafes. map (cafe => {L. маркер ([cafe .lat, кафе. довгий]). bindPopup (`<h2> $ {cafe .name} </h2> <p> <b> Район: </b> $ {cafe .neighborhood} </p> <p> <b> Ambiance: </b> $ {cafe .ambiance} </p> <p> <b> Смак: </b> $ {cafe .flavor} < / p> <p> <b> Коментарі: </b> $ {cafe .comments} </p> `). openPopup (). addTo (myMap)})} запит. send ()

Звичайно, map () здатний набагато більше, ніж ми робимо в цьому прикладі, але це хороший і практичний початок.

Цей випадок використання map () технічно працює, але оскільки кафе міститиме порожній масив, forEach () також буде хорошим вибором для цієї ситуації.

Використовуючи filter () для пошуку відповідних значень

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

У нашому прикладі у нас є два мікрорайони для трьох кафе - один у Роджерс-парку, а два у Вікер-парку. З таким невеликим прикладом, звичайно, було б дуже просто написати "Роджерс Парк: 1; Плетений парк: 2", але чим довше воно стає, і чим більше мікрорайонів і кафе додається, тим більше буде необхідності для автоматизації цього процесу.

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

const individualNeighborhood = дані .кафе. фільтр (кафе => {})

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

const rogersPark = дані. кафе. filter (cafe => {return cafe .neighborhood === 'Rogers Park'}) const wickerPark = data .cafes. filter (cafe => {return cafe .neighborhood === 'Wicker Park'})

Використовуючи цей метод, я повинен був би створити масив об'єктів, що пов'язують рядок "Rogers Park" з результатом rogersPark.length

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

І нарешті я міг проглянути ці значення.

for (нехай сусідство кварталівArray) {console. журнал (околиця. ім'я, околиця. ім'я)}

for ... of використовується для ітерації через масиви. Ось результат.

Роджерс Парк 1 Плетений парк 2

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

Використовуючи зменшити () для підрахунку екземплярів значень в об'єкті

Redu () пишеться як map () та filter (), але внутрішня функція прийме два параметри. Також в кінці є додаткове місце, куди ми вставимо порожній об’єкт {}. Це також може бути порожній масив [], але в нашому прикладі це буде об’єкт. Цей додатковий параметр - це вихідне значення , яке за замовчуванням дорівнює 0.

const susjedствоCount = дані .кафе. зменшити ((суми, значення) => {}, {})

Я зіткнувся з цим зручним фрагментом, який створить об'єкт, що містить усі наші кінцеві підрахунки.

const susjedствоCount = дані .кафе. зменшити ((суми, кафе) => {сум [кафе .neighborhood] = (сум [кафе. сусідство] || 0) + 1 повернення сум}, {})

Тепер ми переберемося через об’єкт, який ми створили для for ... in, який використовується для ітерації за допомогою об’єктних клавіш.

для (нехай сусідство у сусідствіCount) {console. журнал (околиці, сусідство, кількість [околиці])}

І ось вихід.

Роджерс Парк 1 Плетений парк 2

Ми отримали такий же результат, як і наш неефективний код раніше, лише за допомогою декількох коротких рядків.

Як тільки це було закінчено, я вставив це в DOM замість того, щоб просто роздрукувати його на консолі. Щойно додано новий ідентифікатор до index.html .

<div id = "квартали"> </div>

Потім передайте зменшені значення новому div.

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

Я додав CSS, зображення чашки кави як маркера, іншу карту та інші місця, в які я не буду входити, оскільки вони не в центрі уваги статті. Джерело для всього файлу script.js, який ми тільки що створили саме тут. Нижче - як виглядає фінальна версія.

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

Підсумок карти (), фільтра () та зменшення () `

Ось дуже короткий огляд відмінностей між картою (), фільтром () та зменшенням (), використовуючи дуже простий масив [1, 2, 3, 4].

числа const = [1, 2, 3, 4]

карта ()

Використовуйте map (), щоб отримати масив із кожним значенням, збільшеним на одиницю.

const numbersInposed - числа. відображення (x => {return x + 1}) чиселУзбільшене

filter ()

Використовуйте filter (), щоб отримати масив доступних значень більше 2.

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

зменшити ()

Використовуйте зменшити (), щоб отримати суму чисел у масиві.

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

Висновок

Там у вас є. Невеликий проект із вирішенням проблем, який використовує карту (), фільтр () та зменшення () по ходу, з лаконічними фрагментами для огляду. Коментарі та вдосконалення оцінено!

Нарешті, ось моє музичне відтворення Божевільного світу від «Сльози для страху». Сміливо імпортуйте цю нерафіновану Слонової кістки та Слонової кістки класика у вашу музичну бібліотеку.

Як публікації, які ви бачите тут? Зареєструйтесь, щоб отримувати повідомлення про нові.