Массивы в javascript

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

Допустим, мы объявим некую переменную z, и присвоим ей значение 8. И если мы где-то ниже в коде, этой же переменной зададим другое значение, допустим 3, то старое значение пропадёт и вместо неё запишется новое.

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

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

Раньше в JavaScript массив объявлялся таким образом:

var arr = new Array ( 7, 8, 'k', 'v', 3.2, 4 ); 

Времена изменились, и сейчас массив объявляется другим образом, более сокращённо. Элементы перечисляются также через запятую, но уже внутри простых квадратных скобок.

var arr = [ 7, 8, 'k', 'v', 3.2, 4 ];

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

Теперь в переменную arr находится одномерный массив данных, разных типов.

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

Структура массива выглядит так:

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

Для примера выведем на экран элемент, у которого индекс равен 2, то есть букву 'k'.

document.write('<p> Выводим элемент массива arr, у которого индекс равен 2:' + arr[2] + '</p>); // k

А что если мы хотим посмотреть все элементы массива. Если там мало элементов, то можно обратиться к каждому по отдельности, как в примере, то есть arr[0], arr[1], arr[2].

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

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

Для интереса узнаем, какая длина имеет массив arr.

document.write('<p> Количество элементов в массиве arr =' + arr.length + '</p>); // Результат: 6

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

for(var i = 0; i < arr.length; i++){
    document.write('<p> Элемент массива arr, с индексом <strong><em>' + i + '</em></strong> равен:' + arr[i] + ' </p> ');
}

Открываем эту страницу в браузере и видим такую картину:

Для тренировки, попробуйте перебрать массив 'arr' и с помощью остальных циклов, while и do-while.

Существует ещё один простой и короткий вариант перебора маленького массива. Он заключается в том, что каждый элемент массива можно посмотреть с помощью метода alert. Сначала пишем название самого массива, или же можно указать сразу список элементов в квадратных скобках. Потом пишем функцию forEach и в качестве параметра пишем метод alert, без скобок.

arr.forEach(alert);

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

Заполнение массива с помощью цикла

Для примера, в некий массив, запишем результаты таблицы умножения, от 1 до 10.

Сначала необходимо объявить пустой массив, которого и будем заполнять. Потом необходимо объявить переменную и присвоить ей сразу значение 0. Эта переменная будет в качестве индекса для объявляемого массива. И следующим шагом будет само заполнение массива с помощью такого приёма как цикл в цикл.

//Объявляем пустой массив
var new_arr = [];

// Переменная в качестве индекса для массива new_arr
var k = 0;

for(var i = 1; i <= 10; i++){
    for(var j = 1; j <= 10; j++){
        
        //Заполняем массив new_arr
        new_arr[k] = i * j;
        
        //Вывод текущего значения массива
        document.write(new_arr[k] + ' ');

        //Инкрементирование индекса, массива new_arr
        k++;
    }
    document.write('<br /> ');
}

Если мы откроем эту страницу в браузере, то увидим такой результат:

Сначала переменная i равна единичке. И вот эта единичка умножается со всеми значениями переменной j. После того как прошлись 10 раз по второму циклу возвращаемся к первому циклу и инкрементируем переменную i на единицу. Теперь i равно двойке. Опять идём ко второму циклу и умножаем значение 2 на все значения переменной j(от 1 до 10). В результате получается второй ряд: 2 4 6 8 … 20. И так происходит пока, переменная i не станет равно 11. Как только она примет такое значение, то мы выходим из цикла.

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

У нас есть массив new_arr в котором хранится 100 чисел ( целая таблица умножения). Теперь давайте посчитаем сумму всех этих элементов.

//Создаем переменную для суммы
var summ = 0;
for(var i = 0; i < new_arr.length; i++){
    summ += new_arr[i];
}

document.write('<p>Сумма элементов массива new_arr равна: ' + summ + '</p>' ); //Результат 3025

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

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

Понравилась статья?

Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Дата добавления: %date%