Скажімо, ви працюєте над своїм кодом у Git і щось пішло не за планом. Тож тепер вам потрібно скасувати свій останній коміт. Але як це зробити? Давайте дізнаємось!

Існує два можливі способи скасувати ваш останній коміт. У цій статті ми розглянемо їх обидва.

Команда revert

Команда revert створить коміт, який скасовує зміни цільового коміту. Ви можете використовувати її для скасування останнього коміту таким чином:

git revert <commit to revert>

Ви можете знайти назву коміту, який потрібно скасувати, за допомогою git log. Перший виведений комміт і є останнім створеним комітом. Тоді ви можете скопіювати звідти буквено-цифрове ім’я та використати його в команді revert .

Команда reset

Ви також можете скористатися командою reset, щоб скасувати останній коміт. Але будьте обережні: це змінить історію комітів, тому вам варто використовувати її уважно. Вона перемістить HEAD, робочу гілку, до вказаного коміту та відкине все після:

git reset --soft HEAD~1

Параметр --soft означає, що ви не втратите незафіксовані зміни, які можете мати.

Якщо ви бажаєте відмінити останній комміт, а також видалити всі незафіксовані зміни, ви можете скористатися параметром --hard :

git reset --hard HEAD~1

Це скасує останній коміт, а також будь-які незафіксовані зміни.

Що і коли краще використовувати: reset чи revert?

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

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

Підсумки

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

Тепер, якщо ви помітите, що останній коміт містить помилку або не повинен був бути зроблений, ви знаєте, як виправити це!

Існує чотири способи встановити властивість стилю backgroundImage за допомогою вбудованого CSS у React.

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

Як встановити фонове зображення в React за допомогою зовнішньої URL-адреси

Якщо ваше зображення знаходиться десь в інтернеті, ви можете встановити фонове зображення свого елемента, розмістивши URL-адресу таким чином:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

Наведений вище код відтворить єдиний елемент <div> із застосованим до нього стилем background-image: url(https://via.placeholder.com/500).

Як встановити фонове зображення в React з вашої папки /src

Якщо ви завантажуєте свою програму за допомогою Create React App і маєте своє зображення в папці src/, ви можете спочатку виконати import зображення, а потім розмістити його як фон свого елемента:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Коли ви виконаєте команду npm start, React покаже помилку «Failed to Compile» і зупинить збірку, якщо зображення не знайдено:

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

Як встановити фонове зображення в React за допомогою методу відносної URL-адреси

Папку public/ можна використовувати для додавання статичних ресурсів до програми React. Будь-які файли, які ви поміщаєте в папку, будуть доступними в інтернеті.

Якщо ви помістите файл image.png у папку public/, ви зможете отримати доступ до нього за адресою <your host address>/image.png. Під час запуску React на локальному комп’ютері зображення має бути за адресою http://localhost:3000/image.png.

Потім ви можете призначити URL-адресу відносно адреси хосту, щоб встановити фонове зображення. Ось приклад:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Встановивши URL-шлях до /image.png як у прикладі вище, вебпереглядач шукатиме фонове зображення за <your host address>/image.png.

Ви також можете створити іншу папку всередині public/, якщо хочете впорядкувати зображення в папки. Наприклад:

Не забудьте змінити значення backgroundImage на url(/img/image.png), якщо вирішите створити папку.

Як встановити фонове зображення в React за допомогою методу абсолютної URL-адреси

Ви також можете включити абсолютну URL-адресу, використовуючи змінну середовища PUBLIC_URL у Create React App, ось так:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

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

Абсолютну URL-адресу можна буде побачити лише під час розгортання React у робочій програмі пізніше.

Як встановити фонове зображення з додатковими властивостями

Якщо ви хочете додатково налаштувати фонове зображення, це можна зробити, додавши додаткові властивості після backgroundImage. Ось приклад:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

Встановлені вище властивості додаватимуть властивості background-repeat: no-repeat та width: 250px разом із background-image до елементу <div>.

Дякую, що прочитали, і сподіваюся, ця стаття була для вас корисною. Якщо у вас є запитання, ви можете знайти мене в твіттері. Час від часу я також буду ділитися деякими короткими порадами для розробників. 🙂

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

Тому в цьому посібнику ми побачимо, як працювати з кількома прапорцями в React.

Ви дізнаєтесь:

• як використовувати прапорець як контрольований компонент у React
• як використовувати методи масиву map та reduce для складних обчислень
• як створити масив певної довжини, попередньо заповнений певним значенням

та багато іншого.

Ця стаття є частиною мого курсу Mastering Redux. Ось попередній перегляд програми, яку ми будемо створювати на курсі.

Тож почнемо.

Як працювати з одним прапорцем

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

У цій статті я буду використовувати синтаксис React Hooks для створення компонентів. Отже, якщо ви не знайомі з хуками React, перегляньте мою статтю «Вступ до хуків React».

Подивіться на наведений нижче код:

<div className="App">
  Select your pizza topping:
  <div className="topping">
    <input type="checkbox" id="topping" name="topping" value="Paneer" />Paneer
  </div>
</div>

Ось демоверсія на Code Sandbox.

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

Тож ми можемо легко встановити та зняти прапорець, як показано нижче:

Але щоб відобразити на екрані позначений прапорець чи ні, нам потрібно перетворити його на контрольований компонент.

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

Подивіться на наведений нижче код:

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className="App">
      Select your pizza topping:
      <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
      <div className="result">
        Above checkbox is {isChecked ? "checked" : "un-checked"}.
      </div>
    </div>
  );
}

Ось демоверсія на Code Sandbox.

У наведеному вище коді ми оголосили стан isChecked у компоненті з початковим значенням false за допомогою хука useState :

const [isChecked, setIsChecked] = useState(false);

Потім для прапорця вводу ми встановили два додаткові параметри checked та onChange таким чином:

<input
  ...
  checked={isChecked}
  onChange={handleOnChange}
/>

Щоразу, коли ми натискаємо прапорець, буде викликана функція обробки handleOnChange, яку ми використовуємо для встановлення значення стану  isChecked.

const handleOnChange = () => {
  setIsChecked(!isChecked);
};

Отже, якщо прапорець позначено, ми встановлюємо значення isChecked на false. Але якщо прапорець знятий, ми встановлюємо значення true за допомогою !isChecked. Потім ми передаємо це значення в прапорець введення для перевіреного параметру checked.

Таким чином прапорець вводу стає контрольованим компонентом, значенням якого керує стан.

Зверніть увагу, що в React завжди рекомендується використовувати контрольовані компоненти для полів введення, навіть якщо код виглядає складним. Це гарантує, що зміна вхідних даних відбувається лише всередині обробника onChange.

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

Лише в рідкісних випадках ви можете використовувати React ref для неконтрольованого використання компоненту.

Як обробляти кілька прапорців

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

Подивіться на приклад у Code Sandbox.

Тут ми показуємо список топінгів і відповідну ціну. Виходячи з того, які топінги вибрано, нам потрібно відобразити загальну суму.

Раніше з одним прапорцем ми мали лише стан isChecked, і ми змінювали стан прапорця на основі цього.

Але тепер у нас багато прапорців, тому додавати кілька викликів useState для кожного прапорця непрактично.

Отже, давайте оголосимо масив у стані, що вказує стан кожного прапорця.

Щоб створити масив, довжина якого дорівнює кількості прапорців, ми можемо використати метод fill:

const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
);

Тут ми оголосили стан із початковим значенням у вигляді масиву, заповненого значенням false.

Отже, якщо ми маємо 5 топінгів, масив станів checkedState міститиме 5 значень false, як наведено нижче:

[false, false, false, false, false]

І як тільки ми поставимо/знімемо прапорець, ми змінимо відповідний стан  false на true або true на false.

Тут наведено остаточний код на Code Sandbox.

Повний код App.js виглядає так:

import { useState } from "react";
import { toppings } from "./utils/toppings";
import "./styles.css";

const getFormattedPrice = (price) => `$${price.toFixed(2)}`;

export default function App() {
  const [checkedState, setCheckedState] = useState(
    new Array(toppings.length).fill(false)
  );

  const [total, setTotal] = useState(0);

  const handleOnChange = (position) => {
    const updatedCheckedState = checkedState.map((item, index) =>
      index === position ? !item : item
    );

    setCheckedState(updatedCheckedState);

    const totalPrice = updatedCheckedState.reduce(
      (sum, currentState, index) => {
        if (currentState === true) {
          return sum + toppings[index].price;
        }
        return sum;
      },
      0
    );

    setTotal(totalPrice);
  };

  return (
    <div className="App">
      <h3>Select Toppings</h3>
      <ul className="toppings-list">
        {toppings.map(({ name, price }, index) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={name}
                    value={name}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index)}
                  />
                  <label htmlFor={`custom-checkbox-${index}`}>{name}</label>
                </div>
                <div className="right-section">{getFormattedPrice(price)}</div>
              </div>
            </li>
          );
        })}
        <li>
          <div className="toppings-list-item">
            <div className="left-section">Total:</div>
            <div className="right-section">{getFormattedPrice(total)}</div>
          </div>
        </li>
      </ul>
    </div>
  );
}

Давайте розберемося, що ми тут робимо.

Ми оголосили прапорець вводу, як показано нижче:

<input
  type="checkbox"
  id={`custom-checkbox-${index}`}
  name={name}
  value={name}
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Тут ми додали атрибут checked із відповідним значенням true або false зі стану checkedState. Отже, кожен прапорець матиме правильне значення свого позначеного стану.

Ми також додали обробник onChange і передаємо index прапорця, який позначено/знято, до методу handleOnChange.

Обробник методу handleOnChange має наступний вигляд:

const handleOnChange = (position) => {
  const updatedCheckedState = checkedState.map((item, index) =>
    index === position ? !item : item
  );

  setCheckedState(updatedCheckedState);

  const totalPrice = updatedCheckedState.reduce(
    (sum, currentState, index) => {
      if (currentState === true) {
        return sum + toppings[index].price;
      }
      return sum;
    },
    0
  );

  setTotal(totalPrice);
};

Тут ми спочатку спочатку проходимось по масиву checkedState, використовуючи метод масивів map. Якщо значення переданого параметра position збігається з поточним індексом, ми змінюємо його значення. Потім, якщо значення є true, воно буде перетворено на false за допомогою !item, а якщо значення false — воно буде перетворено на true.

Якщо index не збігається з наданим параметром position, ми не змінюємо його значення, а просто повертаємо значення, яким воно є.

const updatedCheckedState = checkedState.map((item, index) =>
  index === position ? !item : item
);

// the above code is the same as the below code

const updatedCheckedState = checkedState.map((item, index) => {
  if (index === position) {
    return !item;
  } else {
    return item;
  }
});

Я використовував тернарний оператор ?:, оскільки він робить код коротшим, але ви можете використовувати будь-який метод масиву.

Якщо ви не знайомі з тим, як працюють такі методи масиву, як map чи reduce, то перегляньте цю статтю, яку я написав.

Далі ми встановлюємо масив checkedState до оновленого масиву updatedCheckedState. Це важливо, тому що якщо ви не оновите стан checkedState в обробнику handleOnChange, ви не зможете встановити або зняти прапорець.

Це пояснюється тим, що ми використовуємо значення checkedState для прапорця, щоб визначити, чи позначено прапорець чи ні (оскільки це контрольований компонент, як показано нижче):

<input
  type="checkbox"
  ...
  checked={checkedState[index]}
  onChange={() => handleOnChange(index)}
/>

Зауважте, що ми створили окрему змінну updatedCheckedState і передаємо цю змінну функції setCheckedState. Ми використовуємо метод reduce для updatedCheckedState, а не для вихідного масиву checkedState.

Причина в тому, що за замовчуванням функція setCheckedState, яка використовується для оновлення стану, є асинхронною.

Виклик функції setCheckedState не гарантує, що ви отримаєте оновлене значення масиву checkedState у наступному рядку.

Тож ми створили окрему змінну та використали її в методі reduce.

Ви можете прочитати цю статтю, якщо ви не знайомі з тим, як стан працює в React.

Потім, щоб обчислити загальну суму, ми використовуємо метод масиву reduce:

const totalPrice = updatedCheckedState.reduce(
  (sum, currentState, index) => {
    if (currentState === true) {
      return sum + toppings[index].price;
    }
    return sum;
  },
  0
);

Метод масиву reduce отримує чотири параметри, з яких ми використовуємо лише три: sum, currentState та index. Ви можете використовувати інші назви, якщо хочете, оскільки це лише параметри.

Ми також передаємо 0 як початкове значення, яке також відоме як значення accumulator для параметру sum.

Потім у функції reduce ми перевіряємо, чи поточне значення масиву checkedState дійсно true.

Якщо значення true, це означає, що прапорець позначено, тому ми додаємо значення відповідного price за допомогою sum + toppings[index].price.

Якщо значення масиву checkedState є false, ми не додаємо його ціну, а просто повертаємо розраховане попереднє значення sum.

Потім ми встановлюємо значення totalPrice до стану total за допомогою setTotal(totalPrice)

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

Ось посилання на попередній перегляд наведеного вище прикладу на Code Sandbox, щоб спробувати самостійно.

Дякую, що прочитали!

Більшості розробників важко зрозуміти, як працює Redux. Але кожен розробник React повинен знати, як працювати з Redux, оскільки промислові проєкти здебільшого використовують Redux для керування більшими проєктами.

Тому, щоб вам було легше, я запустив курс Mastering Redux.

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

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

Хочете бути в курсі регулярного контенту по JavaScript, React, Node.js? Слідкуйте за мною в LinkedIn.

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

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

Ми дізнаємося, як це зробити в цьому посібнику.

Як читати файл JSON у JavaScript за допомогою Fetch API

Одним із стандартних методів, який ми можемо використовувати для читання файлу JSON (локального файлу, або файлу, завантаженого на сервер), є Fetch API. Він використовує однаковий синтаксис для обох випадків. Єдиною відмінністю буде URL-адреса.

Наприклад, припустімо, що у папці нашого проєкту є локальний файл під назвою data.json, який містить такі дані JSON:

<!--./data.JSON-->

{
    "id": 1,
    "title": "Hello World",
    "completed": false
}

Тепер ми можемо прочитати цей файл у JavaScript за допомогою методу Fetch API:

<!--./index.js-->

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

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

Щоб виправити це, ми переконаємося, що наш файл JSON знаходиться на локальному або віддаленому сервері. Якщо ми використовуємо Live-сервер у нашій IDE, все буде нормально. Але коли ми безпосередньо завантажуємо наш файл, ми отримуємо цю помилку.

І як я вже говорив раніше, припустімо, що у нас є файл JSON на віддаленому сервері, і ми намагаємося прочитати цей файл у JavaScript. Той самий синтаксис буде працювати:

<!--./index.js-->

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

Fetch API є кращим методом для використання, коли ми хочемо прочитати файл JSON із зовнішнього сервера або локального файлу в наш файл JavaScript.

Як прочитати файл JSON у JavaScript за допомогою оператора import

Інший метод, який ми можемо використати окрім створення запиту HTTP, є оператор import. Цей метод має кілька ускладнень, але ми розглянемо їх.

Як і в попередньому розділі, припустімо, що у нас є файл JSON, який містить дані користувача (наприклад, user.json):

<!--./user.JSON-->

{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

Ми можемо прочитати ці дані JSON у JavaScript за допомогою оператора імпорту таким чином:

<!---./index.js-->

import data from './data.json';
console.log(data);

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

Щоб виправити це, ми можемо додати тег script type="module" в наш файл HTML, де ми посилалися на файл JavaScript, наприклад:

<html lang="en">
    // ...
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>

Коли ми це зробимо, ми все одно отримаємо іншу помилку:

Щоб виправити вже цю помилку, нам потрібно додати тип файлу JSON до оператора import, і тоді ми зможемо прочитати наш файл JSON у JavaScript:

import data from './data.json' assert { type: 'JSON' };
console.log(data);

Це ідеально працює, якщо ми запускаємо наші файли на локальному або віддаленому сервері. Але припустімо, що ми запускаємо це локально — тоді ми отримаємо помилку CORS.

Підбиваючи підсумки

У цій статті ми дізналися, як читати файл JSON у JavaScript і можливі помилки, з якими ми можемо зіткнутися під час використання кожного методу.

Найкраще використовувати метод fetch API, коли ви хочете зробити запит HTTP. Наприклад, припустімо, що ми отримуємо дані з фальшивого файлу JSON, який ми зрештою витягнемо з API.

Тим не менш, у ситуації, коли нам не потрібно використовувати запит HTTP, ми можемо використати оператор import. Ми можемо використовувати  import, коли використовуємо такі бібліотеки, як React та Vue, які мають відношення до модулів. Це означає, що нам не потрібно буде додавати тип модуля, а також нам не потрібно буде додавати тип файлу.

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

Але коротка порада, яка відрізняє ці методи, полягає в тому, що Fetch API зчитує файл JSON у JavaScript, надсилаючи запит HTTP, тоді як оператор import не потребує жодного запиту HTTP, а працює як будь-який інший імпорт, який ми виконуємо.

localStorage — це об’єкт вебсховища, який дозволяє сайтам і програмам JavaScript зберігати пари ключ-значення у веббраузері безстроково.

Це означає, що дані зберігаються після оновлення сторінки (sessionStorage) і навіть перезапуску браузера. Це вказує на те, що дані, які зберігаються в браузері, залишаться, навіть якщо вікно браузера закрито.

В загальному, localStorage дозволяє розробникам зберігати дані в браузері та отримувати їх.

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

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

У цій публікації ми розглянемо, як використовувати localStorage з хуками React, щоб легко встановлювати та отримувати елементи.

Що таке хуки React?

Хуки React — це функції JavaScript, які ви можете імпортувати з пакету React, щоб додати можливостей своїм компонентам.

Хуки дозволяють React-розробникам використовувати методи стану та життєвого циклу у функціональних компонентах. Вони також працюють з існуючим кодом, завдяки чому їх легко адаптувати до кодової бази.

Щоб використовувати localStorage з React нам знадобляться два хука:

• useState() — хук стану вашого компоненту, який гарантовано зміниться через деякий час. Хук useState() — це функція, яка приймає один параметр, початковий стан (який може бути значенням змінної, об’єкта або будь-якого іншого типу даних у вашому компоненті), і повертає два значення: поточний стан і функцію, яку можна використовувати для оновлення стану.
  
• useEffect() — хук ефекту, активується за замовчуванням після першого відтворення та кожного разу, коли змінюється стан. Як випливає з назви, він використовується для виконання ефекту кожного разу, коли змінюється стан. Цей хук чудово підходить для налаштування слухачів, отримання даних з API та видалення слухачів перед видаленням компоненту з DOM.

Як реалізувати localStorage у React

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

• setItem(): цей метод використовується для додавання ключа та значення до localStorage;
• getItem(): цей метод використовується для отримання елемента з localStorage за допомогою ключа;
• removeItem(): ця техніка використовується для видалення елемента з localStorage на основі його ключа;
• clear(): ця техніка використовується для видалення всіх елементів з localStorage;
• key(): коли ви вказуєте номер, це допомагає отримати ключ localStorage.

У цій публікації ми розглянемо лише найпопулярніші методи, а саме перші два.

Як використовувати метод setItem()

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

Важливо пам’ятати, що для того, щоб зберігати дані в localStorage, ви повинні спочатку зв’язати їх за допомогою JSON.stringify() функції.

const [items, setItems] = useState([]);

useEffect(() => {
  localStorage.setItem('items', JSON.stringify(items));
}, [items]);

У наведеному вище коді ми спочатку створили стан і призначили йому порожній масив (у вас може бути будь-який інший тип даних). Потім ми використали useEffect(), щоб додавати об’єкти до localStorage кожного разу, коли змінюється значення нашого стану. Ми зробили це, передавши стан як другий аргумент.

По суті, це основний код, який відповідає за додавання пар ключ-значення до localStorage:

localStorage.setItem('items', JSON.stringify(items));

Простіше кажучи, попередній код називає ключ («items»), а потім призначає йому значення, але спочатку ми повинні були переконатися, що дані, які ми додаємо, є рядком JSON.

Ми використовуємо JSON.stringify() для перетворення об’єкта JSON у текст JSON, збережений у рядку, який потім можна передати на вебсервер.

Як використовувати метод  getItem()

Цей метод отримує об’єкти з localStorage. Існують інші методи, щоб досягти цього за допомогою React, але ми будемо використовувати хук useEffect(), тому що він найкращий.

Хук useEffect() допомагає нам отримати всі елементи під час першого рендерингу, тобто коли компонент встановлюється або повторно рендериться, він отримує всі наші дані з localStorage.

Зауважте, що саме тому ми передали порожній другий аргумент.

const [items, setItems] = useState([]);

useEffect(() => {
  const items = JSON.parse(localStorage.getItem('items'));
  if (items) {
   setItems(items);
  }
}, []);

Важливо пам’ятати, що коли ми зберігали дані, ми спочатку перетворили їх на рядок JSON. Це означає, що для того, щоб ми могли використовувати його, нам потрібно перетворити рядок JSON назад на об’єкт JSON. Ми робимо це за допомогою методу JSON.parse().

Висновок

У цій публікації ми дізналися, як використовувати localStorage з хуками React, коли його використовувати та який хук використовувати.

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

Якщо ви спробуєте реалізувати операції CRUD (тобто чотири базові функції: створення, читання, оновлення та видалення) за допомогою кінцевих точок API, то ви можете виявити, що керувати даними в кількох компонентах дещо важко.

Або, можливо, у вас є модальний компонент, але ви хочете запустити його з іншого компоненту.

Розібратися, як впоратися з цими сценаріями, може бути важко.

У цій публікації я покажу, як ви можете це зробити.

Як передати дані між батьківським та дочірнім компонентом

Спершу давайте передамо дані між батьківським і дочірнім компонентами.

Спочатку вам потрібно буде створити два компоненти, один батьківський і один дочірній.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Далі ви імпортуєте дочірній компонент у батьківський і повертаєте його.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Потім ви створюєте функцію та кнопку для запуску цієї функції. Крім того, ви створюєте стан за допомогою хука useState, щоб керувати даними.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Як ви можете бачити тут, ми викликаємо функцію parentToChild після натискання кнопки Click Parent. Коли натиснуто кнопку Click Parent, у змінній data буде збережено «This is data from Parent Component to the Child Component».

Тепер давайте передамо цей стан даних нашим дочірнім компонентам. Ви можете зробити це за допомогою пропсів.

Передайте дані як пропси, коли викликаєте дочірній компонент, таким чином:

<Child parentToChild={data}/>

Тут ми передаємо дані дочірнього компонента як data.

data — це дані, які ми повинні передати, а parentToChild — це назва пропсу.

Далі настав час записати дані в дочірній компонент. А це дуже просто.

Тут може бути два випадки.

Випадок 1: якщо ви використовуєте функціональний компонент, просто перехопіть parentToChild у параметрах.

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

Випадок 2: якщо у вас компонент класу, просто використайте this.props.parentToChild.

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

У будь-якому випадку ви отримаєте однакові результати:

Коли ми натискаємо на кнопку Click Parent, ми побачимо виведені дані на екрані.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Вище ви бачите повний код для Parent Component.

Як передати дані між дочірнім та батьківським компонентом

Це дещо складніше.

Спершу вам потрібно створити функцію в батьківському компоненті під назвою childToParent і порожній стан під назвою data.

const [data, setData] = useState('');

const childToParent = () => {
   
}

Потім передайте функцію childToParent як пропс до дочірнього компонента.

<Child childToParent={childToParent}/>

Тепер у дочірньому компоненті прийміть виклик цієї функції як пропс та призначте його до події onClick.

Крім того, оголосіть стан, який містить деякі дані у вигляді рядка або числа.

Потім передайте дані до функції parentToChild як параметри.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

Далі в батьківському компоненті прийміть ці дані у функції childToParent як параметр та налаштуйте дані за допомогою хука useState.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
      <div>
        <Child/>
      </div>
    </div>
  );
}

export default Parent;

Потім покажіть цю змінну data у функції повернення.

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

Дочірня змінна data перезапише батьківську, коли кнопку Click Child буде натиснуто.

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

Ви також можете передавати такі події, як onClick або OnChange

Просто викличте метод alert у функції childToParent і передайте цю функцію як пропс дочірньому компоненту.

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

А в дочірньому компоненті прийміть функцію childToParent як пропс. Потім призначте його до події onClick у кнопці.

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

Ваша функція в батьківському компоненті буде викликана, коли ви натиснете кнопку в дочірньому компоненті, і ви побачите таке сповіщення:

Це все!

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

Ну ось і все, народе. Щасливого навчання.

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

Ajax

Ajax — це традиційний спосіб створення асинхронного запиту HTTP. Дані можна надсилати за допомогою методу HTTP POST і отримувати за допомогою методу HTTP GET. Давайте подивимось, як зробити запит GET. Я буду використовувати сайт JSONPlaceholder — безкоштовний онлайн API REST для розробників, який повертає випадкові дані у форматі JSON.

Щоб зробити виклик HTTP в Ajax, потрібно ініціалізувати новий метод XMLHttpRequest() та вказати кінцеву точку URL-адреси і метод HTTP (у цьому випадку GET). Далі ми використовуємо метод open() для зв’язування методу HTTP та кінцевої точки URL-адреси і викликаємо метод send() для ініціалізації запиту.

Ми реєструємо відповідь HTTP в консолі за допомогою властивості XMLHTTPRequest.onreadystatechange, яка містить обробник подій, що викликається, коли подія readystatechanged запускається.

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Якщо ви переглянете консоль браузера, то побачите, що вона поверне масив даних у форматі JSON. Але як ми можемо знати, чи запит виконано? Іншими словами, як ми можемо обробляти відповіді за допомогою Ajax?

Властивість onreadystatechange має два методи: readyState та status, які дозволяють перевірити стан нашого запиту.

Якщо readyState дорівнює 4, то це свідчить про те, що запит виконано. Властивість readyState має 5 відповідей. Дізнайтесь про них більше за цим посиланням.

Окрім прямого виклику Ajax за допомогою JavaScript існують й інші, більш потужні методи здійснення виклику HTTP (наприклад, $.Ajax, який є методом jQuery) і тому я зупинюсь на них більш детально.

Методи jQuery

jQuery має багато методів для легкої обробки запитів HTTP. Щоб використати ці методи, вам потрібно включити бібліотеку jQuery до свого проєкту.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax

jQuery Ajax є одним із найпростіших методів здійснення виклику HTTP.

Метод $.ajax приймає багато параметрів, деякі з яких є обов’язковими, а інші необов’язковими. Він містить два варіанти функції зворотного виклику: success та error, щоб обробити отриману відповідь.

Метод $.get

Метод $.get використовується для виконання запитів GET. Він приймає два параметри: кінцеву точку та функцію зворотного виклику.

Метод $.post

Метод $.post — це інший спосіб надсилання даних на сервер. Він приймає три параметри: url, дані, які ви хочете надіслати, і функцію зворотного виклику.

$.getJSON

Метод $.getJSON отримує дані лише у форматі JSON. Він приймає два параметри: url та функцію зворотного виклику.

jQuery має ці методи для запиту або надсилання даних на віддалений сервер. Але насправді їх можна поєднати в один метод $.ajax, як показано у прикладі нижче:

Функція fetch

Функція fetch — це новий потужний web API, який дозволяє робити асинхронні запити. Насправді, fetch є одним із найкращих і моїх улюблених способів зробити запит HTTP. Він повертає проміс, що є однією з чудових функцій ES6. Якщо ви не знайомі з ES6, ви можете прочитати про нього в цій публікації. Проміси дозволяють нам розумніше обробляти асинхронний запит. Давайте подивимося, як працює fetch.

Функція fetch приймає один обов’язковий параметр: URL endpoint. Також вона може мати інші додаткові параметри, як у прикладі нижче:

Як ви можете бачити, fetch має багато переваг для виконання запитів HTTP. Ви можете дізнатися більше про них тут. Крім того, у fetch є інші модулі та плагіни, які дозволяють надсилати запити на сервер та отримувати їх зі сторони сервера (наприклад, axios).

Axios

Axios — це бібліотека з відкритим вихідним кодом для створення запитів HTTP, яка надає багато чудових функцій. Давайте подивимося, як вона працює.

Використання:

По-перше, вам потрібно включити Axios. Існує два способи включити Axios до проєкту.

Перший: ви можете використати npm:

npm install axios --save

І потім вам потрібно імпортувати його:

import axios from 'axios'

Другий: ви можете включити axios за допомогою CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Створення запиту з axios:

З Axios ви можете використати GET та POST для отримання та надсилання даних із сервера.

GET:

axios приймає один обов’язковий параметр і може приймати другий необов’язковий параметр. Деякі дані сприймаються як простий запит.

POST:

Axios повертає проміс. Якщо ви знайомі з промісами, ви, мабуть, знаєте, що проміси можуть виконувати кілька запитів. Ви можете робити те саме з axios і виконувати кілька запитів одночасно.

Axios підтримує багато інших методів і опцій. Ви можете дослідити їх тут.

Angular HttpClient

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

Здійснення запиту на сервер за допомогою Angular HttpClient

Щоб зробити запит за допомогою Angular HttpClient, потрібно запустити наш код у додатку Angular. Тому я створив його. Якщо ви не знайомі з Angular, перегляньте мою публікацію, щоб дізнатися, як створити свій перший додаток Angular за 20 хвилин.

Перше, що нам потрібно зробити — імпортувати HttpClientModule до app.module.ts

Потім ми повинні створити сервіс для обробки запитів. Ви можете легко створити сервіс за допомогою Angular CLI:

ng g service  FetchdataService

Далі нам потрібно імпортувати HttpClient до сервісу fetchdataService.ts і вставити його всередині конструктора:

А в app.component.ts імпортувати fetchdataService :

//import
import { FetchdataService } from './fetchdata.service';

Зрештою, потрібно викликати сервіс і запустити його.

app.component.ts:

Ви можете переглянути приклад на Stackblitz.

Підсумки

Ми щойно розглянули найпопулярніші способи зробити запити HTTP у JavaScript.

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

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

У цьому посібнику ми дізнаємося, як створити функцію debounce в JavaScript.

Що таке debounce?

Термін debounce походить від електроніки. Коли ви натискаєте кнопку, скажімо, на пульті дистанційного керування телевізором, то сигнал надходить до мікрочіпа пульта настільки швидко, що перш ніж ви встигнете відпустити кнопку, він неодноразово повторюється і мікрочіп реєструє ваше «клацання» декілька разів.

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

Debounce у JavaScript

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

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

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

І мій улюблений приклад: деякі люди так звикли до Windows 95, що й досі двічі клацають усе 😁.

Це проста реалізація функції debounce:

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

Її можна використовувати для введення:

<input type="text" onkeyup="processChange()" />

Або для кнопки:

<button onclick="processChange()">Click me</button>

Або для події у вікні:

window.addEventListener("scroll", processChange);

І для інших елементів (наприклад, простих функцій JS).

Отже, що тут відбувається? debounce — це спеціальна функція, яка виконує два завдання:

• виділення області для змінної timer
• планування запуску функції в певний час

Давайте пояснимо, як це працює в першому випадку використання з введенням тексту.

Коли відвідувач пише першу літеру та відпускає кнопку, то debounce спочатку скидає таймер за допомогою clearTimeout(timer). На даний момент крок непотрібний, оскільки ще нічого не заплановано. Потім вона планує виклик наданої функції saveInput(), яка буде викликана через 300 мс.

Але, припустімо, що відвідувач продовжує писати, тому кожне відпускання кнопки знову викликає функцію debounce. Кожен виклик потребує скидання таймера, або, іншими словами, скасування попередніх планів saveInput(), і перепланування на новий час — 300 мс у майбутньому. Це триває до тих пір, поки відвідувач продовжує натискати кнопки.

Останнє планування виклику наданої функції saveInput() не буде очищено, і тому її зрештою буде викликано.

І навпаки: як ігнорувати подальші виклики

Це все добре для запуску автозбереження або відображення пропозицій. Але як щодо випадку використання з кількома натисканнями однієї кнопки? Ми не хочемо чекати останнього натиску, а краще зареєструвати перший і ігнорувати решту:

function debounce_leading(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

Тут ми запускаємо функцію saveInput() під час першого виклику функції debounce_leading, яка у свою чергу ініціалізується першим натисканням кнопки. Плануємо знищення таймера на 300 мс. Кожне наступне натискання кнопки протягом цього періоду часу вже матиме визначений таймер і зсуватиме деструкцію лише на 300 мс у майбутнє.

Реалізації debounce в бібліотеках

У цій статті я показав вам, як реалізувати функцію debounce у JavaScript і використовувати її для, ну, debounce подій, викликаних елементами вебсайту.

Однак вам не потрібно використовувати власну реалізацію debounce у своїх проєктах, якщо ви цього не хочете. Широко використовувані бібліотеки JS вже містять її реалізацію:

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

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

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

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

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

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

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

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

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

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

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

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

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

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

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

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

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

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

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

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

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

Array.splice(
  {index where to start},
  {how many items to remove},
  {items to add}
);

Отже, якщо ми хочемо додати червоний 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");

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

console.log(car);
// output:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

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

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 <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  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 <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 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 <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

Сортування масиву за властивістю — 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.

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