Файл: Особенности и примеры использования массивов при разработке программ(Определение массивов и их виды).pdf

// различные типы элементов

var Array_mix = [1, 'Имя', {name: 'Коля'}, true];

// таким образом получаем элемент из массива и его свойство

alert (Array_mix[2].name); // выдает имя Коля

2.2 Методы pop/push, shift/unshift

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

Рисунок 2 – Представление массива в виде очереди

В реальных практических задачах программирования такая структура данных используется очень часто. Примером может быть очередь пришедших сообщений, которые необходимо последовательно выбирать и показывать на экране. Часто используется программистами и такая структура данных, которая называется стеком [13]. Под стеком понимается такая структура данных, когда данные в массив добавляются каждый раз в конец и берутся для обработки, тоже с конца. Самым простым примером является колода карт.

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

Рисунок 3 – Представление массива в виде стека

Удаление элементов массива методом pop. Методом pop удаляется последний элемент массива, при этом возвращается его значение:

var phones = ["iPhone", "Nokia", "Samsung"];

alert(phones.pop()); // удалили "Samsung"

alert(phones); // остаются элементы iPhone, Nokia

Добавление элементов массива с помощью метода push. Метод используется для добавления элементов в конец массива:

var phones = ["iPhone", "Nokia"];

phones.push("Samsung");

alert(phones); // будет выдан список iPhone, Nokia, Samsung

Использование метода к массиву phones.push даст тот же результат, что использование метода length вида: phones[phones.length].

Использование метода shift для удаления элементов из начала массива. Метод shift используется для удаления первого элемента и возвращения его значения.

var phones = ["iPhone", "Nokia", "Samsung"];

alert(phones.shift()); // удаляется iPhone

alert(phones); // Nokia, Samsung

Использование метода unshift для добавления элементов из начала массива. Метод unshift используется для добавления первого элемента в массив.

var phones = ["Nokia", "Samsung"];

phones.unshift('iPhone');

alert(phones); // iPhone, Nokia, Samsung

Методы push и unshift могут использоваться для добавления нескольких элементов в массив одновременно:

var phones = ["iPhone"];

phones.push ("Nokia", "Lenovo");

phones.unshift ("ZTE", "Honor");

В результате получим массив:

phones = ["ZTE", "Honor", "iPhone", "Nokia", "Lenovo"];

alert(phones); // ZTE, Honor, iPhone, Nokia, Lenovo

Вывод массива с пропущенными элементами. Если в массиве есть пропущенные элементы, то при выводе в большинстве браузеров вместо элементов будут выводиться только запятые, например:

var arr_pusto = [];

arr_pusto[0] = 0;

arr_pusto[5] = 5;

alert(arr_pusto); // 0,,,,,5

Эти запятые появляются потому, что алгоритм вывода массива идёт от 0 до arr_pusto.length и выводится всё через запятую. Отсутствующие значения заменяются несколькими запятыми подряд.

Перебор элементов одномерного массива. Для перебора элементов одномерного массива обычно используется цикл:

var phones = ["iPhone", "Nokia", "Samsung"];

for (var i = 0; i < phones.length; i++) {

alert(phones[i]);

}

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

var matrix3x3 =

[

[1, 2, 3],

[4, 5, 6],

[7, 8, 9]

];

Пример обращения к одному из элементов такого числового многомерного массива приведен ниже:

alert(matrix3x3[1][1]); // центральный элемент

Создадим другой пример многомерного массива, содержащего даты рождения студентов.

var students =

[

["Колдыркаев Н.Н.", "2002", "август", "16"],

["Перекуренко М.Д.", "2002", "август", "9"]

];

alert(students[0] + "\r\n" + students[1]);

Результатом выполнения этого кода является таблица (без рамок), содержащая даты рождения студентов в виде:

Колдыркаев Н.Н., 2002, август, 16,

Перекуренко М.Д., 2002, август, 9

Безусловно, таблица имеет не вполне «читабельный» вид, так как отсутствуют наименования столбцов и четкое разделение полей на ячейки таблицы, но ее можно усовершенствовать.

Как получить последний элемент произвольного массива, если размер его неизвестен? Для этого можно использовать метод length.

Рассмотрим для примера тот же массив phones. Предположим, что количество элементов в нем неизвестно, но можно это узнать, применив метод length – phones.length. Последний элемент имеет индекс на 1 меньше, чем размер массива:

Например:

var phones = ["iPhone", "Nokia", "Samsung", "ZTE", "Lenovo”];

Длина этого массива phones.length равна 5. Здесь “iPhone” имеет индекс 0, “Nokia” – индекс 1, “Samsung” – индекс 2, ”ZTE”- индекс 3, ”Lenovo”- индекс 4.

То есть, для массива длины phones:

var lastphone = phones[phones.length - 1]; // получаем последний элемент

2.3 Выполнение кода JavaScript в браузере

Базовый синтаксис языка HTML. Для того, чтобы запустить код JavaScript в среде браузера, рассмотрим только основные понятия языка HTML (HyperText Markup Language) и типовую структуру веб-страницы. Типичная веб-страница представляет собой текстовый файл в формате HTML, который используется для формирования структуры веб-страниц. Любой файл, документ на языке HTML представляет собой набор элементов кода, обозначаемых специальным образом. Начало и конец каждого элемента обозначается специальными символами — тегами. Кроме того, элементы кода с тэгами могут иметь атрибуты в теле начала и конца тэга. Эти атрибуты обозначают определенные свойства (например, размер шрифта, фон, цвет и прочее). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

<strong>Текст</strong> или

<a href="http://www.example.com. Элемент содержит атрибут href, то есть гиперссылку.

</a>

Разметка HTML позволяет располагать контент страницы в необходимом вам порядке. Базовый шаблон HTML страницы выглядит так:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Заголовок Страницы</title>

</head>

<body>

Содержание страницы

</body>

</html>

Вставка кода JavaScript в html-страницу и просмотр в браузере. Так как эта курсовая посвящается использованию массивов в программировании и, в частности в языке JavaScript, то достаточно знать, каким образом добавляется код JavaScript в html-страницу и как просматривать исполнение кода страницы с помощью браузера. Один из вариантов, это просто встраивание кода JavaScript в HTML-страницу при помощи тега <script>, например:

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Заголовок Страницы</title>

</head>

<body>

Содержание страницы

<script>

Код JavaScript

</script>

</body>

</html>

В этом варианте тег <script> содержит сам код JavaScript. Браузер сканирует весь файл и когда доходит до тега <script>, он выполняет, интерпретирует этот код.

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

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Заголовок Страницы</title>

</head>

<body>

Содержание страницы

<script src="/path_to_file/my_script.js"></script>

</body>

</html>

В данном случае подключение происходит тоже с помощью тега <script>, к которому добавляют атрибут src. В этом атрибуте прописывают относительный или абсолютный путь к файлу JavaScript. Сначала браузер загружает этот файл, а затем выполняет.

Базовый синтаксис JavaScript. Исходный код скриптов сканируется слева направо и преобразуется в последовательность найденных элементов, которые несут в себе определенный смысл для языка JavaScript, например, ключевые слова (if, else, while, returnи прочие), литералы (true, false, null и т.д.), пробелы, окончания строк или комментарии. А также JavaScript чувствителен к регистру и использует кодировку символов Unicode. Каждая программа — это набор команд. В JavaScript команды разделяются точкой с запятой (;). Чтобы упросить чтение и понимание кода используются комментарии. Для оформления однострочных комментариев используются //, многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */.

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

<!DOCTYPE html>

<head>

<meta charset="utf-8">

<title>Заголовок Страницы</title>

</head>

<body>

Cодержание страницы

<script>

alert("1.Элементы нумеруются, начиная с нуля, чтобы получить нужный элемент из массива – указывается его номер в квадратных скобках:");

var phones = ["iPhone", "Nokia", "Samsung"];

alert( phones[0] ); // iPhone

alert( phones[1] ); // Nokia

alert( phones[2] ); // Samsung

alert( phones ); // iPhone,Nokia,Samsung

alert("2.pop Удаляет последний элемент из массива и возвращает его:");

alert( phones.pop() ); // удалили "Samsung"

alert( phones ); // iPhone, Nokia

alert("3.push Добавляет элемент в конец массива:");

phones.push("ZTE");

alert( phones ); // iPhone, Nokia, ZTE

alert("4.Перебор элементов. Для перебора элементов обычно используется цикл:");

for (var i = 0; i < phones.length; i++) {

alert( phones[i] );

}

alert("5.Пример многомерного массива:");

var students = [

["Колдыркаев Н.Н.", "2002", "август", "16"],

["Перекуренко М.Д.", "2002", "август", "9"]

];

alert(students[0]+"\r\n"+students[1]);

</script>

</body>

</html>

3. Практические примеры использования массивов в языках программирования

Рассмотрим несколько примеров использования массивов, на примере языка программирования JavaScript.

3.1 Выбор положительных элементов массива

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

alert ("Раздел 3.1: последнее положительное число и его индекс");

var A = [1, -2, -5, 2, -3, 3, 13, -7]; // исходный массив

alert(A);

var B = []; // если положительные, складываем сюда

var I = []; // если положительные, индексы складываем сюда

var j = 0; // индексы массивов B и I

for (var i = 0; i < A.length; i++) {

if (A[i] > 0) {B[j]=A[i]; I[j]=i; j++;}

}

// Формируем окончательный вывод

var R ="ВСЕ ЭЛЕМЕНТЫ ИСХОДНОГО МАССИВА А: "+A+"\r\nВСЕ ПОЛОЖИТЕЛЬНЫЕ ЭЛЕМЕНТЫ ИСХОДНОГО МАССИВА СОБЕРЕМ В МАССИВЕ B: "+B

+"\r\nВСЕ ИНДЕКСЫ ПОЛОЖИТЕЛЬНЫХ ЭЛЕМЕНТОВ ИЗ ИСХОДНОГО МАССИВА СОБЕРЕМ В МАССИВЕ I: "+I+

"\r\nПОСЛЕДНИЙ ПОЛОЖИТЕЛЬНЫЙ ЭЛЕМЕНТ: "+B[B.length-1]+"\r\nИНДЕКС ПОСЛЕДНЕГО ПОЛОЖИТЕЛЬНОГО В ИСХОДНОМ МАССИВЕ: "+I[I.length-1]; // все элементы

alert(R);

3.2 Сортировка числового массива по убыванию

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

alert ("Раздел 3.2: Сортировка числового массива по убыванию");

var C =[1, -2, -5, 2, -3, 3, 13, -7];

A=BubbleSort(A);

function BubbleSort(A) // A - массив, который нужно

{ // отсортировать по УБЫВАНИЮ.

var n = A.length;

for (var i = 0; i < n-1; i++)

{ for (var j = 0; j < n-1-i; j++)

{ if (A[j+1] > A[j])

{ var t = A[j+1]; A[j+1] = A[j]; A[j] = t; }

}

}

return A; // На выходе сортированный по возрастанию массив A.

}

alert("БЫЛО: "+C+"\r\nСТАЛО: "+A);

Полные коды скриптов, описанных в разделах 2.1-2.2 представлены в приложении.

3.3 Получение случайного элемента массива