Массивы в Javascript: как создать, методы работы, использование циклов
Для хорошего программиста просто необходимо знание языка Javascript и умение работать с массивами. Здесь мы ознакомимся с понятием массивов. Рассмотрим несколько способов их создания, а также методы работы с массивами. Кроме этого, ознакомимся с таким вопросом, как циклы.
В чем состоит отличие массива от переменной
Давайте начнем изучение этого вопроса, используя пример, взятый из жизни.
В каждом супермаркете установлен шкаф, разделенный на секции - ячейки. В любую из них можно положить вещи. Все они пронумерованы. Запомнив номер, легко найти ячейку, где вы оставили свое имущество.
Используя аналогию можно сравнить с переменной одну из этих ячеек. Весь шкаф выступает в роли массива.
Учимся создавать массивы
Язык Javascript позволяет создавать массив различными способами.
Рассмотрим первый вариант.
Таким образом, создают массив данных из чисел:
Так создается строчный массив:
Второй вариант.
В этом случае мы создаем массив через объекты.
Программный код имеет такой вид:
Создавая массивы строковых данных, обязательно помещайте данные в кавычки.
Учимся обращаться к массиву
Обращаясь к первому элементу надо дать такой запрос:
Функция Console.log показывает содержимое массива
Мы извлекаем первый элемент – array[0].
В JAVASCRIPT порядок отсчета массивов идет от нуля. Следовательно, обращаясь array[0] получаем значение элемента идущего первым - 1. Если массив строковый - Один.
Начинаем работать с массивами
В языке JAVASCRIPT есть методы, позволяющие работать с массивами. Они удобны, дают возможность справиться с любой поставленной задачей.
Давайте внимательно рассмотрим некоторые из них.
Начнем с REVERSE
Метод REVERSE дает возможность изменить массив и сформировать новый, с элементами, расположенными в обратном порядке.
Рассмотрим на примере:
получаем:
Второй метод CONCAT
Используя метод - CONCAT, мы получаем возможность объединить массив с другим массивом или данным. При его использовании данные исходного массива не изменяются.
Посмотрим:
Используем метод, добавляем данные
Что у нас получилось:
Третий метод SLICE
Используя метод SLICE, мы можем обрезать часть строки. Чтобы это сделать, нужно задать один, при необходимости, два параметра.
В случае если мы зададим -1, метод вернет оставшуюся часть строки с предпоследним элементом.
Смотрим на примере:
убираем первый и последний элементы
Получаем:
Следующий метод – SPLICE
Этот метод очень многофункционален.
SPLICE может принять три аргумента:
Первый аргумент — это индекс массива, начиная с которого мы будем удалять элементы;
Второй аргумент указывает необходимое для удаления количество элементов;
Используя третий аргумент, мы можем указать значения, которые заменят удаленные элементы.
Метод splice вносит изменения в исходный массив.
Для понимания смотрим пример:
индекс, начиная с которого удаляются элементы: 1
количество удаляемых элементов: 2
значения, заменяющие удаленные элементы: "2", "3"
В результате мы получаем:
Использование третьего аргумента в этом методе необязательно. Когда он не используется, метод возвращает новый массив без элементов, которые мы укажем в первых двух.
Рассмотрим следующий метод - PUSH
PUSH позволяет вставить элемент в конец массива.
Для наглядности рассмотрим пример:
Вставим элемент.
Получаем результат:
UNSHIFT - еще один метод требующий внимания
Он похож на метод, рассмотренный выше. В отличие от него UNSHIFT добавляет элемент не в конце, а в начале.
Давайте посмотрим:
Добавляем элемент.
Получаем:
Рассмотрим очередной интересный метод - POP
POP позволяет извлечь последний элемент в массиве и присвоить его переменной.
Смотрим на пример:
Полученный результат будет таким:
Следующий метод - SHIFT
Используя метод SHIFT, мы производим подобные действия. Только в этом случае из массива извлекается первый элемент.
Видим на примере:
Получаем в результате:
Рассмотрим метод JOIN
Применяя его, можно объединить элементы массива в одну строку. На выходе элементы друг от друга отделены разделителем. По умолчанию это запятая.
Давайте посмотрим, как это будет выглядеть, если мы используем разделитель"-":
В итоге у нас получится строка:
Изучаем очередной метод – SORT
Используя метод, мы получаем возможность провести сортировку элементов массива в порядке алфавита. У метода большие возможности. С его помощью можно задавать другую логику действий. Он достоин рассмотрения в отдельном материале. Мы просто ознакомимся с ним и посмотрим его работу:
Как и ожидалось, получаем элементы:
Массивы и циклы
Вкратце ознакомимся с циклами. Эта тема довольно большая, требующая детального изучения. В этом разделе мы просто увидим общий алгоритм работы циклов, получим первичные понятия о них.
Циклы в JavaScript — команды, исполняемые повторно до момента, пока заданное условие не будет выполнено. Они очень важны, когда вы работаете с массивами. Они дают возможность обратиться к отдельному элементу. Так же, с их помощью, можно пройти по всему массиву данных.
В Javascript применяются такие циклы
FOR
Это простой цикл, позволяющий перебирать массив.
Посмотрим пример:
На выходе получим:
FOREACH
Это улучшенный цикл, используемый при переборе массива. Он принимает такие элементы: element, index, array.
Рассмотрим возможные варианты его использования.
Первый вариант:
В результате получаем:
Второй вариант:
Применяя метод toUpperCase() на выходе мы получаем все элементы прописанные большими буквами:
Выводы
Кроме рассмотренных нами методов, используемых в Javascript, есть множество других. В одной статье охватить все просто нереально. По мере изучения языка вам будут открываться новые возможности. Умение применять методы, перечисленные в этом материале, позволит вам значительно увеличить свои возможности в программировании. С помощью Javascript создаются уникальные и неповторимые сайты.
