Массивы в JavaScript

Данный раздел не случайно вынесен на отдельную страницу. Значение массивов для практического программирования сложно переоценить, так как многие действия производятся над данными, более сложными, чем те, которые удобно хранить в переменных. Большáя часть этого сайта построена с использованием массивов.

По существу, массивы проще всего представить себе в виде таблиц. Последние состоят из определенного количества строк (row) и колонок или столбцов (column). С обсуждаемой позиции, простейшая таблица состоит из одной колонки. К сожалению, JavaScript напрямую поддерживает только такие массивы, называемые одномерными.

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

Создать массив можно несколькими способами. Но, прежде, чем это делать, надо решить сколько в нем будет элементов. Говоря иначе, какова будет его длина или размерность.

Создание пустого массива неизвестного размера.

	var ar = new Array();

Теперь мы можем к нему обратиться по имени массива и номеру элемента. Поскольку никакие значения не определены, мы будем получать значение undefined.

Элементам можно задать значения. Для обращения к массиву используют квадратные скобки:

	ar[1] = 15;
	ar[3] = "третий";

теперь массив состоит из двух элементов (1-го и 3-го). Отсутствие второго никого не смущает, а попытка запроса его значения возвратит undefined.

Создание пустого массива из 6 элементов:

	var ar = new Array(5);

Да-да, никакой ошибки здесь нет: элементов именно 6, а не 5, как передано конструктору в качестве атрибута. Дело в том, что в JavaScript (как и в некоторых других языках), элементы массива нумеруются не с единицы, а с нуля, то есть мы получили элементы: ar[0], ar[1], ar[2], ar[3], ar[4], ar[5].

Длина массива лишь не должна превышать 232–1 (4 294 967 295) элементов.

И, наконец, создадим массив, сразу определив его значения:

	var ar = new Array(1,5,20);

Здесь был создан массив из трех числовых элементов (естественно, с номерами 0, 1 и 2). Такой способ крайне удобен (из-за компактности и наглядности) для небольших массивов с заранее известными значениями.

Вместе с тем, инструкцию new можно и не использовать, например,

	var b = [1, 'two', false]	//Создание массива b из трех элементов разного типа

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

Под длиной массива понимают количество его элементов. Если ни одному из них после создания не присвоено значение, длина равна нулю.

Чтобы определить текущую длину конкретного массива, нужно обратиться к его свойству length. Синтаксис этого обращения таков:

	ИмяМассива.length

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

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

	var ar = new Array(); //Массив создан, но пуст
	alert(ar.length);
	ar[1] = 15; //Инициализация второго элемента даст длину 2
	alert(ar.length);
	ar[500] = 2; //Теперь длина равна 500+1 = 501
	alert(ar.length);

Запуск программы:

Запомним нужное число в переменную:

	var ar = new Array();
	ar[1] = 15;
	a = ar.length; //В пременной а запомнится число 2

Классический случай: надо обработать все элементы массива (пускай увеличить вдвое), то есть повторить умножение столько раз, сколько элементов в цикле. Зачастую их количество может быть разным и, если задать условием завершения цикла именно это свойство, проблема будет решена.

В приведенном примере счетчиком цикла является переменная i, наращиваемая каждый цикл на 1 (i++),пока она не достигнет длины массива. Внутри цикла мы, при помощи счетчика, обращаемся к единичному элементу и изменяем только его.

	for(var i = 0; i < ar.length; i++)
	  {ar[i] = ar[i]*2;}

Пример не наглядный, поэтому создадим новое окно, в котором запишем через черту (минус) старое и новое значения, отведя для каждого элемента одну строку.

	var ar = new Array(1,2,3,4,5,6,7,8,9,10); //Массив со значениями
	var wbc; //Имя будущего окна (объекта) для удобства ссылки
	wbc = window.open('','','scrollbars=0,resizable=0,height=400,width=300');
	for(var i = 0; i < ar.length; i++)
	  {
	  wbc.document.write(ar[i] + ' &ndash; ') //Было
	  ar[i] = ar[i]*2; //Увеличим вдвое
	  wbc.document.write(ar[i] + '<br>') //Стало
	  }
	wbc.focus(); //Выводим новое окно на передний план

Запуск программы:

Изменение элементов массива

Как уже было приведено в примере выше, для изменения элемента нужно произвести прямое присвоение ему значения через оператор "=".

	var ar = new Array();
	ar[0] = 15;
	ar[1] = 7;

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

Массивы создаются на основе класса Array и могут обрабатываться методами, содержащимися в этом классе.

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

Метод Array.join()

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

	var ar = new Array(1,2,3);
	var jar = ar.join() //Результатом будет jar == '1,2,3'

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

	var ar = new Array(1,2,3);
	var jar = ar.join(', ') //Результатом будет jar == '1, 2, 3'
	alert(ar);
	alert(jar);

Запуск программы:

Противоположным является метод String.split('разделитель'), разбивающий строку на массив, используя разделитель в качестве метки конца фрагмента для выделения.

Метод Array.sort()

Позволяет произвести сортировку массива в алфавитном порядке. Это может избавить от необходимости следить за порядком или исправить его нарушение в случае добавления элементов.

Если данные не являются строкой, то они временно преобразуются в неё для сравнения.

	var ar = new Array('b','a','c');
	alert(ar);
	ar.sort(); //Сортируем и получаем порядок 'a, b, c'
	alert(ar);

Запуск программы:

Неопределенные элементы переносятся в конец.

То, что касается чисел, обсуждалось на уроках: '11' < '2'.

Для того, чтобы отсортировать не в алфавитном порядке, необходимо передать методу функцию сравнения в качестве аргумента. Функция должна вернуть число: 0, положительное или отрицательное. Ноль означает равенство сравнения (эквивалентность); положительное число означает, что первый элемент должен быть после второго; отрицательное число, что первый предшествует второму.



Метод Array.reverse()

Меняет порядок элементов на противоположный.

	var ar = new Array('a','b','c');
	alert(ar);
	ar.reverse(); //Результатом будет порядок элементов 'c, b, a'
	alert(ar);

Запуск программы:

Метод Array.splice()

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

Функции может передаваться до трех смысловых аргументов.

	ИмяМассива.splice(начало, УдаляемоеКоличество, значения_через_запятую)

Первый аргумент (начало) является обязательным и задаёт номер элемента, с которого начинается вставка или удаление.

УдаляемоеКоличество – необязательный аргумент. Оно должно быть целым числом. Если число не задано, то происходит удаление от "начало" до конца массива.

	var ar = new Array(1,2,3,4,5,6,7,8);
	alert(ar);
	ar.splice(4,2); //Удаляем 2 элемента, начиная с 4
	alert(ar); //Результат: '1,2,3,4,7,8'
	z = ar.splice(4); //Запомним в z результат обрезки остатка с 4 элемента
	alert(z); //Покажем его: '7,8'
	alert(ar); //В ar остались 4 элемента (ar[0]-ar[3]) '1,2,3,4'
		//Всё с ar[4] - отрезалось

Запуск программы:

Произведем вставку и замену значений:

	ar.splice(1,0,11,12); //Начиная с ar[1], удалим 0 элементов и вставим два (11 и 12)
	alert(ar); //Результат: '1,11,12,2,3,4'
	ar.splice(1,2,22,33); //Опять начиная с ar[1], удалим 2 элемента (ранее вставленные)
                               // и вставим два новых (со значениями 22 и 33)
	alert(ar); //Результат: '1,22,33,2,3,4'

Запуск программы:





Copyright © 1993–2020 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.