9. Масиви
Змінні, про які ми говорили раніше, містили лише один елемент — рядок, число або логічне значення. Однак іноді нам потрібно використовувати цілий список даних. Для їх зберігання ми використовуємо масиви.
let array = ["апельсин", 34, true, "мандоліна", 45 [67, 56, "червоний"]];
Ми створюємо масив, записуючи дані між квадратними дужками та розділяючи ці елементи комами. У масиві можна зберігати різні типи даних: рядки, числа, змінні логічного типу і навіть інші списки.
Створимо, наприклад, перелік знайомих:
let friends = ["Michał", "Marta", "Mykolaj", "John", "Natalia", "Ania"];
Щоб відобразити елемент списку, ми посилаємося на список і на позицію елемента.
ЗВЕРНІТЬ УВАГУ!
Порядок елементів ми відраховуємо від 0. Таким чином:
console.log(friends[0]);
>>> Michał
console.log(friends[3]);
>>> John
Тепер створи у своєму JS-файлі масив з назвою “group”, який містить імена всіх людей з групи, з якою ти працюєш на воркшопі. Потім випиши ім’я першої людини, що зберігається в консолі.
Як і для рядків, ми можемо встановити довжину масиву завдяки властивості length
console.log(friends.length);
>>> 6
Тепер виведіть у консоль довжину масиву з іменами людей у вашій групі, а потім виведіть ім’я людини, яке збережене останнім.
Для додавання нового елемента використовуй метод push:
friends.push('Kasia');
console.log(friends);
>>> ["Michał", "Marta", "Mikolaj", "John", "Natalia", "Ania","Kasia"]
Він використовується для додавання нового елемента в кінець масиву.
Додайте ще одне довільне ім’я до вашого “групового” масиву за допомогою методу push і виведіть його у консоль.
Ми також можемо перезаписати існуючий елемент масиву з певною позицією:
friends[2] = "Tomek";
console.log(friends);
>>> ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"]
Заміни ім’я, яке додали в масив останнім, іншим іменем. Знову виведи імена в консолі.
Ми можемо додавати різні дошки одна до одної. Створи масив з іменами друзів з роботи і масив з іменами друзів з вечірок.
Для створення масиву з іменами всіх ваших друзів ми скористаємося методом concat.
let work_friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
let party_friends = ["Asia", "Kamil", "Bartek", "Ola", "Weronika", "Czarek"];
let all_friends = work_friends.concat(party_friends);
console.log(all_friends);
>>> ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia", "Asia", "Kamil", "Bartek", "Ola", "Weronika", "Czarek"]
Перевірте в консолі, як виглядає новий масив, створений за допомогою concat.
Для того щоб “отримати” частину масиву, ми використовуємо метод slice. Він вимагає вказати, з якого елемента потрібно вирізати і на якому елементі потрібно зупинитися.
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
let part = friends.slice(1, 4);
console.log(part);
>>> Marta, Tomek, John
Тепер створимо ще один масив, елементами якого будуть перше і друге ім’я з масиву group. Для цього скористайся методом slice.
Використовуй метод splice для видалення або заміни частини масиву.
array.splice(з якого елемента, скільки елементів видалити, що туди додати на заміну)
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
friends.splice(2,1);
console.log(friends);
>>> Michał, Marta, John, Natalia, Ania, Kasia,
Починаємо з позиції 2, видаляємо один елемент, не додаємо жодного.
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
friends.splice(2, 0, "Patrycja");
console.log(friends);
>>> Michał, Marta, Patrycja, John, Natalia, Ania, Kasia,
Я починаю з елемента на 2-й позиції, видаляю один елемент, додаю елемент “Patricia”.
Тепер видаліть за допомогою splice перше ім’я з масиву group і вставте на його місце будь-яке інше ім’я.
Зверни увагу: friends.slice не змінює масив friends, він лише повертає його вказані елементи. friends.splice модифікує масив friends. Це важлива відмінність.
Пошук елементу
Метод indexOf використовується для пошуку позиції елемента. Він повертає індекс заданого елементу або -1, якщо його не знайдено.
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
if (friends.indexOf('Marta') !== -1) {
console.log('Marta znajduje się w tej tablicy!');
} else {
console.log('Marty nie ma w tej tablicy');
}
За допомогою indexOf() перевір, яку позицію займає твоє ім’я у масиві “group”.
Циклічний обхід масиву
Цикл — це чудовий спосіб обходу (ітерації) елементів масиву. Використаймо його для виписування наших друзів. Щоб виписати елемент масиву, ми вказуємо його індекс:
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
console.log(friends[0]);
console.log(friends[1]);
console.log(friends[2]);
console.log(friends[3]);
....
Але виникають дві проблеми. По-перше, це буде неоптимально. По-друге, що робити, якщо я не знаю, скільки елементів у списку і як довго повторювати один і той же код?
Тому спробуймо цикл for:
створюємо лічильник — перший елемент списку має індекс 0, тому починаємо відлік з 0, let i = 0;.
завершення циклу — повторюємо цикл до тих пір, поки не пройдемо всі елементи списку. Кількість елементів задаємо з допомогою властивості length. Тобто, поки лічильник не стане меншим за кількість друзів: i < friends.length.
збільшуємо/зменшуємо лічильник — після кожного циклу переходимо до наступної людини, тобто збільшуємо лічильник на 1, i += 1;.
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
for (let i = 0; i < friends.length; i += 1) {
console.log(friends[i]);
}
Потренуймось далі, повернувшись до нашого повідомлення. Припустимо, ми хочемо його персоналізувати та відобразити, наприклад.
“Привіт, Міхале! Ми раді вітати тебе на girls.js!”
Або польською: “Cześć Michał! Miło nam Cię powitać na girls.js!”
Все, що нам потрібно зробити, це додати відсутній текст привітання до нашого попереднього циклу:
let friends = ["Michał", "Marta", "Tomek", "John", "Natalia", "Ania","Kasia"];
for(let i = 0; i < friends.length; i+=1) {
console.log("Cześć " + friends[i] +"! Miło nam Cię powitać na girls.js!");
}
Завдання 1
Використовуючи цикл for, зробіть так, щоб у консолі з’явився текст привітання girls.js усім людям, які зберігаються у вашому масиві “group”. Текст повинен бути наступним: “Cześć [ім’я людини]! Miło nam Cię powitać na girls.js!”.
Завдання 2
Використовуючи цикл, виведи усі голосні літери з речення:
“Nad rzeczką opodal krzaczka, mieszkała kaczka-dziwaczka, lecz zamiast trzymać się rzeczki, robiła piesze wycieczki.” (“Біля річки під кущем жила качка, що крякала, але замість того, щоб плавати річкою вона здійснювала піші прогулянки”)
Підказка: рядок можна розглядати як масив символів ;)