JavaScript - Массивы

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

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

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

JavaScript - числовой массив, состоящий из 7 элементов

//элемент в который будем выводить массив
<p id="myP"></p>

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

JavaScript - вывод значений элементов массива

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

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

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

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

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

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

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

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

console.log("2 элемент = " + smartphoneColors[1]);
console.log("4 элемент = " + smartphoneColors[3]);

JavaScript - Вывод массива в консоль

Определение количества элементов в массиве осуществляется с помощью свойства 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[0];

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

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

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

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

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

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

Оператор delete используется не для удаления элемента из массива, а для присваиванию данному элементу массива значение undefined.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
delete namePlanets[1];
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Оператор delete

Объект Array содержит следующие методы для работы с элементами массива: pop(), push(), shift(), unshift(), slice(), splice(), join(), split(), reverse(), sort().

Метод pop предназначен для удаления последнего элемента массива. У данного метода нет параметров. В качестве результата он возвращает значение последнего (удалённого) элемента массива.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.pop();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод pop

Метод push предназначен для добавления элемента в конец массива. Значение этого элемента указывается в качестве параметра данного метода. В качестве результата метод push возвращает количество элементов в массиве с учётом добавленного.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.push("Юпитер");
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод push

Метод shift предназначен для удаления первого элемента из массива, т.е. элемента, имеющего индекс 0. Все остальные элементы массива смещаются к началу, т.е. у них уменьшается индекс на 1. Данный метод возвращает в качестве результата выполнения значение удалённого элемента массива.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.shift();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод shift

Метод unshift предназначен для добавления элемента в начало массива. Значение этого элемента указывается в качестве параметра данного метода. В качестве результата данный метод возвращает количество элементов в массиве с учётом добавленного.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.unshift("Юпитер");
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод unshift

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

Метод slice имеет 2 параметра:

  • 1 параметр (обязательный) - предназначен для указания индекса элемента, с которого необходимо начинать копировать элементы;
  • 2 параметр (необязательный)- предназначен для указания индекса элемента, до которого необходимо копировать. Если его не указать, то будут скопированы элементы до конца указанного массива.
var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets = namePlanets.slice(2,3);
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод slice

Метод splice предназначен для добавления и (или) удаления элементов массива.

1. Метод splice позволяет вырезать из массива часть его элементов, т.е. они будут удалены из массива:

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.splice(2,2);
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод splice

2. Метод splice также позволяет добавить (если 2 параметр равен 0) элементы в массив, или одновременно добавить и удалить (если 2 параметр больше 0) элементы массива.

Данный метод имеет 3 параметра:

  • 1 параметр (обязательный) - предназначен для указания индекса элемента, с которого мы начинаем вырезать элементы;
  • 2 параметр (обязательный) - предназначен для указания количества элементов, которые необходимо вырезать;
  • 3 и последующие параметры (необязательные) - предназначены для добавления элементов в массив.
var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.splice(1,1,"Уран","Нептун","Сатурн");
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод splice

Метод join предназначен для преобразования массива в строку. Данный метод имеет параметр, который используется как соединительная строка между элементами массива при их преобразовании строку. Если в качестве параметра ничего не указать, то для соединений элементов массива будет использоваться запятая (",").

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
var strPlanets = namePlanets.join();
console.log("Строка: " + strPlanets);
var strPlanets2 = namePlanets.join(" ");
console.log("Строка: " + strPlanets2);

JavaScript - Метод join

Метод split предназначен для преобразования строки в массив. Данный метод имеет один параметр, в качестве которого вы можете указать строку, на основании которой данная строчка будет разбита на массив строк.

var strElementComputers = "Системный блок, Монитор, Клавиатура, Мышь, Колонки, Принтер";
var elementComputers = strElementComputers.split(", ");
console.log("Количество элементов в массиве: " + elementComputers.length);
for (var i=0; i <= elementComputers.length-1; i++)
{
  console.log(i + " элемент массива = " + elementComputers[i]);
}

JavaScript - Метод split

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

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.reverse();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод reverse

Метод sort предназначен для сортировки элементов массива. По умолчанию данный метод сортирует массив как строки.

var namePlanets = new Array ("Венера","Меркурий","Земля","Марс");
namePlanets.sort();
console.log("Количество элементов в массиве: " + namePlanets.length);
for (var i=0; i <= namePlanets.length-1; i++)
{
  console.log(i + " элемент массива = " + namePlanets[i]);
}

JavaScript - Метод sort



   JavaScript и jQuery 1    20435 0

Комментарии (3)

  1. Виталик # 0
    var lastValue = volumeHDDs[0];
    это при получении первого элемента массива. наверное, опечатка и должно быть firstValue
    1. Виталик # 0
      1. Метод slice позволяет вырезать из массива часть его элементов, т.е. они будут удалены из массива:
      должно быть splice
      1. Александр Мальцев # 0
        Спасибо, исправил недочёты.

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