Руководство по HTML5
Адам Фриман
Работа с массивами
Массивы в 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 |