Одним з найпростіших способів вивести масив на сторінку є використання циклу for або forEach у JavaScript для ітерації елементів масиву та створення HTML - елементів для кожного елемента. Наприклад, ми можемо створити елемент ul і додати li для кожного елемента в масиві:
Існує кілька способів вивести масив на сторінку за допомогою вбудованих методів JavaScript. Розглянемо деякі з них:
1. Використання методу join () :
var array = [1, 2, 3, 4, 5];var output = array.join(', ');document.write(output);2. Використання методу forEach() :
var array = [1, 2, 3, 4, 5];array.forEach(function(element) ); 3. Використання методу map() :
var array = [1, 2, 3, 4, 5];var output = array.map(function(element) );document.write(output);Це лише деякі із способів вивести масив на сторінку за допомогою вбудованих методів JavaScript. Залежно від ваших потреб і завдання, ви можете вибрати найбільш підходящий варіант. Удачі вам в роботі з масивами!
Метод join ()
Метод join() JavaScript використовується для об'єднання всіх елементів масиву в один рядок. Він приймає один необов'язковий параметр, який визначає роздільник між елементами масиву. Якщо параметр не вказано, то в якості роздільника використовується кома.
Наприклад, якщо у нас є масив ["яблуко", "банан","груша"], то при використанні методу join() без параметра отримаємо рядок "яблуко, банан, груша". Якщо ж ми передамо параметр " - ", то отримаємо рядок "яблуко-банан-груша".
Метод join() зручний, коли необхідно вивести вміст масиву на сторінку. Наприклад:
let fruits = ["яблоко", "банан", "груша"];let output = fruits.join(", ");document.getElementById("output").innerHTML = output;В результаті виконання даного коду, в елемент з ідентифікатором output буде виведена рядок "яблуко, банан, груша".
Метод forEach()
Метод forEach () надає простий спосіб виконати операцію для кожного елемента масиву. Він приймає як аргумент функцію зворотного виклику, яка буде виконуватися для кожного елемента масиву.
Синтаксис методу forEach() виглядає наступним чином:
array.forEach(function(currentValue, index, array) < // выполняемые действия >);
Функція зворотного виклику приймає три аргументи:
- currentValue: значення поточного елемента масиву.
- index: індекс поточного елемента масиву.
- array: сам масив, для якого викликається метод forEach().
В результаті виконання коду на сторінці будуть виведені наступні рядки:
Метод forEach () є зручним інструментом для роботи з масивами і дозволяє виконувати різні операції з кожним елементом масиву без необхідності використання циклів.
Метод map()
Синтаксис методу map() виглядає наступним чином:
arr.map(callback(element[, index[, array]])
Для використання методу map() ми передаємо йому функцію зворотного виклику (callback), яка буде виконуватися для кожного елемента масиву. Функція приймає наступні аргументи:
- element - поточний оброблюваний елемент масиву
- index (необов'язковий) - індекс поточного оброблюваного елемента
- array (необов'язковий ) - сам масив, по якому проходиться метод
Для цього можна використовувати, наприклад, цикл for. Ось приклад коду:
let fruits = ["яблуко", "банан","апельсин"];
У цьому прикладі ми оголошуємо масив fruits і ініціалізуємо його трьома елементами. Потім ми використовуємо цикл for для перебору елементів масиву.
яблокобананапельсин
Таким чином, використовуючи цикли в JavaScript, можна легко вивести вміст масиву на сторінку.
Цикл for
Приклад використання циклу for:
Цикл while
Цикл while у мові програмування JavaScript використовується для повторення виконання певного блоку коду, поки задана умова залишається істинним. Синтаксис циклу while виглядає наступним чином:
Перед початком виконання кожної ітерації циклу while, вираз умови перевіряється. Якщо умова виконується, то блок коду всередині циклу виконується. Після закінчення виконання блоку коду, виконання циклу знову повертається до перевірки умови, і якщо воно залишається істинним, цикл триває. І так до тих пір, поки умова циклу не стане помилковим.
let numbers = [1, 2, 3, 4, 5];let i = 0;while (i
Закінчення виконання циклу while відбувається, коли значення змінної i стає рівним довжині масиву (в даному випадку 5), тобто коли всі елементи масиву будуть виведені на сторінку.
Цикл do-while
Цикл do-while являє собою цикл з постумовами. Він виконує певний блок коду до тих пір, поки зазначена умова істинно. На відміну від циклу while , в циклі do-while блок коду виконується завжди хоча б один раз, навіть якщо умова спочатку хибна.
Синтаксис циклу do-while виглядає наступним чином:
| Синтаксис | Опис |
|---|---|
| do / / блок коду > while (умова); | Виконує блок коду, поки зазначена умова істинно. |
Приклад використання циклу do-while :
var i = 0;do while (i < 5);