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

5 years ago | 19.6K

 

Для хорошего программиста просто необходимо знание языка 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 и в этой...
18.0K

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

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

Что такое Modern Javascript?

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

Классы в JAVASCRIPT

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

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

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

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

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























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
пока нет оценок
Sergei Nikonov
  • Новинка!
  • 162 заданий
  • 60 видео
  • 17 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Sergei Nikonov
  • Уроки Yii2 в разработке

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

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1670
Sergei Nikonov
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 649
Sergei Nikonov
  • 28 заданий
  • 26 видео
  • 5 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1112
Sergei Nikonov
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1419
Sergei Nikonov
  • 69 заданий
  • 37 видео
  • 5 часов

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

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