Посібник з масиву об’єктів JavaScript: як створювати, оновлювати та переглядати об’єкти за допомогою методів масиву JS

В середньому я працюю з даними JSON 18 разів на тиждень. І мені досі потрібно майже кожного разу гуглити конкретні способи маніпулювання ними. Лише уявіть, якби був путівник з усіма відповідями.

У цій публікації я покажу основи роботи з масивами об’єктів у JavaScript.

Якщо ви коли-небудь працювали зі структурою JSON, ви працювали з об’єктами JavaScript. Буквально. JSON розшифровується як JavaScript Object Notation.

Створити об’єкт JSON так само просто:

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

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

Розглядаючи кожну категорію, елемент списку у HTML виглядає так:

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

Створення масиву об’єктів

Але повернемося до автомобілів. Давайте подивимося на цей набір:

Ми можемо представити його у вигляді масиву таким чином:

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

Додавання нового об’єкту до початку масиву — Array.unshift

Щоб додати об’єкт на першу позицію, використовуйте Array.unshift .

Додавання нового об’єкту в кінець масиву — Array.push

Щоб додати об’єкт в кінець масиву, використовуйте Array.push .

Додавання нового об’єкту посеред масиву — Array.splice

Щоб додати об’єкт посередині, використовуйте Array.splice . Ця функція дуже зручна, оскільки вона також може видаляти елементи. Зверніть увагу на її параметри:

Отже, якщо ми хочемо додати червоний Volkswagen Cabrio на п’яте місце, ми використаємо:

let car = < "color": "red", "type": "cabrio", "registration": new Date('2016-05-02'), "capacity": 2 >cars.splice(4, 0, car); 

Перегляд масиву об’єктів

Дозвольте мені поставити вам запитання: для чого вам переглядати масив об’єктів? Причина, чому я запитую, полягає в тому, що зациклення майже ніколи не є основною причиною того, чого ми хочемо досягти.

JavaScript надає багато функцій, які можуть вирішити вашу проблему без реалізації логіки в загальному циклі. Давайте поглянемо.

Пошук об’єкта в масиві за його значеннями — Array.find

Припустимо, ми хочемо знайти автомобіль червоного кольору. Ми можемо використати функцію Array.find .

let car = cars.find(car => car.color === "red"); 

Ця функція повертає перший елемент, який відповідає значенню:

Також можна шукати за кількома значеннями:

let car = cars.find(car => car.color === “red” && car.type === “cabrio”);

У цьому випадку ми отримаємо останню машину в списку.

Отримання кількох елементів із масиву, які відповідають умові — Array.filter

Функція Array.find повертає лише один об’єкт. Якщо ми хочемо отримати всі червоні машини, нам потрібно використовувати Array.filter .

let redCars = cars.filter(car => car.color === "red"); console.log(redCars); // output: // [ // < // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // >, // < // color: 'red', // type: 'cabrio', // registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 2 // >// ] 

Перетворення об’єктів масиву — Array.map

Це те, що нам дуже часто потрібно. Перетворення масиву об’єктів на масив інших об’єктів. Це робота для Array.map . Скажімо, ми хочемо класифікувати наші автомобілі на три групи залежно від їхнього розміру.

let sizes = cars.map(car => < if (car.capacity if (car.capacity return "large"; >); console.log(sizes); // output: // ['large','medium','medium', . 'small'] 

Також можна створити новий об’єкт, якщо нам потрібно більше значень:

let carsProperties = cars.map(car => < let properties = < "capacity": car.capacity, "size": "large" >; if (car.capacity if (car.capacity return properties; >); console.log(carsProperties); // output: // [ // < capacity: 7, size: 'large' >, // < capacity: 5, size: 'medium' >, // < capacity: 5, size: 'medium' >, // < capacity: 2, size: 'small' >, // . // ] 

Додавання властивості до кожного об’єкту масиву — Array.forEach

А якщо нам також потрібен розмір автомобіля? У цьому випадку ми можемо використати в об’єкті властивість size . Це хороший варіант використання для функції Array.forEach .

cars.forEach(car => < car['size'] = "large"; if (car.capacity if (car.capacity >);

Сортування масиву за властивістю — Array.sort

Коли ми закінчили з перетворенням об’єктів, нам зазвичай потрібно відсортувати їх тим чи іншим способом.

Як правило, сортування базується на значенні властивості кожного об’єкта. Ми можемо використовувати функцію Array.sort , але нам також потрібно надати іншу функцію, яка визначає механізм сортування.

Скажімо, ми хочемо відсортувати автомобілі за їхньою містивністю в порядку спадання.

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity >c2.capacity) ? -1 : 0); console.log(sortedCars); // output: // [ // < // color: 'purple', // type: 'minivan', // registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)', // capacity: 7 // >, // < // color: 'red', // type: 'station wagon', // registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)', // capacity: 5 // >, // . // ] 

Функція Array.sort порівнює два об’єкти і ставить перший об’єкт на друге місце, якщо результат функції сортування позитивний. Таким чином, ви можете дивитися на функцію сортування так, ніби це було питання: чи варто розмістити перший об’єкт на другому місці?

Обов’язково враховуйте випадок для нуля, коли порівнювані значення обох об’єктів однакові, щоб уникнути непотрібних замін.

Перевірка відповідності умови об’єктів у масиві — Array.every, Array.includes

Array.every та Array.some стають в нагоді, коли нам просто потрібно перевірити кожен об’єкт на певну умову.

Чи є у нас червоний кабріолет у списку машин? Чи всі автомобілі здатні перевозити щонайменше 4 людини? Або випадок, більш орієнтований на інтернет: чи є певний продукт у кошику?

cars.some(car => car.color === "red" && car.type === "cabrio"); // output: true cars.every(car => car.capacity >= 4); // output: false 

Ви можете пам’ятати функцію Array.includes , яка схожа до Array.some ,
але працює лише для примітивних типів.

Підсумок

У цій статті ми ознайомилися з основними функціями, які допомагають створювати, маніпулювати, перетворювати та переглядати масиви об’єктів. Вони мають охоплювати більшість випадків, на які ви натрапите.

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

Або зв’яжіться зі мною, і я підготую іншу публікацію 🙂

Що таке JavaScript і для чого він потрібен

В одній із попередніх статей ми писали про HTML і CSS, які формують основу та зовнішній вигляд вебсторінок (як манекен і одяг). Тепер розповімо про мову JavaScript, що робить їх «живими». HTML ліпить каркас, CSS додає красу, а JavaScript відповідає за інтерактивність і динаміку. Сьогодні розберемося з можливостями, специфікою та сферами застосування мови програмування JavaScript. А також поговоримо про її плюси та мінуси. Читай далі, якщо цікавишся Frontend-розробкою. А ще приходь на наш безплатний марафон з HTML і CSS.

Що таке JavaScript і в чому його особливості

JavaScript – це високорівнева скриптова мова програмування, яка широко використовується для створення інтерактивних застосунків і сайтів. JS додає анімацію і спливаючі повідомлення, валідує форми, оновлює контент і змушує інтерфейс реагувати на наші дії. Наприклад, наводиш курсор на кнопку, а вона змінює колір (або зникає після натискання). Мова JavaScript робить сторінки функціональними. У неї є свої особливості. Ось деякі з них:

• Інтерпретованість. JavaScript виконується в реальному часі в середовищі браузера, без необхідності попередньої компіляції. Розробник вносить зміни в код JavaScript і відразу бачить результат. Це зручно.
• Інтеграція з HTML і CSS. У зв’язці з ними мова JavaScript дає змогу створювати повнофункціональні вебсторінки.
• Динамічна типізація. Тип змінних у JavaScript визначається автоматично під час виконання коду. Програмістам не потрібно присвоювати його заздалегідь, що спрощує роботу.
• Велика кількість бібліотек і фреймворків JavaScript. Готові рішення для різних завдань економлять час ІТ-спеціалістів.
• Кросплатформеність. Код JavaScript може бути виконаний на різних платформах і пристроях.
• Автоматичне збирання сміття. Полегшує керування пам’яттю, автоматично видаляючи об’єкти, що не використовуються.
• Імперативність, функціональність і принципи ООП. JavaScript підтримує основні парадигми програмування. Це дає змогу створювати складні структури даних, покращувати організацію коду, застосовувати функціональні концепції та описувати точні кроки для досягнення мети.
• Асинхронність. За допомогою таких механізмів, як проміси та async/await, JavaScript ефективно опрацьовує операції, що не потребують негайного завершення без блокування інших задач.
• Вбудована підтримка DOM (Document Object Model). Для динамічної взаємодії з елементами вебсторінки, оброблення подій і внесення змін.
• Велика спільнота. Навколо JS сформувалася величезна спільнота розробників, які постійно створюють нові курси, підручники, фреймворки та бібліотеки JavaScript. Ти без проблем знайдеш відповіді на запитання, які виникнуть у процесі роботи або навчання.
• Відкритий код. JavaScript доступний для використання та модифікації без ліцензійних обмежень (як і Python).

Це головні особливості JavaScript, які роблять його затребуваним у Frontend-розробці та за її межами. У тандемі з HTML і CSS він допомагає створювати круті сайти. Але чи можна назвати JS ідеальною мовою програмування? Розповімо в наступному пункті.

Щоб стати програмістом, записуйся на курси та безплатні марафони від GoIT.

JavaScript: переваги та недоліки

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

Плюси JavaScript:

• Простота вивчення. Зрозумілий і логічний синтаксис JavaScript робить його гарним варіантом для розробників-новачків.
• Універсальність. Мова JavaScript прекрасно працює на будь-яких пристроях і платформах. Усе, що тобі потрібно, – це браузер.
• Гнучкість і сумісність. JavaScript легко інтегрується з іншими технологіями, такими як HTML і CSS, а також підтримує різні парадигми програмування, асинхронність і динамічну типізацію.
• Купа корисних інструментів. Бібліотеки та фреймворки JS дозволяють вирішувати широкий спектр завдань: від створення сайтів і застосунків до розробки серверних рішень.
• Популярність. Мову програмування JavaScript використовують у багатьох компаніях по всьому світу (Netflix, Amazon, PayPal, Facebook, Twitter, Google, Airbnb тощо). Ти швидко знайдеш для себе вдалу вакансію.

Серед мінусів JavaScript можна виділити:

• JS буває менш продуктивним, ніж інші мови програмування (особливо у високонавантажених обчислювальних задачах).
• JavaScript вразливий для деяких видів кібератак, наприклад, міжсайтового скриптингу (XSS). Але проблеми з кібербезпекою не тільки для нього характерні.
• У масштабних і довгострокових проєктах динамічна типізація JS може створювати труднощі та збільшувати витрати на підтримку софту.
• Не всі браузери однаково обробляють JavaScript-код, що впливає на сумісність.
• Також JavaScript для початківців буває складним через мультипарадигмальність і асинхронні операції. Але якщо будеш старанно вчитися, все обов’язково зрозумієш.

Тепер ти знаєш плюси й мінуси JavaScript. Попри деякі обмеження, він відкриває багаті можливості для творчості та кар’єрного зростання. Важливо пам’ятати, що немає ідеальної мови програмування. Записуйся на наші курси, якщо хочеш зайнятися Frontend-розробкою.

Що можна робити за допомогою JavaScript

Мова JavaScript давно переросла рамки простої роботи з вебсторінками та стала багатофункціональним інструментом. Ось де використовується JavaScript:

• Frontend. Для інтерактивних елементів, таких як слайдери, спливаючі вікна, форми зворотного зв’язку, анімація, обробка подій і багато іншого. JavaScript робить сайти зручними та привабливими для користувачів.
• Backend і Fullstack. Застосування Node.js на серверній стороні розробки (для API, портативних застосунків і сервісів, які безперервно обмінюються даними з користувачами).
• Односторінкові застосунки (SPA). Бібліотеки та фреймворки JavaScript, як-от React, Vue.js та Angular, дають можливість створювати швидкі SPA. Вони вирізняються плавним інтерфейсом і дозволяють взаємодіяти з контентом без необхідності перезавантажувати сторінку (наприклад, вебверсії Airbnb, Gmail, Pinterest або Netflix).
• Мобільна розробка. Кросплатформні застосунки з використанням React Native, Ionic, NativeScript або інших фреймворків JS.
• Ігри на JavaScript. Прості бродилки, пазли, головоломки, перегони та стратегії. Створюй ігрові проєкти, що захоплюють, просто в браузері.
• Інтернет речей (IoT). IoT-сервіси для розумних будинків, збору даних з носимих пристроїв і управління системами.
• Машинне навчання. Найпопулярніша мова для AI та ML – це Python. Але в деяких випадках для розробки й впровадження моделей машинного навчання у вебзастосунках використовується JavaScript (завдяки бібліотекам на кшталт TensorFlow.js).
• Розширення для браузера. Щоб керувати паролями, робити скриншоти, користуватися VPN або блокуванням реклами.

Погодься, можливості JavaScript здаються доволі різноманітними. З цією мовою програмування ти точно не занудьгуєш.

Чи варто вивчати JavaScript у 2024 році

JS – універсальна і перспективна мова зі зрозумілим синтаксисом. Вона постійно розвивається і використовується для величезної кількості проєктів. Щоб зрозуміти, чи варто вчити JavaScript, подивися на список того, що можна робити з його допомогою (чи цікаво тобі?). Він стане в пригоді, наприклад, у Frontend, Backend, Fullstack або тестуванні ПЗ. Приходь на наші курси, щоб опанувати одну з цих професій. А якщо ще не визначився з напрямом навчання, запишись на безплатні онлайн-марафони від GoIT. Знайди улюблену справу та отримай високооплачувану роботу, щоб жити щасливо.

Вступ до JavaScript

Давайте розглянемо, що такого особливого в мові JavaScript, чого ми можемо досягти за її допомогою та які ще технології пов’язані з нею.

Що таке JavaScript?

JavaScript було створено для того, щоб “оживити вебсторінки”.

Програми цією мовою називаються скриптами. Їх можна писати прямо в коді HTML-сторінок і вони автоматично виконуватимуться при їх завантаженні.

Скрипти записуються та виконуються як простий текст. Для запуску їм не потрібна спеціальна підготовка чи компілятор.

У цьому плані JavaScript дуже відрізняється від іншої мови програмування — Java.

Коли мову JavaScript було створено, спочатку вона мала іншу назву: “LiveScript”. Тоді була дуже популярна мова програмування Java, тому було вирішено, що позиціонування нової мови як “молодшої сестри” Java допоможе в її популяризації.

Згодом JavaScript стала повністю незалежною мовою програмування зі своєю специфікацією ECMAScript і зараз не має нічого спільного з Java.

Сьогодні JavaScript може виконуватися не тільки в браузері, але й на сервері або на будь-якому пристрої, який має спеціальну програму — рушій JavaScript.

Браузер має вбудований рушій, який інколи називають “віртуальною машиною JavaScript”.

Різні рушії мають різні “кодові назви”. Наприклад:

• V8 – в Chrome, Opera та Edge.
• SpiderMonkey – в Firefox.
• …Є також інші кодові назви як “Chakra” для IE, “JavaScriptCore”, “Nitro” і “SquirrelFish” для Safari, та інші.

Терміни вище добре було б запам’ятати, оскільки вони використовуються в статтях розробників на просторах інтернету. Ми також будемо їх використовувати. Наприклад, якщо “можливість X підтримується в V8”, то, імовірно, вона працюватиме в Chrome, Opera та Edge.

Рушії складні. Але принцип роботи простий.

1. Рушій (вбудований, якщо це браузер) читає (“розбирає”) скрипт.
2. Потім він перетворює (“компілює”) скрипт у машинний код.
3. Після чого цей машинний код виконується, причому досить швидко.

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

Що може вбудований у браузер JavaScript?

Сучасний JavaScript – це “безпечна” мова програмування. Вона не надає низькорівневого доступу до пам’яті чи процесора, оскільки була створена для браузерів, які цього не потребують.

Можливості JavaScript значно залежать від середовища, у якому виконується скрипт. Наприклад, Node.js підтримує функції, які дозволяють JavaScript читати/записувати довільні файли, здійснювати мережеві запити тощо.

Вбудована в браузер JavaScript може робити все, що пов’язано з управлінням вебсторінками, взаємодією з користувачем та вебсервером.

Наприклад, JavaScript може:

• Додавати новий HTML-код на сторінку, змінювати наявний вміст, змінювати стилі.
• Реагувати на дії користувача, опрацьовувати натискання миші, переміщення вказівника, натискання на клавіші клавіатури.
• Надсилати запити мережею до віддалених серверів, викачувати та надсилати файли (так звані технології AJAX і COMET).
• Отримувати і надсилати куки, ставити запитання відвідувачам, показувати повідомлення.
• Запам’ятовувати дані на стороні клієнта (“local storage”), які будуть доступні в майбутніх сесіях на цьому вебсайті.

Що НЕ може JavaScript?

Можливості JavaScript у браузері обмежені для безпеки користувача. Мета полягає в тому, щоб небезпечні вебсторінки не мали доступу до приватної інформації та не могли пошкодити інформацію на комп’ютері користувача.

• JavaScript на вебсторінці не може читати/записувати довільні файли на жорсткому диску, копіювати їх чи виконувати програми. Скрипт не має прямого доступу до функцій ОС. Сучасні браузери дозволяють працювати з файлами, але доступ до них обмежений і надається тільки тоді, коли користувач виконав відповідні дії, наприклад, перетягнув файл у вікно браузера чи вибрав його через теґ . Є шляхи взаємодії з камерою/мікрофоном та іншими пристроями, але для цього потрібен явний дозвіл користувача. Тому сторінка з JavaScript не може нишком увімкнути веб-камеру, спостерігати за оточенням і надсилати інформацію до СБУ.
• Різні вкладки/вікна зазвичай не знають одне про одного. Іноді це можливо, наприклад, коли одне вікно використовує JavaScript, щоб відкрити інше. Але навіть у такому випадку JavaScript з однієї сторінки не має доступу до іншої, якщо вони з різних сайтів (мають різні домени, протоколи чи порти). Це називається “Політикою того ж походження (Same Origin Policy)”. Щоб обійти це обмеження, обидві сторінки мають погодитися на обмін даними та містити спеціальний JavaScript-код, який здійснюватиме це. Ми розглянемо цю тему в посібнику. Знову-таки, це обмеження існує задля безпеки користувача. Сторінка за адресою http://anysite.com , яку відкрив користувач, не повинна мати доступу до іншої вкладки браузера з URL-адресою http://gmail.com і викрадати звідти інформацію.
• JavaScript може легко спілкуватися мережею з сервером, від якого отримана поточна сторінка. Але здатність скрипта отримувати дані з інших сайтів/доменів обмежена. Такі запити можливі, але потребують спеціальної згоди (вираженої в HTTP-заголовках) від віддаленого сервера. Це також зроблено з метою безпеки.

Таких обмежень немає, якщо JavaScript використовується за межами браузера, наприклад, на сервері. Сучасні браузери дозволяють установлювати плаґіни/розширення, які мають розширені можливості, проте вимагають розширених прав.

Що робить мову JavaScript унікальною?

Є принаймні три чудові особливості JavaScript:

• Цілковита інтеграція з HTML/CSS.
• Прості речі робляться просто.
• Підтримується всіма сучасними браузерами та є типово увімкненою.

JavaScript – це єдина браузерна технологія, яка суміщає ці три речі.

Це й робить її унікальною. Ось чому JavaScript – найбільш поширений засіб створення браузерних інтерфейсів.

До слова, JavaScript також дозволяє створювати сервери, мобільні застосунки тощо.

Мови “над” JavaScript

Синтаксис JavaScript не задовольняє потреби кожного. Різні люди хочуть різних функцій.

Цього слід очікувати, тому що проєкти та вимоги різні для кожного.

Останнім часом з’явилося безліч нових мов, які транспілюються (конвертуються) в JavaScript перед виконанням у браузері.

Сучасні інструменти роблять транспіляцію дуже швидкою та прозорою, дозволяючи розробникам писати код іншою мовою й автоматично конвертувати його “під капотом”.

• CoffeeScript – це “синтаксичний цукор” для JavaScript. Вона вводить коротший синтаксис, дозволяючи нам писати більш чіткий і точний код. Зазвичай це до вподоби програмістам, які пишуть на Ruby.
• TypeScript зосереджена на додаванні “строгої типізації даних” для спрощення розробки та підтримки складних систем. Розробляється Microsoft.
• Flow також додає типізацію даних, але іншим способом. Розробляється Facebook.
• Dart – це автономна мова, яка має власний рушій, що працює в небраузерних середовищах (як-от мобільні застосунки), але також може транспілюватися в JavaScript. Розробляється Google.
• Brython – це транспілятор коду Python у JavaScript, що дозволяє писати застосунки на чистому Python без використання JavaScript.
• Kotlin – це сучасна, лаконічна та безпечна мова програмування, яку можна компілювати для браузера або NodeJS.

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

Підсумки

• Мова JavaScript спочатку була створена лише як мова для браузера, але зараз її також використовують в інших середовищах.
• Сьогодні JavaScript позиціонується як найбільш поширена мова для браузера, яка повністю інтегрована з HTML/CSS.
• Існує багато мов, які “транспілюються” в JavaScript і надають певні функції. Рекомендується переглянути їх, хоча б мигцем, після освоєння JavaScript.