§06. Массивы. Обработка данных.

Учимся программировать вместе с JavaScript
Глава I. Обо всём понемногу.

§06. Массивы. Обработка данных.

Массив. Создание массива случайных чисел. Сортировка данных в массиве.

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

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

Создаётся массив так же, как и обычная переменная с помощью слова var, только после имени массива ставятся знак равно и квадратные скобки, в которых через запятую перечисляются значения элементов. К формированию имён массивов предъявляются те же требования, что и к именам переменных. Пример: 

 

var m = [12,43,32]; 

 

В данном примере создан массив с именем m, в котором содержатся три элемента со значениями 12, 43 и 32 соответственно. 

Если значения элементов заранее не известны, то их можно не писать, указав только нужное количество запятых: 

 

var m = [,,]; 

 

В данном примере так же создан массив с тремя элементами, которые не имеют значений. 

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

 

m[0] = 12; 

m[1] = 43; 

m[2] = 32; 

document.write(m[0]); 

document.write(m[1]); 

document.write(m[2]); 

 

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

 

var i = 1; 

document.write(m[i]); 

document.write(m[i]); 

 

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

 

var m = []; 

 

Создание массива случайных чисел. 

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

 

<script> 

//Функция генерации случайного числа от 0 до 100 

function int_random() 

{ 

  return Math.round(Math.random()*100); 

} 

 

var random_mass = [];//Случайный массив 

//Заполняем массив 

for (var c = 0; c < 10; c = c+1)  

     random_mass[c] = int_random();  

//Выводим массив на экран 

for (var c = 0; c < 10; c = c+1)  

 document.write('random_mass[',c,'] = ',random_mass[c],'<br>');  

</script> 

 

 

Сортировка данных в массиве. 

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

Существуют различные алгоритмы сортировок. Здесь мы рассмотрим один из них. Для его реализации будем просматривать каждый элемент массива и сравнивать его со следующим. Если следующий элемент окажется меньше, то будем менять элементы местами. Когда будут просмотрены все элементы, начнём снова просмотр с первого элемента, и так же будем менять местами, если последующий элемент больше. И так до тех пор, пока массив не окажется полностью отсортированным. 

Далее приведём блок-схему алгоритма сортировки массива: 

 

 

На схеме приняты следующие обозначения: 

b – переменная для хранения информации о том, попались ли не отсортированные элементы при просмотре всего массива; 

с – переменная счётчик для доступа к элементам массива; 

massсам массив; 

size_mколичество элементов в массиве. 

 

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

 

<script> 

//функция генерации случайного числа от 0 до 100 

function int_random() 

{ 

  return Math.round(Math.random()*100); 

} 

 

var mass = [];   //Массив 

var size_m = 4;  //Размер массива 

 

//Функция вывода массива в окно браузера 

function write_mass() 

{ 

   for (var c = 0; c < size_m; c = c+1) 

       document.write('mass[',c,'] = ',mass[c],'<br>'); 

   document.write('<br>'); 

} 

 

//Заполняем массив 

for (var c = 0; c < size_m; c = c+1)  

     mass[c] = int_random();  

//Выводим массив в окно браузера 

document.write('Первоначальный массив:<br>'); 

write_mass(); 

 

//Сортировка массива 

var b;//если массив не отсортирован, то равна 1 

var count_while = 0;//Количество проходов цикла while 

var count_change = 0;//Количество раз замены элементов местами 

do { 

  b = 0;//Обнуляем переменную 

  count_while = count_while +1;//номер прохода 

  for (var c = 0; c < (size_m-1); c = c+1) 

  { 

    //Если элемент больше следующего 

    if (mass[c] > mass[c+1])  

    { 

      count_change = count_change +1; 

      b = 1; 

      //Меняем элементы местами 

      var temp = mass[c]; 

      mass[c] = mass[c+1]; 

      mass[c+1] = temp; 

      //Выводим результат замены местами элементов 

      document.write('Замена местами элементов №',count_change,'<br>'); 

      document.write('Были заменены элементы ',c,' и ',c+1,'<br>'); 

      write_mass(); 

    } 

  } 

  //Выводим промежуточный вид массива в цикле while 

  document.write('Результат ',count_while,' прохода цикла while<br>'); 

  write_mass(); 

} while (b>0) 

 

</script> 

 

 

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

 

Первоначальный массив: 
random_mass[0] = 19 
random_mass[1] = 87 
random_mass[2] = 7 
random_mass[3] = 38 
 
Замена местами элементов №1 
Были заменены элементы 1 и 2 
random_mass[0] = 19 
random_mass[1] = 7 
random_mass[2] = 87 
random_mass[3] = 38 
 
Замена местами элементов №2 
Были заменены элементы 2 и 3 
random_mass[0] = 19 
random_mass[1] = 7 
random_mass[2] = 38 
random_mass[3] = 87 
 
Результат 1 прохода цикла while 
random_mass[0] = 19 
random_mass[1] = 7 
random_mass[2] = 38 
random_mass[3] = 87 
 
Замена местами элементов №3 
Были заменены элементы 0 и 1 
random_mass[0] = 7 
random_mass[1] = 19 
random_mass[2] = 38 
random_mass[3] = 87 
 
Результат 2 прохода цикла while 
random_mass[0] = 7 
random_mass[1] = 19 
random_mass[2] = 38 
random_mass[3] = 87 
 
Результат 3 прохода цикла while 
random_mass[0] = 7 
random_mass[1] = 19 
random_mass[2] = 38 
random_mass[3] = 87 

 

Задачи. 

1. Создать массив случайных целых чисел со случайным количеством элементов. Найти в нём элемент с определённым значением. Если такой элемент в массиве существует, то вывести сообщении с его номером, если такого элемента нет, то вывести элемент с ближайшим значением. 

2. Создать массив случайных целых чисел и инвертировать в нём элементы. Т.е. элемент, который был первым должен стать последним. Элемент, который был вторым должен стать предпоследним и т.д. Количество элементов должно быть случайным. 

3. Создать программу сортировки массива по убыванию значений. За основу можете взять программу, приведённую в параграфе, убрав из неё вывод промежуточных результатов. Размер массива можете сделать случайным. 

4. Создать массив с фамилиями и именами. В первом элементе должна содержаться фамилия, во втором – имя. Затем в третьем, и четвёртом снова фамилия и имя. И т.д. При таком принципе построения массива все элементы с чётными индексами, включая ноль, будут фамилиями, а все элементы с нечётными – именами. 

Создать функцию вывода массива в окно браузера в виде таблицы. 

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

 

'<table border = "2">'//Правильно 

'<table border = '2'>'//Не правильно 

 

Создать функции сортировки элементов по фамилии и имени. Создать программу, демонстрирующую их работу. 

 

Примеры решений. 

1. 

<script> 

//Функция генерации случайного числа в диапазоне 

function int_random_range(X,Y) 

{ 

  return Math.round((Math.random()*100)*(Y-X)/100)+X; 

} 

 

var mass = [];   //Массив 

var size_m = int_random_range(5,10);  //Размер массива 

 

//Функция вывода массива в окно браузера 

function write_mass() 

{ 

   for (var c = 0; c < size_m; c = c+1) 

       document.write('mass[',c,'] = ',mass[c],'<br>'); 

   document.write('<br>'); 

} 

 

//Заполняем массив 

for (var c = 0; c < size_m; c = c+1)  

     mass[c] = int_random_range(0,100);  

//Выводим массив в окно браузера 

document.write('Случайный массив из ',size_m,' элементов:<br>'); 

write_mass(); 

 

//Случайное число 

var number = int_random_range(0,100); 

//Выводим случайное число 

document.write('Случайное число: ',number,'<br>'); 

 

//Ищем элемент со значением number 

//переменная i будет содержать индекс нужного элемента 

var i = -1; 

for (var c = 0; c < size_m; c = c+1)  

            if (number == mass[c]) i = c; 

 

 

if (i == -1) 

/*Если i равна -1, то элемента со значением number нет 

В таком случае ищем ближайший элемент и выводим его*/ 

{ 

  var dif_min = 100;//Минимальная разность между элементом и number 

  for (var c = 0; c < size_m; c = c+1)  

  { 

    var dif = mass[c]-number; 

    if (dif < 0) dif = -1*dif;//Находим модуль dif  

    if (dif_min > dif) 

    { 

      dif_min = dif; 

      i = c; 

    } 

  } 

  //Выводим результат 

  document.write('Ближайшее значение имеет элемент mass[',i,']=',mass[i]); 

} 

else 

/*Если i неравна -1, то элемент со значением number есть 

В таком случае просто выводим результат*/ 

  document.write('Элемент со значением ',number,' существует он имеет индекс ',i); 

   

</script> 

 

 

2. 

<script> 

//Функция генерации случайного числа в диапазоне 

function int_random_range(X,Y) 

{ 

  return Math.round((Math.random()*100)*(Y-X)/100)+X; 

} 

 

var mass = [];   //Массив 

var size_m = int_random_range(5,20);  //Размер массива 

 

//Функция вывода массива в окно браузера 

function write_mass() 

{ 

   for (var c = 0; c < size_m; c = c+1) 

       document.write('mass[',c,'] = ',mass[c],'<br>'); 

   document.write('<br>'); 

} 

 

//Заполняем массив 

for (var c = 0; c < size_m; c = c+1)  

     mass[c] = int_random_range(0,100);  

//Выводим массив в окно браузера 

document.write('Первоначальный массив из ',size_m,' элементов:<br>'); 

write_mass(); 

 

//Переставляем элементы местами 

var temp; 

for (var c = 0; c<(size_m/2); c = c+1) 

{ 

  temp = mass[c]; 

  mass[c] = mass[size_m-c-1]; 

  mass[size_m-c-1] = temp; 

} 

     

//Выводим получившийся массив 

document.write('Получившийся массив:<br>'); 

write_mass(); 

</script> 

 

 

4. 

<script> 

var mass_SN = [];   //Массив фамилий и имён 

var size_mSN = 10;  //Размер массива 

 

//Функция вывода массива в окно браузера 

function write_mass_SN() 

{ 

   document.write('<table border = "1">'); 

   document.write('<tr><td><b>Фамилия</b></td><td><b>Имя</b></td></tr>'); 

   for (var c = 0; c < size_mSN; c = c+2) 

       document.write('<tr><td>',mass_SN[c],'</td><td>',mass_SN[c+1],'</td></tr>'); 

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

} 

 

//Функция сортировки по фамилии 

function sort_S() 

{ 

  var b;//Индикатор отсортированности 

  do { 

    b = 0;//Обнуляем индикатор 

    for (var c = 0; c < (size_mSN-2); c = c+2) 

    { 

      //Если элемент больше следующего 

      if (mass_SN[c] > mass_SN[c+2])  

      { 

        b = 1; 

      //Меняем элементы местами 

        var temp = mass_SN[c]; 

        mass_SN[c] = mass_SN[c+2]; 

        mass_SN[c+2] = temp; 

        temp = mass_SN[c+1]; 

        mass_SN[c+1] = mass_SN[c+3]; 

        mass_SN[c+3] = temp; 

      } 

    } 

  } while (b>0) 

} 

 

//Заполняем массив 

mass_SN[0] = 'Иванов'; 

mass_SN[1] = 'Петр'; 

mass_SN[2] = 'Сидоров'; 

mass_SN[3] = 'Василий'; 

mass_SN[4] = 'Кузнецов'; 

mass_SN[5] = 'Виктор'; 

mass_SN[6] = 'Илюхин'; 

mass_SN[7] = 'Владислав'; 

mass_SN[8] = 'Петров'; 

mass_SN[9] = 'Иван'; 

 

 

//Выводим массив в окно браузера 

document.write('Массив фамилий и имён:<br>'); 

write_mass_SN(); 

 

//Сортируем массив по фамилии 

sort_S(); 

document.write('<br>После сортировки по фамилии:<br>'); 

write_mass_SN(); 

 

</script>