Главная страница   /   4.6. Работа с массивами (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

4.6. Работа с массивами

Массивы в JavaScript работают очень схожим образом, как и в других языках программирования. В листинге 4-27 показано, как я создал и заполнил массив.

Листинг 4-27: Создание и заполнение массива
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var myArray = new Array();
		myArray[0] = 100;
		myArray[1] = "Adam";
		myArray[2] = true;

	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Я создал новый массив при помощи new Array(). Это пустой массив, который я присвоил переменной myArray. В последующих выражениях я присвоил значения разным элементам массива.

В этом примере есть пару моментов, на которые стоит обратить внимание. Первое, мне не нужно сразу же объявлять количество элементов массива при его создании. Второй момент, мне не нужно сразу указывать на тот тип данных, которые будет содержать массив. Любой массив JavaScript может содержать различные типы данных. В этом примере я использовал три типа данных: number, string, и boolean.

Использование литерального массива

Литеральная нотация позволяет создавать и заполнять массив сразу же в одном выражении, как показано в Listing 4-28.

Листинг 4-28: Использование литеральной нотации при создании массива
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var myArray = [100, "Adam", true];

	</script>
</head>
<body>
	This is a simple example
</body>
</html>

В этом примере я присвоил переменной myArray массив с нужными мне элементами, заключив их в квадратные скобки ([ и ]).

Чтение и изменение содержания массива

Прочитать значение нужного индекса можно при помощи квадратных скобок ([ и ]), разместив нужный индекс в этих скобках, как показано в листинге 4-29.

Листинг 4-29: Чтение данных по индексу массива
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myArray = [100, "Adam", true];
		console.log("Index 0: " + myArray[0]);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

Листинг 4-30: Изменение содержания массива
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myArray = [100, "Adam", true];
		myArray[0] = "Tuesday";
		console.log("Index 0: " + myArray[0]);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

В этом примере для индекса 0 массива я назначил строковое значение (string), а до этого там было числовое (number).

Перечисление содержимого массива

Вы перечисляете содержимое массива, используя цикл for. В листинге 4-31 показано, как применять цикл for для отображения содержимого простого массива.

Листинг 4-31: Перечисление содержимого массива
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myArray = [100, "Adam", true];
		for (var i = 0; i < myArray.length; i++) {
			console.log("Index " + i + ": " + myArray[i]);
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Данный цикл работает в JavaScript так же, как и во многих других языках. Чтобы определить, сколько элементов содержит массив, нужно использовать свойство length. Результат выполнения скрипта этого листинга таков:

Index 0: 100 Index 1: Adam Index 2: true

Использование методов массива

В JavaScript объект Array определяет несколько методов для работы с массивами. В таблице 4-4 описаны наиболее полезные из них.

Таблица 4-4: Использование методов массива
Метод Описание Возвращает
concat(otherArray) Объединяет содержимое массива с содержимым массива, содержащимся в аргументе. В качестве аргумента можно указать несколько массивов Array
join(separator) Соединяет все элементы массива и формирует из них строку. В качестве элемента указывается символ, служащий для разделения элементов string
pop() Рассматривает массив как стек, удаляет и возвращает последний элемент массива object
push(item) Рассматривает массив как стек и добавляет указанный элемент в массив void
reverse() Переворачивает порядок элементов в массиве Array
shift() Такой же, как pop(), но работает с первым элементом массива object
slice(start,end) Возвращает часть массива Array
sort() Упорядочивает элементы массива Array
unshift(item) Как push(), но вставляет новый элемент в начало массива void