Массивы JavaScript

В этой главе:

  • Что такое массив

  • Создание массива

  • Чтение, запись и добавление элементов массива

  • Длина массива

  • Перебор элементов массива

  • Усечение и увеличение массива

  • Удаление элементов массива

  • Многомерные массивы

  • Ассоциативные массивы

Что такое массив

Массив – это тип данных, хранящий пронумерованные значения. Каждое пронумерованное значение называется элементом массива, а число, с которым связывается элемент, называется его индексом. Массивы JavaScript нетипизированы, это значит, что элемент массива может иметь любой тип, причем разные элементы одного массива могут иметь разные типы. Помимо этого массивы JavaScript являются динамическими, это значит, что объявлять фиксированный размер не нужно и можно добавить новые элементы в любое время.

Создание массива

Массив можно создать двумя способами, первый: создать массив с помощью литерала массива - квадратные скобки, внутри которых расположен список элементов, разделенных запятыми.

1
2
3
var empty = [];  //пустой массив
var numbers = [4, 1, 2, 5]; //массив с 5 числовыми элементами
var diff = [1.5, false, "текст"];  //массив с 3 элементами различного типа

Значения не обязательно должны быть простыми (числа или строки) - это также могут быть и любые другие выражения, например: литералы объектов, другие массивы или функции.

1
2
var num = 700;
var tab = [function(a) { alert(a) }, { name: 'Петя' }, [1, 2, 3], num + 1];

Второй способ создания массива - вызов конструктора Array(). Вызвать конструктор Array() можно тремя способами.

  • Вызов конструктора без аргументов:

1
var b = new Array();

В этом случае создается пустой массив, эквивалентный пустому литералу [].

  • В конструкторе явно указываются значения n элементов массива:

1
var b = new Array(1, 3, 5, 8, "строка", true);

В этом случае конструктор получает список аргументов, которые становятся элементами нового массива. Аргументы записываются в массив в том порядке, в котором указаны.

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

1
var b = new Array(5);

Этот способ определения массива предполагает выделение массиву определенного количества элементов (каждый из которых имеет значение undefined) с возможностью последующего присваивания значений по ходу сценария. Такая форма обычно используется для предварительного размещения массива, если его длина известна заранее.

Чтение, запись и добавление элементов массива

Доступ к элементам массива осуществляется с помощью оператора []. Элементы массива в JavaScript нумеруются, начиная с нуля. Чтобы получить нужный элемент массива, надо указать его номер в квадратных скобках.

1
2
3
4
5
6
var numbers = [4, 1, 2, 5];
 
document.write(numbers[0] + ", "); //первый элемент массива
document.write(numbers[1] + ", "); //второй элемент массива
document.write(numbers[2] + ", "); //третий элемент массива
document.write(numbers[3]);        //четвертый элемент массива

Элементы массива можно изменять:

1
2
3
var numbers = [4, 1, 2, 5];
 
numbers[0] = 10; //изменили первый элемент массива - [10, 1, 2, 5]

Чтобы добавить новый элемент массива, достаточно присвоить новое значение:

1
2
3
var numbers = [4, 1];
 
numbers[2] = 7; //стало [4, 1, 7]

Примечание: в массивах JavaScript может храниться любое число элементов любого типа.

Длина массива

Все массивы, как созданные с помощью конструктора Array(), так и определенные с помощью литерала массива, имеют специальное свойство length, которое возвращает общее число элементов, хранимых в массиве. Поскольку массивы могут иметь неопределенные элементы (имеющие значение undefined), более точная формулировка звучит так: свойство length всегда на единицу больше, чем самый большой индекс (номер) элемента массива. Свойство length автоматически обновляется, оставаясь корректным при добавлении новых элементов в массив.

1
2
3
4
5
var v = new Array();  // v.length == 0 (ни один элемент не определен)
v = new Array(1,2,3); // v.length == 3 (определены элементы 0–2)
v = [4, 5];           // v.length == 2 (определены элементы 0 и 1)
 
document.write(v.length);

Чтобы получить последний элемент массива можно воспользоваться так же свойством length:

1
2
3
var v = ["JavaScript", "Свойство", "Массивы"];
 
document.write(v[v.length - 1]);           

Последний элемент имеет индекс на 1 меньше чем, длина массива, так как отсчет начинается с нуля. Поэтому, если вы не знаете точное кол-во элементов, но вам надо обратиться к последнему элементу масива используется запись: v.length - 1.

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

Наиболее часто свойство length используется для перебора элементов массива в цикле:

1
2
3
4
var fruits = ["яблоко", "банан", "клубника", "персик"];
 
for(var i = 0; i < fruits.length; i++)
  document.write(fruits[i] + "<br>");         

В этом примере предполагается, что элементы массива расположены непрерывно и начинаются с первого элемента (с индексом 0). Если это не так, перед обращением к каждому элементу массива нужно проверять, определен ли он:

1
2
3
4
5
var fruits = ["яблоко", "банан", "клубника", "персик"];
 
for(var i = 0; i < fruits.length; i++)
  if (fruits[i] != undefined)
    document.write(fruits[i] + "<br>");     

Цикл можно также использовать и для инициализации элементов массива:

1
2
3
4
var bar = new Array(10);
 
for(var i = 0; i < bar.length; i++)
  bar[i] = i * 2;    

Усечение и увеличение массива

При работе с массивами, длина свойства length автоматически обновляется, поэтому нам самим не приходится об этом заботиться. Но стоит упомянуть об одной делати - свойство length доступно не только для чтения, но и для записи. Если свойству length указать значение меньше текущего, то массив укорачивается до новой (заданной) длины, любые элементы, не попадающие в новый диапазон индексов, отбрасываются и их значения теряются, даже если потом вернуть length обратно - значения не будут восстановлены.

1
2
3
4
5
6
var foo = [5, 2, 4, 9];
      
foo.length = 1; //укорачиваем до 1 элемента - [5]
foo.length = 4; //восстановим прежнее количество элементов
      
document.write(foo[3]); //прежнего значения нет  

Самым простым способом очистить массив будет: foo.length = 0.

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

Удаление элементов массива

Оператор delete записывает в элемент массива значение undefined, при этом сам элемент продолжает существование. Для удаления элементов так, чтобы остающиеся элементы сместились на освободившееся место необходимо воспользоваться одним из предопределенных методов массива. Метод Array.shift() удаляет первый элемент массива, pop() - последний элемент массива, метод splice() - один или диапазон элементов в любом месте массива. Подробно о том как пользоваться этими методами будет описано в следующей главе.

Многомерные массивы

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

1
2
3
4
5
6
7
var matrix = [
  [3, 3, 3],
  [1, 5, 1],
  [2, 2, 2]
];
      
document.write(matrix[1][1]); //выбран центральный элемент

Разберем, что написано в примере, matrix – это массив массивов чисел. Любой элемент matrix[n] – это массив чисел. Для доступа к определенному числу в массиве надо написать matrix[n][n], во вторых квадратных скобках указывается индекс элемента внутреннего массива.

1
2
3
4
5
6
7
8
9
10
11
12
13
//аналог предыдущей записи - создание с помощью конструктора
var table = new Array(3);
for(var i = 0; i < table.length; i++)
  table[i] = new Array(3);
 
// Инициализация массива
for(var j = 0; j < table.length; j++) {
  for(n = 0; n < table[j].length; n++) {
    table[j][n] = j * n;
  }
}
 
document.write(table[1][1]); //выбор центрального элемента

Ассоциативные массивы

Объекты можно использовать в качестве ассоциативных массивов. Немного теории - ассоциативные массивы (называемые также хэш-таблицами) позволяют вместо индексов использовать строки. Применение ассоциативных массивов очень похоже на использование имени свойства обычного объекта, но в данном случае при работе в формате массива. Поскольку в JavaScript нет методов для работы с ассоциативными массивами они применяются значительно реже, чем обычные, хотя точно также могут быть полезны для хранения информации и облегчают запоминание элементов, к которым нужно получить доступ.

1

2

3

4

5

6

7

8

var s_list = new Object();
 
s_list["fat"] = "Толстый";
s_list["small"] = "Маленький";
s_list["name"] = "Гомер";
 
for (var x in s_list) //выведем на экран все элементы
  document.write(s_list[x] + "<br>");