Для того, чтобы лучше понять что такое массивы в 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Простой цикл для перебора массива
Пример:
Результат:
Один
Два
Три
Четыре
Улучшенный цикл для перебора массива. На вход может принимать три элемента: 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