Двовимірні масиви - основи 2/2

Метод splice() дозволяє не тільки видаляти елементи з масиву, але й додавати нові елементи в будь-яке місце масиву. Наприклад, якщо ви хочете видалити елемент за певним індексом, можна використати splice().

1. Видаляємо елементи

let mathematics = [
    ["Данило", 10],
    ["Анна", 8],
    ["Іван", 9],
    ["Олена", 11]
];
mathematics.splice(1, 2); // Видаляємо двох учнів з індекса 1
console.log(mathematics);
// ["Данило", 10]
// ["Олена", 11]

2. Вставляємо елементи

let mathematics = [
    ["Данило", 10],
    ["Анна", 8],
    ["Іван", 9]
];
mathematics.splice(1, 0, ["Олена", 11]); // Вставляємо нового учня на індекс 1, решта учнів зсувається вниз
console.log(mathematics);
// ["Данило", 10]
// ["Олена", 11]
// ["Анна", 8]
// ["Іван", 9]

3. Видаляємо та вставляємо

let mathematics = [
    ["Данило", 10],
    ["Анна", 8],
    ["Іван", 9],
    ["Олена", 11]
];
mathematics.splice(1, 2, ["Марія", 12]); // Видаляємо двох учнів з індексу 1 і вставляємо нового замість них
console.log(mathematics);
// ["Данило", 10]
// ["Марія", 12]
// ["Олена", 11]

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

let mathematics = [
    ["Данило", 10, "Математика"],
    ["Анна", 8, "Математика"],
    ["Іван", 9, "Математика"],
    ["Олена", 11, "Математика"]
];
mathematics.forEach(function (student) {
    student.forEach(function (info) {
        console.log(info); // Виводимо кожен елемент підмасиву окремо
    });
});

Пояснення:
У масиві mathematics є чотири рядки по два елементи.
Метод forEach() проходить по кожному елементу і виконує функцію, що виводить кожен елемент на екран.

Ми можемо відображати масиви на веб-сторінці, використовуючи DOM (Document Object Model). DOM дозволяє маніпулювати HTML елементами сторінки. У цьому прикладі ми будемо виводити дані з масиву (список продуктів) на веб-сторінку у вигляді списку <ul>.

<body>
  <h2>Список продуктів:</h2>
  <ul id="products-list"></ul> <!-- Тут ми будемо виводити наш список продуктів -->
  <script>
    let products = [  ["Яблуко", 30], ["Хліб", 20], ["Молоко", 25],  ["Масло", 50] ];
    // Знаходимо контейнер для списку на сторінці
    let ul = document.getElementById("products-list");
    // Ітерація по масиву продуктів
    products.forEach(product => {
      // Створюємо новий елемент списку <li> для кожного продукту
      let li = document.createElement("li");
      // Присвоюємо текст для елемента списку (назва продукту та ціна)
      li.textContent = `${product[0]}: ${product[1]} грн`;
      // Додаємо елемент списку в <ul>
      ul.appendChild(li);
    });
  </script>
</body>

Ми створюємо список продуктів у вигляді HTML-елементів <li>, використовуючи масив products.
Кожен елемент масиву містить пару: назву продукту і його ціну.
Для кожного продукту буде створено окремий елемент списку <li>, який додається в контейнер <ul> на сторінці.

На сторінці буде виглядати ось так:
Яблуко: 30 грн
Хліб: 20 грн
Молоко: 25 грн
Масло: 50 грн

Цей метод створює новий HTML-елемент, зокрема елемент списку <li>. li — це тег для елементів списку (list item), який використовується всередині тегів <ul> (несортуваний список) або <ol> (відсортований список). Коли ми викликаємо document.createElement("li"), ми створюємо новий елемент типу <li>, але він ще не з'явився на веб-сторінці.
Як це працює:
document — це об'єкт, який представляє весь документ HTML на веб-сторінці.
createElement() — це метод, який створює новий HTML-елемент з вказаним тегом (в даному випадку li).
"li" — це назва елемента, який ми хочемо створити. У даному випадку ми створюємо елемент списку <li>.
Приклад:

let li = document.createElement("li"); // Створюємо новий елемент <li>

Тепер у змінній li є новий, але ще не доданий на сторінку елемент <li>.

Це властивість дозволяє змінювати або отримувати текст, який знаходиться всередині HTML-елемента. Коли ми використовуємо li.textContent, ми говоримо браузеру, що ми хочемо встановити текст для цього елемента.
Як це працює:
Ми використовуємо textContent, щоб задати текстовий вміст елемента. У нашому випадку, цей текст буде відображатися в списку.
Ми можемо присвоїти будь-який текст, який ми хочемо відобразити всередині елемента <li>.
Приклад:

li.textContent = "Яблуко: 30 грн"; // Встановлюємо текст для елемента <li> 

Тепер елемент <li> містить текст "Яблуко: 30 грн".

Метод appendChild() додає створений елемент (в нашому випадку, елемент списку <li>) до іншого елемента (в нашому випадку, до списку <ul>). Це означає, що ми фактично додаємо новий елемент на веб-сторінку, так що він стає частиною структури HTML на сторінці.
Як це працює:
ul — це змінна, яка містить посилання на HTML-елемент <ul>, в якому ми хочемо додати новий елемент.
appendChild(li) — це метод, який додає елемент li (створений раніше) як останній елемент в контейнер <ul>.
Приклад:

ul.appendChild(li); // Додаємо елемент <li> в <ul>

Після цього елемент <li> з текстом "Яблуко: 30 грн" з'явиться на веб-сторінці в списку <ul>. Якщо на сторінці є кілька елементів списку, цей новий елемент буде доданий в кінець списку.

Метод includes() дозволяє перевірити, чи є певний елемент у масиві. Якщо елемент є, він повертає true, якщо немає — false.

let fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits.includes("банан")); // true
console.log(fruits.includes("груша")); // false 

Пояснення:
Метод includes() перевіряє, чи містить масив певний елемент.
У першому випадку масив містить "банан", тому результат буде true.
У другому випадку масив не містить "грушу", тому результат буде false.