javascript вывести массив на экран

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

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

Программист получил список, состоящий из пяти фамилий сотрудников компании, для дальнейшего вывода их на веб-сайте. Для этого, он создал пять переменных с разными названиями, присвоил им эти фамилии и вывел в консоль на 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);

Согласитесь, что создавать отдельную переменную для каждого сотрудника, контрпродуктивно, а если их будет 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

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

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

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

Как вывести весь массив 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

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

Заключение

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

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

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

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

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

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

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

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Добрый день. Вот эта конструкция не будет работать: «Создать массив на 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].

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

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

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

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

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

Один из читателей блога обратился ко мне по почте с вопросом: «Как вести содержимое массива в JavaScript без использования циклов?». Не знаю, зачем ему это понадобилось, но смею предположить, что речь идет о тестовом задании для собеседования. Я никогда не работал JavaScript-разработчиком. Изучал этот язык сугубо для личных целей, поэтому возможно чего-то не знаю, но если бы я столкнулся с этой задачей, то применил бы один из следующих способов.

Метод join()

У массивов в JavaScript есть метод join(). Он возвращает содержимое массива в виде строки (по умолчанию через запятую). В качестве единственного параметра методу можно передать строку-разделитель. Таким образом, элементы массива реально выводить не только через запятую, но и любой другой символ (символы). Рассмотрим несколько примеров:

Если автор не утаил дополнительных условий, то задача легко решается применением метода join().

Методы toString(), valueOf()

Практически аналогичного результата можно добиться с помощью унаследованных от Object методов toString() и valueOf(). Отличие от join() – отсутствует возможность изменить разделитель. Точней говоря, разделить изменить можно, но для этого придется перекрывать метод собственной реализацией. Смотрим примеры:

Возможно, есть еще какие-нибудь способы вывести содержимое массива без применения циклов, но я их не знаю. Если среди посетителей блога есть профи в JavaScript, то буду рад услышать ваши комментарии.

Здравствуйте. Случился такой абсурдный момент. У меня есть функция, которая проходит по XML-странице, собирает нужные значения в массив. Пример функции:

Если вместо return array; прописать console.info(array); , то в консоли выведет полученный массив. Но если я буду делать так:
, то ничего не выводит (undefined).

Мне нужно иметь в одном массиве значения с нескольких XML-страниц, т.е. функция должна проходить по page1.xml, page2.xml, page3.xml.

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

• Вопрос задан более двух лет назад
• 1060 просмотров

А — асихронность.
Упростим ваш код:

Ваш код в третей функции исполняется во второй(которую мы вызываем), в первой ни array, ни return array доступен не будет. Более того, если сделать так:

Будет возвращать пустой массив!
В чем же дело? Вы отправляете запрос на сервер, а код исполняется дальше. То есть третья функция может быть вызвана в любой момент — когда придет ответ от сервера. Можно использовать сихронный вариант, но это плохая идея.
Решения, как всегда, два: callback и Promise.
Решение с callback:

Решение с Promise сложнее и требут знание промисов, собственно говоря. Но в использовании оно проще