JS Массивы, понятия и назначения

Массивы в JavaScript

Подошли мы к интересной теме языка javaScript, называется Массивы. Вероятней всего вы с ними уже встречались, а возможно и работали. Но не всем эта тема понятна до конца и давайте тут разберемся с ней более подробнее.

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

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

В конце предлагаю для укрепления полученных знаний решить практическое задание.

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

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

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

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

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

Представляете, заходите вы такой в магазин, в реку у вас стопка листков и на каждом листке записано по одному наименованию товара.

На примере в JavaScript это выглядит следующим образом. Работая без массивов, пришлось бы для каждой строчки товара создать отдельную переменную, переменной присвоить соответствующее имя, а значение ее, это будет название продукта.

var products_1 = "хлеб", products_2 = "сыр", products_3 = "яйцо", products_4 = "молоко", products_5 = "творог";
console.log(products_1,products_2,products_3,products_4,products_5);

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

Как и во многих языках, массив в JavaScript создается при помощи квадратных скобок [ ]. В первую очередь, как и с переменными, объявляем массив, то есть, пишем ключевое слово var, затем его имя, ставим знак присваивания =, далее квадратные скобки [ ], а в них помещаем значения записывая через запятую.

var products = ["хлеб", "сыр", "яйцо", "молоко", "творог"];
console.log(products);

Обратите внимание, квадратные скобки [ ] очень важны. Именно они сообщают интерпретатору JS о том, что он имеет дело с массивами.

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

var prodList = [];
console.log(prodList);

Есть еще один способ создания массива – с использованием ключевого слова Array:

var arrProd = new Array("хлеб", "сыр", "яйцо", "молоко", "творог");
console.log(arrProd);

Такой способ допустим, и на первый взгляд особой разницы нет, за исключением другого синтаксиса, где добавляются new Array и круглые скобки. На самом деле этот способ не такой уж простой, да он создает массив, но у него есть побочные эффекты. Об этом способе поговорим в уроке, когда будем проходить свойства и методы массивов, там вы узнаете их отличия.

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

var pref = [1, -25.3, "www.dwstv.ru", false];
console.log(deys);

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

var deys = ["Пн", "Вт", "Ср",[10, 11, 12]];
console.log(deys);

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

var deys = [
    "Пн",
    "Вт",
    "Ср", [
        10,
        11,
        12
    ]
];

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

Доступ к элементу массива

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

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

console.log(products_1);

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

Запомните, индекс всегда начинается с нуля, первый элемент массива имеет индекс 0, второй 1. Иными словами, отнимаем единицу из номера элемента в списке – и получите его индексное значение.

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

console.log(deys[0]);

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

console.log(deys[3][0]);

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

deys[0] = "Понедельник";

И так, из всего этого вы должны усвоить:

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

Задача

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

При помощи метода getElementsByTagName и свойства innerHTML с которым мы знакомились в предыдущем уроке, выведите на страницу название стран на напротив которых указанно население.

То есть, вам нужно будет поработать с этими двумя массивами. и представьте это в таком виде.

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

Урок подготовил Горелов Денис.