17.07.2026

Код ниже положит каждый фрукт в каждый div.

const store = ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'] document.querySelectorAll('.fruit').forEach((n, i) => n.textContent = store[i]) 

Пример №2 — Мы сами создаем структуру на странице в момент обхода массив элементов.

const fruitsAndVegetables = [ ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'], ['Beets', 'Peas', 'Carrots'] ] const fruitsToTable = (array) =>  const table = document.createElement('table'); // Добавим видимые границы у таблицы table.setAttribute('border', '1'); for (const row of array)  const tr = table.insertRow(); for (const item of row)  const td = tr.insertCell(); td.textContent = item > > return table; > document.body.append(fruitsToTable(fruitsAndVegetables)); 

Вывести массив на HTML страницу

Вывести массив html кода на страницу
Здравствуйте в js переменную через php вывожу массив html кода, массив большой несколько страниц.

Не получается вывести элемент на html страницу
Как вывести элемент div1, во время изменения размера экрана? $(window).on(‘load.

Вывести текст из Doc на страницу HTML
Объясню суть: есть резюме некоего человека. Он может его загрузить на сервер при регистрации, в.

Как вывести данные из БД django на HTML страницу?
Нужно из БД django вытащить данные в виде таблицы. Способ нашёл только 1, но он не работает. На.

1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550

1 2 3 4 5
const array = [2,4,5,1,11,4,1]; document.body.insertAdjacentHTML('beforeend', '
массив
'
) array.forEach((item, idx) => document.body.insertAdjacentHTML('beforeend', `div>${idx}: ${item}div>`)) document.body.insertAdjacentHTML('beforeend', '
больше 5
'
) array.filter(item=>item>5).forEach(item => document.body.insertAdjacentHTML('beforeend', `div>${item}div>`))

Регистрация: 16.10.2018
Сообщений: 59

Можно немного попроще?

Добавлено через 9 минут
Очень срочно

1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550

Сообщение от Matr1 Посмотреть сообщение

Можно немного попроще?
Куда уж проще

1 2 3 4 5 6 7 8 9 10 11
var array = [2,4,5,1,11,4,1]; var arrayHtml = '
массив:
'
; var selectionHtml = '
больше 5
'
; for (var i=0; iarray.length; i++) { var element = array[i]; arrayHtml += '
' + i + ':' + element + '
'
; if (element > 5) { selectionHtml += '
' + i + ':' + element + '
'
; } } document.body.innerHTML = arrayHtml + selectionHtml;

Регистрация: 19.05.2019
Сообщений: 1

1 2 3 4 5 6
const array = [8,4,5,1,11,7,1,9,13]; for(var i in arr){ //перебирает все элементы массива if(arr[i] > 5){ //проверят число больше пяти console.log(i + ": " + arr[i]); //выводит в консоль в формате 1: 6 } }

Эксперт JS

6485 / 3896 / 2005
Регистрация: 14.06.2018
Сообщений: 6,781
Зуенко Михаил, привет.

1 2 3 4 5 6
let array = [8,4,5,1,11,7,1,9,13]; for(let i of arr){ // перебирает все элементы массива if(arr[i] > 5){ // проверять число больше пяти document.write(`${i}-${arr[i]}br />`); // просили вывести на страницу в формате 1-6 } }

Одна ошибка и одно моё пожелание.

— foreach в JavaScript пишется так: for(let item of array)
for in сейчас надо использовать только для перебора свойств в НЕмассиве (например, в Object)

— старайтесь не злоупотреблять const. Это ключевое слово не настолько крутое, как иногда кажется.
Обычно let хватает.
А function почти всегда выглядит более читаемым, чем «именованная» лямбда-функция.

Массивы

В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймём, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.

Необходимые навыки: Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.
Цель: Понять, что такое массивы и как использовать их в JavaScript.

Что такое массив?

Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причём разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счёте-фактуре, общая сумма всех цен и распечатка общей цены внизу.

Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займёт намного больше времени, сам код будет менее эффективным и подверженным ошибкам. Если бы у нас было 10 элементов для добавления в счёт-фактуру, это ещё куда ни шло, но как насчёт 100 предметов? Или 1000? Мы вернёмся к этому примеру позже в статье.

Как и в предыдущих статьях, давайте узнаем о реальных основах работы с массивами, введя некоторые примеры в консоль разработчика.

Создание массива

Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.

    Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль:

var shopping = ["bread", "milk", "cheese", "hummus", "noodles"]; shopping; 
var sequence = [1, 1, 2, 3, 5, 8, 13]; var random = ["tree", 795, [0, 1, 2]]; 

Получение и изменение элементов массива

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

    Введите следующее в вашу консоль:

[0]; // возвращает "bread" 
[0] = "tahini"; shopping; // shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ] 

Примечание: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!

Нахождение длины массива

Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство length . Попробуйте следующее:

.length; // должно возвратить 7 

Это свойство имеет и другие применения, но чаще всего используется, чтобы сказать, что цикл продолжается, пока он не зациклится на всех элементах массива. Так, например:

var sequence = [1, 1, 2, 3, 5, 8, 13]; for (var i = 0; i  sequence.length; i++)  console.log(sequence[i]); > 

В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:

  1. Начать цикл с номера позиции 0 в массиве.
  2. Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
  3. Для каждого элемента вернуть его значение в консоли браузера с помощью console.log() .

Некоторые полезные методы массивов

В этом разделе мы рассмотрим некоторые полезные методы, связанные с массивом, которые позволяют нам разбивать строки на элементы массива и наоборот, а также добавлять новые элементы в массивы.

Преобразование между строками и массивами

Часто у вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод split () . В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.

Примечание: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.

  1. Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли:
var myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"; 
var myArray = myData.split(","); myArray; 
.length; myArray[0]; // первый элемент в массиве myArray[1]; // второй элемент в массиве myArray[myArray.length - 1]; // последний элемент в массиве 
var myNewString = myArray.join(","); myNewString; 
var dogNames = ["Rocket", "Flash", "Bella", "Slugger"]; dogNames.toString(); //Rocket,Flash,Bella,Slugger 

Добавление и удаление элементов массива

Мы ещё не рассмотрели добавление и удаление элементов массива — давайте посмотрим на это сейчас. Мы будем использовать массив myArray , с которым мы столкнулись в предыдущем разделе. Если вы ещё не прошли этот раздел, сначала создайте массив в консоли:

var myArray = [ "Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle", ]; 

Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать push() и pop() соответственно.

    Давайте сначала используем метод push() — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это:

.push("Cardiff"); myArray; myArray.push("Bradford", "Brighton"); myArray; 
var newLength = myArray.push("Bristol"); myArray; newLength; 
var removedItem = myArray.pop(); myArray; removedItem; 

unshift() и shift() работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.

    Сначала, попробуем метод unshift() :

.unshift("Edinburgh"); myArray; 
var removedItem = myArray.shift(); myArray; removedItem; 

Практика: Печать продуктов!

Вернёмся к описанному выше примеру — распечатываем названия продуктов и цен на счёт-фактуру, затем суммируем цены и печатаем их внизу. В приведённом ниже редактируемом примере есть комментарии, содержащие числа — каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:

  1. Ниже комментария // number 1 имеется ряд строк, каждая из которых содержит название продукта и цену, разделённые двоеточием. Нужно превратить их в массив и сохранить его под названием products .
  2. На строке с комментарием // number 2 начинается цикл for. В строке цикла имеется i
  3. Под комментарием // number 3 мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива ( name:price ) на два отдельных элемента: один содержит только имя, а другой — содержащее только цену. Если не знаете, как это сделать, ещё раз просмотрите статью Полезные строковые методы, а лучше, посмотрите раздел Преобразование между строками и массивами этой статьи.
  4. В рамках приведённой выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьёй строки в JavaScript.
  5. В верхней части кода есть переменная с именем total , которая содержит значение 0 . Внутри цикла (под комментарием // number 4 ) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счёт-фактуре. Для этого вам может понадобится оператор присваивания.
  6. Под комментарием // number 5 нужно изменить строку так, чтобы переменная itemText была равна «current item name — $current item price», например «Shoes — $23.99» для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счёте-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.
h2>Live outputh2> div class="output" style="min-height: 150px;"> ul>ul> p>p> div> h2>Editable codeh2> p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). p> textarea id="code" class="playable-code" style="height: 410px;width: 95%"> var list = document.querySelector('.output ul'); var totalBox = document.querySelector('.output p'); var total = 0; list.innerHTML = ''; totalBox.textContent = ''; // number 1 'Underpants:6.99' 'Socks:5.99' 'T-shirt:14.99' 'Trousers:31.99' 'Shoes:23.99'; for (var i = 0; i totalBox.textContent = 'Total: $' + total.toFixed(2); textarea> div class="playable-buttons"> input id="reset" type="button" value="Reset" /> input id="solution" type="button" value="Show solution" /> div> 
var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  eval(textarea.value); > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Show solution")  textarea.value = solutionEntry; solution.value = "Hide solution"; > else  textarea.value = userEntry; solution.value = "Show solution"; > updateCode(); >); var jsSolution = "var list = document.querySelector('.output ul');\nvar totalBox = document.querySelector('.output p');\nvar total = 0;\nlist.innerHTML = '';\ntotalBox.textContent = '';\n\nvar products = ['Underpants:6.99',\n 'Socks:5.99',\n 'T-shirt:14.99',\n 'Trousers:31.99',\n 'Shoes:23.99'];\n\nfor(var i = 0; i < products.length; i++) \n\ntotalBox.textContent = 'Total: $' + total.toFixed(2);"; var solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 
html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background-color: #f5f9fa; > 

Практика: Топ 5 поисковых запросов

Хорошим тоном, является использование методов массива, таких как push () и pop () — это когда вы ведёте запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.

В этом примере мы собираемся показать гораздо более простое использование — ниже мы даём вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.

Примечание: В реальном приложении для поиска вы, вероятно, сможете щёлкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.

Чтобы завершить приложение, вам необходимо:

  1. Добавьте строку под комментарием // number 1 , которая добавляет текущее значение, введённое в ввод поиска, к началу массива. Его можно получить с помощью searchInput.value .
  2. Добавьте строку под комментарием // number 2 , которая удаляет значение, находящееся в конце массива.
h2>Live outputh2> div class="output" style="min-height: 150px;"> input type="text" />button>Searchbutton> ul>ul> div> h2>Editable codeh2> p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). p> textarea id="code" class="playable-code" style="height: 370px; width: 95%"> var list = document.querySelector('.output ul'); var searchInput = document.querySelector('.output input'); var searchBtn = document.querySelector('.output button'); list.innerHTML = ''; var myHistory = []; searchBtn.onclick = function() < // we will only allow a term to be entered if the search input isn't empty if (searchInput.value !== '') < // number 1 // empty the list so that we don't display duplicate entries // the display is regenerated every time a search term is entered. list.innerHTML = ''; // loop through the array, and display all the search terms in the list for (var i = 0; i < myHistory.length; i++) < itemText = myHistory[i]; var listItem = document.createElement('li'); listItem.textContent = itemText; list.appendChild(listItem); >// If the array length is 5 or more, remove the oldest search term if (myHistory.length >= 5) < // number 2 >// empty the search input and focus it, ready for the next term to be entered searchInput.value = ''; searchInput.focus(); > > textarea> div class="playable-buttons"> input id="reset" type="button" value="Reset" /> input id="solution" type="button" value="Show solution" /> div> 
html  font-family: sans-serif; > h2  font-size: 16px; > .a11y-label  margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body  margin: 10px; background: #f5f9fa; > 
var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var code = textarea.value; var userEntry = textarea.value; function updateCode()  eval(textarea.value); > reset.addEventListener("click", function ()  textarea.value = code; userEntry = textarea.value; solutionEntry = jsSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", function ()  if (solution.value === "Show solution")  textarea.value = solutionEntry; solution.value = "Hide solution"; > else  textarea.value = userEntry; solution.value = "Show solution"; > updateCode(); >); var jsSolution = "var list = document.querySelector('.output ul');\nvar searchInput = document.querySelector('.output input');\nvar searchBtn = document.querySelector('.output button');\n\nlist.innerHTML = '';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() \n\n if(myHistory.length >= 5) \n\n searchInput.value = '';\n searchInput.focus();\n >\n>"; var solutionEntry = jsSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e)  if (e.keyCode === 9)  e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27)  textarea.blur(); > >; function insertAtCaret(text)  var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function ()  // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution")  userEntry = textarea.value; > else  solutionEntry = textarea.value; > updateCode(); >; 

Заключение

Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!

Осталось только выполнить тестовую задачу, которая проверит ваше понимание статей, которые вы прочли до этого момента. Удачи!

Посмотрите также

  • Indexed collections — an advanced level guide to arrays and their cousins, typed arrays.
  • Array — the Array object reference page — for a detailed reference guide to the features discussed in this page, and many more.
  • Назад
  • Обзор: Первые шаги
  • Далее

В этом разделе

  • Что такое JavaScript?
  • A first splash into JavaScript
  • What went wrong? Troubleshooting JavaScript
  • Storing the information you need — Variables
  • Basic math in JavaScript — numbers and operators
  • Handling text — strings in JavaScript
  • Useful string methods
  • Массивы
  • Assessment: Silly story generator

Создать и вывести массив в JS

Создать и вывести массив в JS

Для лучшего понимания, что такое массивы, сделаем вид, что их не существует, обойдемся пока без них. Однако для проведения эксперимента, надо иметь представление о понятии переменной, посмотрите этот урок, если вы не знаете что такое переменная.

Жизнь без массивов

Программист получил список, состоящий из пяти фамилий сотрудников компании, для дальнейшего вывода их на веб-сайте. Для этого, он создал пять переменных с разными названиями, присвоил им эти фамилии и вывел в консоль на JavaScript.

let worker_1 = ‘Петров’, worker_2 = ‘Иванов’, worker_3 = ‘Васильев’, worker_4 = ‘Яковлева’, worker_5 = ‘Степанова’;
console.log(worker_1);
console.log(worker_2);
console.log(worker_3);
console.log(worker_4);
console.log(worker_5);

Создать и вывести массив в JS.

Согласитесь, что создавать отдельную переменную для каждого сотрудника, контрпродуктивно, а если их будет 50 человек? Намного удобнее все эти фамилии занести в один список (массив) и работать в дальнейшем не с каждой фамилией в отдельности (по типу переменной), а с одним массивом с однотипными данными (элементами массива).

Создать массив на JS

Теперь запишем то же самое, но с применением массивов. Объявим переменную worker и присвоим ей значения (элементы массива) в квадратных скобочках. Вот таким образом создаются массивы.

let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
console.log(worker[0]);
console.log(worker[1]);
console.log(worker[2]);
console.log(worker[3]);
console.log(worker[4]);

Создать и вывести массив в JS.

Мы получили одинаковый результат, только кода написали значительно меньше.

Как получить и вывести элемент массива на JS

Для получения конкретного элемента массива мы обращаемся к нему не по названию, а по порядковому номеру (индекс массива). К каждой фамилии автоматически прикрепляется индекс, в этой системе отсчет ведется с нуля, прибавляя по единице.Следовательно обращаться к элементу надо через индекс.

let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
console.log(worker[0]); // Петров
console.log(worker[1]); // Иванов
console.log(worker[2]); // Васильев

В консоли выведутся фамилии, а не числовые индексы.

Создать и вывести массив в JS.

Как вывести весь массив JS

Для вывода в консоли необходимо указать одно его название.

Создать и вывести массив в JS.

Длина массива JS

В консоли, перед выведенными индексами массива, мы увидели число 5 – это длина массива length. Здесь очень важно понимать, что length не количество элементов массива, а последний индекс +1.

Что можно положить в массив?

В массив можно положить любые типы данных, причем вперемешку. Например, этот массив содержит: число, строку и булевое значение.

let all = [5, «Привет», false];
console.log(all[1]); // вывод в консоли строки Привет

Перезаписать элемент массива

Нам надо заменить 5 на 10, для этого обращаемся к имени массива и указываем в квадратных скобках индекс перезаписываемого элемента. В консоли вывелось число 10, вместо 5.

Вывести массив на странице

Выведем элементы массива в параграфе HTML-документа.

JavaScript код

Получаем параграф с идентификатором out_arr и присвоим ему через innerHTML имя массива worker.

let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
let out_arr = document.getElementById(‘out_arr’);
out_arr.innerHTML = worker;

Фамилии сотрудников выведутся без пробелов или запятых, совсем не презентабельно.

Вывод массива путем перебора элементов

Мы объявили пустую переменную str и запустили цикл for с условием: выводить элементы массива, начиная с 0-го индекса с шагом 1, до тех пор пока длина массива больше счетчика i.

let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
let out_arr = document.getElementById(‘out_arr’);
let str = ‘ ‘;
for (let i = 0; i < worker.length; i++ ) if (worker[i]!==undefined) str +=i+' - '+worker[i]+'
‘;
>
out_arr.innerHTML = str;

Запускаем в цикле проверку, чтобы не выводились пустые элементы и прописываем формулу вывода с числами индекса, с дефисом и в столбик.

Создать и вывести массив в JS.

Заключение

На этом уроке мы научились создавать, изменять и красиво выводить массивы на страницу, а также получать элементы массива по отдельности и все сразу.

Создано 11.01.2019 10:40:01

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 4 ):

    vs259hm 14.01.2019 12:14:51

    Добрый день. Вот эта конструкция не будет работать: «Создать массив на JS . let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’]; console.log(worker_1); console.log(worker_2); console.log(worker_3); console.log(worker_4); console.log(worker_5);» Думаю, это описка, т.к. обращение к массиву такое worker[1].

    porsake 14.01.2019 21:45:18

    все примеры рабочие и проверены в консоли, скрины же настоящие.

    vs259hm 15.01.2019 06:26:57

    Я бы не написал, если бы не проверил. Чего и Вам желаю 🙂

    porsake 15.01.2019 14:31:11

    спасибо добрый человек за внимательность, теперь исправлено.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

    Читать:
    Как подключить эвотор к вай фай

    Похожие записи

    Как сбросить пробег

    admin

    Как увеличить шрифт на компьютере windows 7

    admin

    Как повысить позицию сайта в яндексе

    admin