Назад в блог

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

 

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

 

интерактивный курс modern javascript

 

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

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

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

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

 

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

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

 

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

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

script.js

 

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

script.js

 

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

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

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

script.js

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

 

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

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

script.js

 

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

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

 

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

 

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

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

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

 

Начнем с REVERSE

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

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

script.js

получаем:

script.js



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

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

Посмотрим:

script.js

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

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

script.js



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

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

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

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

script.js

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

Получаем:

script.js



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

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

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

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

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

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

 

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

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

script.js

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

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

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

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

script.js

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

 

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

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

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

script.js

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

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

script.js



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

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

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

script.js

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

Получаем:

script.js

 

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

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

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

script.js

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

script.js



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

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

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

script.js

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

script.js

 

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

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

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

script.js

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

script.js



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

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

script.js

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

script.js

 

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

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

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

 

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

FOR

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

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

script.js

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

script.js

 

FOREACH

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

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

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

script.js

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

script.js

 

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

script.js

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

script.js


Выводы

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