Главная страница   /   5.6. Работа с массивами (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

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

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

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

	</script>
</body>
</html>

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

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

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

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

Листинг 5-27: Использование литеральной нотации при создании массива
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myArray = [100, "Adam", true];
	</script>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблица 5-5: Использование методов массива
Метод Описание Возвращает
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