Массивы в 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 создаются уникальные и неповторимые сайты.