Массивы в Javascript

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

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

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

У каждой ячейки есть номер. Именно по этому номеру, по окончанию покупок, вы можете понять в какой именно ячейке лежат ваши вещи.

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

Как создать массив в Javascript

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

Первый способ создания массива в Javascript

Этот способ для числовых данных и объектов:

Этот способ для строк:

Данным способом мы создали массив из четырех элементов.

Второй способ создания массива в Javascript

Второй способ создания массивов в Javascript через объекты.

Выглядит это так:

array = new Array(1, 23, 15, 10, 33);

Для строковых данных массива, строки нужно заключить в кавычки.

Как обратиться к массиву в Javascript

Для того, чтобы обратиться к первому элементу массива, нужно написать:

где, достаем первый элемент массива - array. Console.log - отображает содержимое массива.

Нумерация массивов начинается с нуля. Именно поэтому когда мы обращаемся array нам выводится значение первого элемента 1 или в примере со строками - Один.

Методы работы с массивами

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

Метод Reverse

Метод reverse изменяет массив и формирует новый массив с элементами в обратном порядке.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.reverse();

Результат:

["Четыре", "Три", "Два", "Один"]

Метод Concat

Метод concat объединяет массив с другим массивом или данным. Метод concat не изменяет исходный массив.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.concat(12);

Результат:

["Один", "Два", "Три", "Четыре", 12]

Метод Slice

Метод slice обрезает часть строки и может принимать на вход как два параметра(начало и конец), так и один параметр.

Если второй параметр задать -1, тогда он вернет остальную часть строки c предпоследним элементом.

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

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.slice(1,-1);

Результат:

Метод Splice

Метод splice достаточно многофункциональный.

На вход он принимает три аргумента:

2. Количество элементов массива которые нужно удалить

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

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

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.splice(1, 2, "2", "3");

Результат:

["Один", "2", "3", "Четыре"]

Третий агрумент в методе splice необязателен. Если не использовать третий агрумент, тогда метод splice удалит указанные в первых двух аргументах элементы массива и вернет новый массив без этих элементов.

Метод Push

Метод push вставляет элемент в конец массива

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.push("Пять");

Результат:

["Один", "Два", "Три", "Четыре", "Пять"]

Метод UnShift

Метод unshift вставляет элемент в начало массива

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.unshift("Ноль");

Результат:

["Ноль", "Один", "Два", "Три", "Четыре"]

Метод Pop

Метод pop удаляет последний элемент из массива и возвращает удаленный элемент.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.pop();

Результат:

["Один", "Два", "Три"]

Метод Shift

Метод shift удаляет первый элемент из массива и возвращает удаленный элемент.

Пример:

array = ["Один", "Два", "Три", "Четыре"];

Результат:

["Два", "Три", "Четыре"]

Метод Join

Метод join в Javascript преобразует массив в строку и позволяет задать свой собственный разделитель. По умолчанию, метод join в качестве разделителя использует запятую. Давайте попробуем поставить разделитель "-".

Пример:

array = ["Один", "Два", "Три", "Четыре"];

array.join("-");

Результат:

Один-Два-Три-Четыре

Метод Sort

Метод Soft по умолчанию сортирует массив в алфавитном порядке. Мы можем передать ему функцию с другой логикой сортировки. Об этом поговорим в отдельной статье посвященный методам отдельно.

Пример:

array = ["а", "в", "б", "г"];

Результат:

["а", "б", "в", "г"]

Работа с массивами в циклах

Циклы - это очень важные методы для работы с массивами. С помощью них мы можем обращаться к отдельно взятому элементу массива и проходить по всему массиву.

Цикл FOR

Простой цикл для перебора массива

Пример:

Результат:

Один
Два
Три
Четыре

Цикл ForEach

Улучшенный цикл для перебора массива. На вход может принимать три элемента: element, index, array.

Пример 1:

Результат:

Один
Два
Три
Четыре

Пример 2:

Метод toUpperCase() делает все элементы с большой буквы

Результат:

["ОДИН", "ДВА", "ТРИ", "ЧЕТЫРЕ"]

Выводы о массивах в Javascript

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

Следите за новыми статьями и видеоуроками, подписывайтесь на наш канал YouTube и вступайте в группу

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

Понятие массива

Массив – это упорядоченный набор данных, который имеет имя и является экземпляром объекта Array. Он состоит из элементов, доступ к которым осуществляется с помощью их порядкового номера (индекса). Нумерация элементов в массиве начинается не с 1, а с 0.

На следующем рисунке приведён числовой массив, состоящий из 7 элементов. Элементы данного массива содержат следующие данные: 1 элемент (0 индекс) - число 123, 2 элемент (1 индекс) - число 214, 3 элемент (2 индекс) - число 315 и т.д.

//элемент в который будем выводить массив //создание числового массива var numberArray = new Array(123,214,315,312,124,206,218); //вывести массив в элемент, имеющий id="myP" document.getElementById("myP").innerHTML = "1 Элемент массива: " + numberArray + "
" + "2 Элемент массива: " + numberArray + "
" + "3 Элемент массива: " + numberArray + "
" + "4 Элемент массива: " + numberArray + "
" + "5 Элемент массива: " + numberArray + "
" + "6 Элемент массива: " + numberArray + "
" + "7 Элемент массива: " + numberArray;

Создание (объявление) массива

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

• Число. В этом случае данная функция создаст массив, состоящий из указанного числа элементов. Все эти элементы будут иметь значения undefined .
• Несколько значений через запятую. В данном случае функция-конструктор Array создаст массив, состоящий из указанного количества элементов, и присвоит им соответствующие значения.
• Ничего. В этом случае данная функция создаст пустой массив.

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

Работа с элементами массива

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

Например, создадим пустой массив и добавим в него 4 текстовых элемента:

//создание пустого массива smartphoneColors var smartphoneColors = new Array(); //присваиваем 1 элементу массива (индекс 0) значение "Black" smartphoneColors = "Black"; //присваиваем 2 элементу массива (индекс 1) значение "White" smartphoneColors = "White"; //присваиваем 3 элементу массива (индекс 2) значение "Grey" smartphoneColors = "Grey"; //присваиваем 4 элементу массива (индекс 3) значение "Blue" smartphoneColors = "Blue";

Например, выведем в консоль браузера (F12) значения 2 и 4 элемента массива smartphoneColors:

Console.log("2 элемент = " + smartphoneColors); console.log("4 элемент = " + smartphoneColors);

Длина массива (количество элементов в массиве)

Определение количества элементов в массиве осуществляется с помощью свойства length .

//создадим массив путём перечисления значений элементов в функции Array var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //переменной lengthArray присвоим длину массива volumeHDDs var lengthArray = volumeHDDs.length;

Как получить первый элемент массива

Получение значения первого элемента массива осуществляется с помощью указания в квадратных скобках этого массива числа 0:

//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения первого элемента массива var firstValue = volumeHDDs;

Как получить последний элемент массива

Получение значения последнего элемента массива осуществляется с помощью указания в квадратных скобках этого массива выражения имя_массива.length-1:

//создание массива, состоящего из 3 элементов var volumeHDDs = new Array("500Gb","1Tb","2Tb"); //получение значения последнего элемента массива var lastValue = volumeHDDs;

Перебор массива

Перебор элементов массива осуществляется с помощью цикла for .

Например, переберём все элементы массива и выведем их значения в консоль браузера (F12):

//создание массива nameStudents, состоящего из 4 элементов var nameStudents = new Array("Петя","Вася","Коля","Максим"); //перебор элементов массива от 0 до длины массива-1 for (var i=0; i