1. 3. СРЕДСТВА ЯЗЫКА JAVASCRIPT 

3.4. Массивы

  1. 3.4.1. Понятие массива 

  1. 1 

  1. 3.4.2. Создание и использование массивов 

  1. 2 

3.4.3. Двумерные массивы

3

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

6

3.4.5. Упражнения

6

3.4.6. Контрольные вопросы.

7

3.4.1. Понятие массива

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

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

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

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

имя_массива[индекс]

Нумерация элементов массива начинается с нуля. Пусть, к примеру, в качестве имени массива мы придумали name_arr. Тогда: первый элемент - это name_arr[0]; второй элемент - name_arr[1]; ...; последний элемент - name_arr[name_arr.length-1].

Для вычисления индекса последнего элемента массива в выше приведённом примере использовалась переменная name_arr.length, в которой хранится размер массива: размер массива - это число элементов массива.

Дело в том, что как только создаётся массив, он становится экземпляром объекта Array. Вновь создаваемые массивы наследуют все свойства и методы этого объекта. Если проще, то свойства объекта - это переменные, а методы  объекта - это функции.

И свойства и методы вычисляются лишь при указании имени экземпляра объекта, затем ставится точка и имя свойства или метода (при вызове метода следует указывать также параметры в круглых скобках. Вы это уже знаете, так как пользовались методами объекта Math). Таким образом, чтобы получить размер или число элементов массива нужно ввести name_arr.length.

Индекс может быть задан целым числом, целочисленной переменной или выражением, возвращающим целое число. Ну, целое в качестве индекса это и так ясно. О том, что для вычисления индексов можно использовать переменные и выражения вы уже тоже догадались (name_arr.length-1 - это ведь простое, но выражение с использованием переменной).

Пусть была создана переменная типа массив (далее просто массив) с четырьмя элементами:

var arr1=[8,2008,"март","год"]

Тогда значение второго элемента массива вы можете извлечь, указав его имя и  индекс в квадратных скобках:

a=arr1[1].

В результате переменной a будет присвоено значение 2008. В том, что вы обратились к нужному элементу массива можно убедиться, набрав alert(a). Конечно, можно обойтись и без промежуточной переменной: alert(arr1[1]).

3.4.2. Создание и использование массивов

Существует несколько способов создания массивов. Один способ уже применялся в предыдущем подразделе: var arr1=[8,2008,"март","год"].

Рассмотрим ещё два способа создания массивов, которые будут использоваться в заданиях настоящего раздела. Это способы создания нового массива, как объекта, с использованием ключевого слова new.

При создании любых новых объектов используется следующий синтаксис:
new Array(параметры).

При этом действуют следующие правила:

Рассмотрим способ создания массива, работу с ним и вывод на экран на примере массива дней недели:

Листинг 3.4.1

<html>

<head><title>Пример 3.4.1. Способы создания массивов</title>

</head>

<body>

<h1>Пример 3.4.1. Способы создания массивов</h1>

<script>

//

// первый способ создания массива

//

var days_of_week_russ = new Array(7);

days_of_week_russ[0]="Понедельник";

days_of_week_russ[1]="Вторник";

// остальные дни недели введите самостоятельно

// …

//

// второй способ создания массива

//

var days_of_week_engl = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

//

// далее - несколько примеров вывода значений элементов массива

//

alert(days_of_week_russ[0]); // вывод первого элемента русскоязычного массива

alert(days_of_week_russ[1]); // ... второго ...

i=2;

alert(days_of_week_russ[i]); // … третьего …

alert(days_of_week_russ[2*i-1]); // … шестого …

alert(days_of_week_russ); // вывод всех элементов русскоязычного массива

alert(days_of_week_engl); // вывод всех элементов англоязычного массива

alert("Выводим количество элементов массива days_of_week_russ");

alert(days_of_week_russ.length);

alert("Выводим последний элемент массива days_of_week_russ");

alert(days_of_week_russ[days_of_week_russ.length-1]);

</script>

</body>

</html>

Глядя на код строк программы в листинге 3.4.1, запомните то, что необходимо вам для создания переменной типа массив:

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

Обратите внимание, на то, что JavaScript  индексирует элементы (присваивает индексы), начиная с номера 0 (а не с 1).

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

Чтобы закрепить усвоение правил создания и использования одномерных массивов вам необходимо выполнить упражнение 3.4.1, которое вы найдёте в пункте 3.4.5. Упражнения.

3.4.3. Двумерные массивы

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

Каждому элементу массива можно присваивать значение, равное массиву, и таким образом создать двумерный массив. Двумерный массив можно представить в виде матрицы (математический образ) или в виде таблицы (графический образ).

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

Если представить двумерный массив в виде таблицы, то обращение к элементам двумерного массива происходит в соответствии со следующим синтаксисом:
имя_массива[индекс_строки][индекс_столбца].

Пример создания и использования двумерного массива приведён в листинге 3.4.2.

Листинг 3.4.2

<html><head>

<title>Пример 3.4.2. Работа с двумерными массивами</title>

<META http-equiv=Content-Type content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="Petrov.css">

</head>

<body>

<h4>Пример 3.4.2. Создание двумерного массива размерностью (4х3) и заполнение его элементов значениями целых  случайных чисел на заданном интервале</h4>

<script>

var a=-50; b=50;

var arr_2 = new Array(4);

arr_2[0]=new Array(3)

arr_2[1]=new Array(3)

arr_2[2]=new Array(3)

arr_2[3]=new Array(3)

 

arr_2[0][0]=a+Math.round((b-a)*Math.random());

arr_2[0][1]=a+Math.round((b-a)*Math.random());

arr_2[0][2]=a+Math.round((b-a)*Math.random());

 

arr_2[1][0]=a+Math.round((b-a)*Math.random());

arr_2[1][1]=a+Math.round((b-a)*Math.random());

arr_2[1][2]=a+Math.round((b-a)*Math.random());

 

arr_2[2][0]=a+Math.round((b-a)*Math.random());

arr_2[2][1]=a+Math.round((b-a)*Math.random());

arr_2[2][2]=a+Math.round((b-a)*Math.random());

 

arr_2[3][0]=a+Math.round((b-a)*Math.random());

arr_2[3][1]=a+Math.round((b-a)*Math.random());

arr_2[3][2]=a+Math.round((b-a)*Math.random());

 

document.write("<table>");

document.write("<tr><th>№ строки</th>");

document.write("<th>Столбец1</th>");

document.write("<th>Столбец2</th>");

document.write("<th>Столбец3</th></tr>");

 

document.write("<tr><td>Строка1</td><td>",arr_2[0][0],"</td><td>",arr_2[0][1],"</td><td>",arr_2[0][2],"</td></tr>");

document.write("<tr><td>Строка2</td><td>",arr_2[1][0],"</td><td>",arr_2[1][1],"</td><td>",arr_2[1][2],"</td></tr>");

document.write("<tr><td>Строка3</td><td>",arr_2[2][0],"</td><td>",arr_2[2][1],"</td><td>",arr_2[2][2],"</td></tr>");

document.write("<tr><td>Строка4</td><td>",arr_2[3][0],"</td><td>",arr_2[3][1],"</td><td>",arr_2[3][2],"</td></tr>");

 

document.write("</table>");

</script>

</body>

</html>

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

 

Рис. 3.4.1. Вывод в документ значений двумерного массива в виде таблицы. Значения округлены до целых с использованием метода Math.round().

В примере из листинга 3.4.2 вы познакомились ещё с одним полезным приёмом - для округления чисел до целых использован метод Math.round() Cинтаксис метода:  Math.round(округляемое_число).

В листинге  3.4.2 создаётся и выводится двумерный массив размерностью (4х3). Значения элементов массива создаются с помощью датчика случайных чисел Math,random(). Math,random() выдаёт случайное вещественное число, равномерно распределённое на интервале [0,1]. После выполнения выражения
a+(b-a)*Math.random() может быть получено вещественное случайное число на интервале [a,b]. Но поскольку нам нужно получить целые числа, было использовано выражение a+Math.round((b-a)*Math.random()). В результате мы получаем таблицу случайных целых чисел, равномерно распределённых на интервале [-50,50].

Для округления вещественных чисел с точностью до нужного числа знаков после запятой можно использовать метод toFixed(). Синтаксис метода -  имя_переменной.toFixed(точность), где точность — параметр, определяющий число знаков после десятичной точки с округлением последней цифры по правилам округления.

В листинге 3.4.3 числа вычисляются с точностью до сотых. Точность указывается в качестве параметра метода.

Листинг 3.4.3.

<html><head>

<title>Пример 3.4.3. Работа с двумерными массивами. Округление чисел методом toFixed().</title>

<META http-equiv=Content-Type content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="Petrov.css" />

</head>

<body>

<h4>Пример 3.4.2. Работа с двумерными массивами. Округление чисел с использованием метода toFixed() объекта Number</h4>

<script language="Javascript">

var a=-50.00; b=50.00;

var arr_2 = new Array(3);

arr_2[0]=new Array(3)

arr_2[1]=new Array(3)

arr_2[2]=new Array(3)

 

arr_2[0][0]=a+(b-a)*Math.random();

arr_2[0][1]=a+(b-a)*Math.random();

 

arr_2[1][0]=a+(b-a)*Math.random();

arr_2[1][1]=a+(b-a)*Math.random();

 

arr_2[2][0]=a+(b-a)*Math.random();

arr_2[2][1]=a+(b-a)*Math.random();

 

document.write("<table>");

document.write("<tr><th>№ строки</th>");

document.write("<th>Столбец1</th>");

document.write("<th>Столбец2</th></tr>");

document.write("<tr><td>Строка1</td><td>",

arr_2[0][0].toFixed(2),"</td><td>",arr_2[0][1].toFixed(2),"</td></tr>");

document.write("<tr><td>Строка2</td><td>",

arr_2[1][0].toFixed(2),"</td><td>",arr_2[1][1].toFixed(2),"</td></tr>");

document.write("<tr><td>Строка3</td><td>",

arr_2[2][0].toFixed(2),"</td><td>",arr_2[2][1].toFixed(2),"</td></tr>");

document.write("</table>");

</script>

</body>

</html>

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

 

Рис. 3.4.3. Вывод в документ значений двумерного массива в виде таблицы. Значения округлены до сотых с использованием метода toFixed().

В завершение усвоения правил создания и использования двумерных массивов необходимо выполнить упражнение 3.4.2, которое вы найдёте в пункте 3.4.5. Упражнения.

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

В ассоциативном массиве используются не целочисленные, а строковые индексы. Во многих случаях использовать ассоциативные массивы более удобно, чем обычные, с целочисленными индексами. Логично, например, присвоить элементам ассоциативного массива развёрнутые наименования университетов. Для вашего университета это присвоение может быть таким:

var arr_univers=new Array();
arr_univers["KMGTU"] = "Kerch state maritime technological university";

Тогда наименование университета можно легко получить, поскольку такой индекс легче запомнить, чем целое число. Например, для вывода в текущем документе это можно сделать так:

document.write(arr_univers["KMGTU"]);

3.4.5. Упражнения

Упражнение 3.4.1. Используя код листинга 3.4.1 создайте веб-страницу, изменив код так, чтобы вывод осуществлялся с использованием метода document.write(), а не метода alert(). При этом не забудьте полностью заполнить русскоязычный массив (читайте комментарии в коде примера).

Задание рекомендуется выполнять в такой последовательности:

Вам необходимо также ответить на первые семь контрольных вопроса. Поместите ответы на  контрольные вопросы на страницу с настоящим упражнением.

Не забудьте также про ссылки для возвращения и стилевое оформление, оформив эту страницу также, как вы это делали при выполнении предыдущих заданий. Файл с упражнением должен иметь имя exercise_3_4_1.html.

В таблице на странице со списком выполненных упражнений (файл exercises.html) вставьте очередную строку: в левой ячейке должно быть наименование упражнения (упражнение 3.4.1), в правой — краткая формулировка того, что делается в упражнении.

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

Упражнение 3.4.2. Используя код листинга 3.4.3 создайте веб-страницу изменив код таким образом, чтобы в таблице было не 3, а 6 строк и не 2, а 3 столбца со случайными числами. Кроме этого, случайные числа в каждом столбце должны различаться точностью и принадлежать различным интервалам:

Нееобходимо также ответить на последние семь контрольных вопроса. Поместите ответы на  контрольные вопросы на страницу с настоящим упражнением.

Упражнение необходимо оформить  также, как и предыдущее задание.

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

3.4.6. Контрольные вопросы

  1. 1.Понятие “массив”? 

  2. 2.Способы создания одномерного массива? 

  3. 3.Как определить длину одномерного массива? 

  4. 4.Индекс первого по счёту элемента одномерного массива? 

  5. 5.Индекс последнего по счёту элемента одномерного массива? 

  6. 6.Напишите оператор присваивания какого-либо значения первому по счёту элементу одномерного массива. 

  7. 7.Напишите оператор присваивания какого-либо значения последнему по счёту элементу одномерного массива. 

  8. 8.Правила создания двумерного массива? 

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

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

  11. 11.Метод в языке Javascript предусмотренный для генерации случайного числа? 

  12. 12.Метод в языке Javascript предусмотренный для округления вещественного числа до целого? 

  13. 13.Метод в языке Javascript предусмотренный для округления вещественного числа до вещественного с заданной точностью? 

  14. 14.Генерация случайного числа на занном интервале?