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

1 year ago | 14.9K

 

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

 

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

 



Поделитесь в социальных сетях





Читайте также

Что такое NodeJS и npm?

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
15.8K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
12.1K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
5.1K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
8.9K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
11.6K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
37.7K























Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 21.12.2019

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 23.12.2019

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Ориентировочная дата выхода нового урока - 26.12.2019

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Сергей Никонов
  • Новинка!
  • 30 заданий
  • 16 видео
  • 2 часа

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.8 / 961
Сергей Никонов
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 548
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

Курс Linux/GIT/Хостинг. Обучение программирования, уроки программирования
Курс Linux/GIT/Хостинг. Обучение программирования, уроки программирования
4.9 / 732
Сергей Никонов
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 890
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 1373
Сергей Никонов
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 2539
Сергей Никонов
  • 66 заданий
  • 32 видео
  • 5 часов