Вывести элементы массива
Данный способ использует метод forEach() , который появился в JavaScript 1.6 (ECMAScript 5).
var arr = ['JavaScript', 'ECMAScript', 'jQuery']; arr.forEach(function(array_item, index) < console.log(array_item); >);
Метод forEach() поддерживается всеми современными браузерами. IE поддерживает с версии IE 9.
2-ой способ: цикл
var arr = [‘JavaScript’, ‘ECMAScript’, ‘jQuery’]; for (var i = 0, l = arr.length; i l; i++)
Здесь стоит обратить внимание, что количество элементов в массиве arr.length заносится в отдельную переменную. Это сделано для быстродействия выполнения кода, иначе в каждой итерации цикла подсчитывалось количество элементов в массиве.
Также есть метод for … in , но его не рекомендуется использовать с массивами (только с объектами).
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
Вывести массив на 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 } }
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 почти всегда выглядит более читаемым, чем «именованная» лямбда-функция.
Создать и вывести массив в 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);
Согласитесь, что создавать отдельную переменную для каждого сотрудника, контрпродуктивно, а если их будет 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 < worker.length; i++ ) if (worker[i]!==undefined) str +=i+' - '+worker[i]+'
‘;
>
out_arr.innerHTML = str;
Запускаем в цикле проверку, чтобы не выводились пустые элементы и прописываем формулу вывода с числами индекса, с дефисом и в столбик.
Заключение
На этом уроке мы научились создавать, изменять и красиво выводить массивы на страницу, а также получать элементы массива по отдельности и все сразу.
Создано 11.01.2019 10:40:01
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - 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 Русаков Михаил Юрьевич. Все права защищены.
JavaScript | Как вывести массив в консоль браузера?
Если мы находимся в текстовом редакторе, то нам нужно воспользоваться командой:
console.log(massiv) Вместо слова massiv подставляем своё название массива.
Если мы уже находимся в консоли браузера, то нам нужно просто написать название нашего массива:
massiv 
Вам также может понравиться
Опубликовано 30.09.2021
ECMAScript | Анализ Области Видимости
8.1.1 SS: BoundNames 8.1.2 SS: DeclarationPart 8.1.3 SS: IsConstantDeclaration 8.1.4 SS: LexicallyDeclaredNames 8.1.5 SS: LexicallyScopedDeclarations 8.1.6 SS: VarDeclaredNames 8.1.7 SS: VarScopedDeclarations […]
Опубликовано 08.02.2022
JavaScript | Как сложить два числа?
Инструкция для чисел Мы можем открыть браузер и в нём перейти в инструменты разработчика. После этого мы можем открыть вкладку Консоль (Console). […]
Опубликовано 29.05.2022
JavaScript | Сколько раз число встречается в массиве?
Как узнать сколько раз повторяется определённое число в массиве? Пусть у нас будет массив: [1, 7, 2, 3, 3, 4, 5, […]
Опубликовано 09.04.2021
ECMAScript | Глобальная Запись Среды | Метод CreateGlobalFunctionBinding ( N, V, D )
CreateGlobalFunctionBinding ( N, V, D ) Конкретный метод CreateGlobalFunctionBinding (Создать привязку глобальной функции), глобальной записи среды envRec принимает аргументы N (строка), V […]