Массивы в Javascript: как создать, методы работы, использование циклов

Для хорошего программиста просто необходимо знание языка Javascript и умение работать с массивами. Здесь мы ознакомимся с понятием массивов.  Рассмотрим несколько способов их создания, а также методы работы с массивами. Кроме этого, ознакомимся с таким вопросом, как циклы.

В чем состоит отличие массива от переменной

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

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

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

Учимся создавать массивы

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

Рассмотрим первый вариант.

Таким образом, создают массив данных из чисел:

array = [1, 23, 15, 10, 33];

Так создается строчный массив:

array = ["Один", "Два", "Три", "Четыре"];

Второй вариант.

В этом случае мы создаем массив через объекты.

Программный код имеет такой вид:

array = new Array(1, 23, 15, 10, 33);

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

Учимся обращаться к массиву

Обращаясь к первому элементу надо дать такой запрос:

console.log(array[0])

Функция Console.log показывает содержимое массива

Мы извлекаем первый элемент – array[0].

В JAVASCRIPT порядок отсчета массивов идет от нуля. Следовательно, обращаясь array[0] получаем значение элемента идущего первым - 1.  Если массив строковый - Один.

Начинаем работать с массивами

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

Давайте внимательно рассмотрим некоторые из них.

Начнем с REVERSE

Метод REVERSE дает возможность изменить массив и сформировать новый, с элементами, расположенными в обратном порядке.

Рассмотрим на примере:

array = ["Один", "Два", "Три", "Четыре"];

array.reverse();

получаем:

["Четыре", "Три", "Два", "Один"]

Второй метод CONCAT

Используя метод - CONCAT, мы получаем возможность объединить массив с другим массивом или данным. При его использовании данные исходного массива не изменяются.

Посмотрим:

array = ["Один", "Два", "Три", "Четыре"];

array.concat(12);

Используем метод, добавляем данные

Что у нас получилось:

["Один", "Два", "Три", "Четыре", 12]

Третий метод SLICE

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

В случае если мы зададим -1, метод вернет оставшуюся часть строки с предпоследним элементом.

Смотрим на примере:

array = ["Один", "Два", "Три", "Четыре"];

array.slice(1,-1);

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

Получаем:

["Два", "Три"]

Следующий метод – SPLICE

Этот метод очень многофункционален.

SPLICE может принять три аргумента:

Первый аргумент — это индекс массива, начиная с которого мы будем удалять элементы;

Второй аргумент указывает необходимое для удаления количество элементов;

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

Метод splice вносит изменения в исходный массив.

Для понимания смотрим пример:

array = ["Один", "Два", "Три", "Четыре"];

array.splice(1, 2, "2", "3");

индекс, начиная с которого удаляются элементы: 1

количество удаляемых элементов: 2

значения, заменяющие удаленные элементы: "2", "3"

В результате мы получаем:

["Один", "2", "3", "Четыре"]

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

Рассмотрим следующий метод - PUSH

PUSH позволяет вставить элемент в конец массива.

Для наглядности рассмотрим пример:

array = ["Один", "Два", "Три", "Четыре"];

array.push("Пять");

Вставим элемент.

Получаем результат:

["Один", "Два", "Три", "Четыре", "Пять"]

UNSHIFT - еще один метод требующий внимания

Он похож на метод, рассмотренный выше. В отличие от него UNSHIFT добавляет элемент не в конце, а в начале.

Давайте посмотрим:

array = ["Один", "Два", "Три", "Четыре"];

array.unshift("Ноль");

Добавляем элемент.

Получаем:

["Ноль", "Один", "Два", "Три", "Четыре"]

Рассмотрим очередной интересный метод - POP

POP позволяет извлечь последний элемент в массиве и присвоить его переменной.

Смотрим на пример:

array = ["Один", "Два", "Три", "Четыре"];

array.pop();
 

Полученный результат будет таким:

"Четыре"

["Один", "Два", "Три"]

Следующий метод - SHIFT

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

Видим на примере:

array = ["Один", "Два", "Три", "Четыре"];

array.shift();

Получаем в результате:

"Один"

["Два", "Три", "Четыре"]

Рассмотрим метод JOIN

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

Давайте посмотрим, как это будет выглядеть, если мы используем разделитель"-":

array = ["Один", "Два", "Три", "Четыре"];

array.join("-");

В итоге у нас получится строка:

Один-Два-Три-Четыре

Изучаем очередной метод – SORT

Используя метод, мы получаем возможность провести сортировку элементов массива в порядке алфавита. У метода большие возможности. С его помощью можно задавать другую логику действий. Он достоин рассмотрения в отдельном материале. Мы просто ознакомимся с ним и посмотрим его работу:

array = ["а", "в", "б", "г"];

array.sort();

Как и ожидалось, получаем элементы:

["а", "б", "в", "г"]

Массивы и циклы

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

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

В Javascript применяются такие циклы

FOR

Это простой цикл, позволяющий перебирать массив.

Посмотрим пример:

array = ["Один", "Два", "Три", "Четыре"];

for(i = 0; i < array.length; i++) {
    console.log(array[i]);
}

На выходе получим:

Один
Два
Три
Четыре

FOREACH

Это улучшенный цикл, используемый при переборе массива. Он принимает такие элементы: element, index, array.

Рассмотрим возможные варианты его использования.

Первый вариант:

array = ["Один", "Два", "Три", "Четыре"];

array.forEach(function(element, index) {
    console.log(element);
});    

В результате получаем:

Один
Два
Три
Четыре

Второй вариант:

array = ["Один", "Два", "Три", "Четыре"];

array.forEach(function(element, index, array) {
    array[index] = element.toUpperCase();
});    

console.log(array);

Применяя метод toUpperCase() на выходе мы получаем все элементы прописанные большими буквами:

["ОДИН", "ДВА", "ТРИ", "ЧЕТЫРЕ"]

Выводы

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