JavaScript урок 5. Массивы, тип данных Array

На уроке вы рассмотрите как создаются в Javascript массивы, рассмотрите примеры создания массива, работы с элементами массива. Поработаете со свойствами и методами массива в javaScript

Материалы сайта labs-org.ru направлены на практическое освоение языка javaScript. Краткие теоретические сведения не претендуют на полное освещение материала по теме; необходимую информацию можно найти в сети Интернет в большом количестве. В наши же задачи входит предоставление возможности получения практических навыков, необходимых для создания динамических веб-страниц. Решенные наглядные примеры и лабораторные задания по javaScript изложены по мере увеличения их сложности, что позволит с легкостью изучить материал с нуля.

JavaScript объекты

Javascript — объектно-ориентированный язык. Это значит, что с некоторыми типами данных можно работать как с объектами, что позволяет применять к ним дополнительные функции для работы с объектами. К примеру, со строками можно работать и как с обычным типом данных и как с объектами:

// обычная строковая переменная myStr:
var myStr = "Текст";
 
// создание строкового объекта myStr:
var myStr = new String();

  • Object(объекты)
  • Number (обработка чисел)
  • String (обработка строк)
  • Array (массивы)
  • Math (математические формулы, функции и константы)
  • Date (работа с датами и временем)
  • RegExp
  • Global (его свойства Infinity, NaN, undefined)
  • Function

Со всеми данными объектами мы познакомимся позже, с некоторыми из них мы частично уже знакомы.

Object — объект, который содержится во всех остальных объектах и обеспечивает их общую функциональность.

Объект function — функции являются объектами первого класса, т.е. могут присваиваться переменным, выступать аргументами других функций и быть результатом функций

Объявление новых объектов происходит одинаково, независимо от объекта (используется служебное слово new):

var arr = new Object();
var str = new String();
var arr = new Array();

Как видно из примера, в javascript объявление массива происходит точно так же, как и у других объектов.

JavaScript массивы, тип данных Array

Теперь подробнее рассмотрим объект массив.


Массив — упорядоченный набор данных.

Доступ к элементам массива осуществляется с помощью порядкового номера — индекса. Таким образом, массив — объект, представляющий собой проиндексированный набор элементов.


Пример: Создать массив arr. Присвоить значение трем элементам созданного массива. С помощью диалогового окна alert() вывести значение элемента массива с индексом 2. Вывести количество элементов массива.

✍ Решение:
 

    1
    2
    3
    4
    5
    6
    
    var arr = new Array();
    arr[0] = "element1";
    arr[1] = "element2";
    arr[2] = "element3";
    alert(arr[2]);
    alert("Число элементов" + arr.length);

    В javascript длина массива — свойство length.

    Javascript создание массива

    Создание элементов массива возможно несколькими способами:

    1. 1
      2
      3
      4
      5
      
      var earth = new Array(4); /* массив из 4-х элементов*/
      earth[0] = "Планета";
      earth[1] = "24 часа";
      earth[2] = 6378;
      earth[3] = 365.25;
    2. var earth = new Array("Планета", "24 часа", 6378, 365.25);
    3. 1
      2
      3
      4
      5
      
      var earth = new Array(); // пустой массив
      earth.xtype = "Планета";
      earth.xday = "24 часа";
      earth.radius = 6378;
      earth.period = 365.25;
    4. var country = ["Россия", "Белоруссия", "Казахстан"];

    Javascript: работа с массивами


    Обращение или доступ к элементам массива в javaScript происходит так:

    1
    2
    3
    4
    
    var mas=new Array(1,25,'Привет');
     
    mas[0]='Пока';
    mas[1]=35;
    При инициализации массива элемент mas[0] был равен 1. Затем мы изменили его значение на ‘Пока’. Значение элемента массива mas[1] было изменено с 25 на 35.


    Вывод элементов массива


    При выводе значений массива в документ с помощью метода write, его элементы выводятся через запятую:

    1
    2
    
    var mas=new Array(1,25,'Привет');
    document.write(mas)

    Результат:

    1,25,Привет
    

    1. Рассмотрим, как осуществляется в javascript вывод массива с использованием обычного цикла for:
    2. 1
      2
      3
      4
      5
      6
      7
      
      var mas=new Array(1,25,'Привет');
       
      function showElement(){
      	for(i=0;i<3;i++)
      	  document.writeln(mas[i]);
      }
      showElement();

      Результат:

      1 25 Привет
    3. Использование цикла for in для перебора элементов массива:
    4. 1
      2
      3
      4
      5
      6
      7
      8
      
      var mas=new Array(1,25,'Привет');
       
      function showElement(){
      	for(var i in mas){
      		document.writeln(mas[i]);
      	}
      }
      showElement();

      Результат:

      1 25 Привет

    Задание array 5_1. Создать два массива: countries – с названием стран, и population – с населением этих стран. Вывести название страны и ее население (использовать метод document.write).

    Комментарии к выполнению:

    • Вывод элементов массива оформить в виде функции.
    • Сначала выполнить задание с помощью цикла for с счетчиком, затем — с помощью цикла for in.

    Задание array 5_2. Что выведет на экран следующий фрагмент кода?

     var e = 1024;
     var table = [e, e + 1, e + 2, e + 3];
     document.write(table);

    Пример: Что выведет на экран следующий фрагмент кода?

    1
    2
    3
    4
    5
    
    var arr = [1, 2, 3];
     arr[5] = 5;
      for (var i = 0; i < arr.length; i++) {
     document.write(arr[i] + "<br />");
     }

    В примере в строке arr[5] = 5; происходит расширение массива – в 5-й индекс заносится значение 5. Цикл заполняет элементы типом undefined, элементы которые мы не использовали — они остаются пустыми.
    Удаление элементов массива


    В javascript удалить элемент массива можно при помощи оператора delete:

    1
    2
    3
    
    var myColors = new Array("red", "green", "blue");
    delete myColors[1];
    alert(myColors); // red,,blue

    Задание array 5_3. Создать массив из трех элементов, значения элементов запрашивать у пользователя. Удалить второй по счету элемент, после чего вывести элементы массива на экран, каждый элемент с новой строки

    Свойства массива (Array) в javaScript

    Массив – предопределенный объект. Доступ и обращение к элементам массива осуществляется при помощи точечной нотации (через символ «.«):

    Название_объекта.свойство_объекта
    Название_объекта.метод_объекта(параметры)

    Пример:

    mas.length // обращение к свойству length
    mas.sort() // вызов метода sort

    Пример: Вывести элементы массива на экран, в качестве конечного значения счетчика цикла использовать свойство массивов length

    ✍ Решение:
     

      1
      2
      3
      4
      
      for (var i = 0; i<arr.length;i++){
      	alert(arr[i]);
      }
      alert(arr.length);
    Поиск элемента в массиве

    В javascript поиск элемента в массиве можно осуществить через функцию:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    var arr = new Array();
    arr[0] = "element1";
    arr[1] = "element2";
    arr[2] = "element3";
    function findValue(theValue){
    	for (var i = 0; i<arr.length;i++){
    		if(arr[i] == theValue)
    			break; // если нашли - выход из цикла 
    	}
    	if (i<arr.length) // если не нашли, то i=arr.length
    		return i //если нашли - возвращаем индекс
    	else  
    		return 0; // если не нашли - возвращаем 0
     
    }
    var elem=findValue("element2");
    if (elem) alert ("элемент найден, его индекс="+elem)
    else alert("элемент не найден");
    В примере функция, организованная для поиска элемента массива, имеет один аргумент (theValue) — значение искомого элемента массива. В случае нахождения элемента функция возвращает индекс найденного элемента, если элемент не найден — функция возвратит 0.

    Задание array 5_4. Создать массив, элементами которого являются названия дней недели. Выводить номер дня недели (номер элемента массива), содержащего введенное пользователем название дня недели (использовать функцию с параметром, которая возвращает значение номера).

    задание на работу с массивами

    Методы массива (Array) в javaScript

    Рассмотрим некоторые javascript методы массива.

    1. Часто используемым методом в javascript array является concat().
      Метод javaScript concat() — конкатенация массивов, объединяет два массива в третий массив, т.е. формирует и возвращает объединенный массив, содержащий все элементы исходного массива и значения всех аргументов, переданных методу

      имя_массива1.concat(массив2)
       

      Рассмотрим пример использования метода concat

      1
      2
      3
      4
      
      var a1= new Array(1, 2, "Звезда");
      var а2 = new Array("a", "б", "в", "г");
      var аЗ = a1.concat(a2); 
      /* результат - массив с элементами: 1, 2, "Звезда", "а", "б", "в", "г" */

      Задание array 5_5. Дополните код согласно заданию: В переменную a присвоить возвращаемое значение метода concat, передав в этот метод два значения 4 и 5. Что будет выведено на экран?:

      1
      2
      3
      
      var a = [1, 2, 3];
      a = ...
      document.write(a);

    2. Метод javaScript join(разделитель) — создает строку из элементов массива с указанным разделителем между ними (преобразует все элементы массива в строки и объединяет их через указанный разделитель)

      имя_массива.join(строка)
       

      Пример использования метода join:

      1
      2
      3
      4
      5
      
      var а = new array(1, 2, "Звезда")
      a.join(",") // значение - строка "1,2,Звезда"
       
      var а = new array(1, 2, "Звезда")
      a.join(" ") // значение - строка «1 2 Звезда»

      Задание array 5_6. Дополните код, согласно заданию: В строке объявления переменной res присвоить значение: на массиве arr вызвать метод join, в который передать аргумент (тег br ) и вывести на экран значение переменной res

      1
      2
      3
      
      var arr = ["Edward", "Andrey", "Chris"]
      var res = ...
      document.write(res);

    3. Метод javaScript shift() — удаляет первый элемент массива и возвращает результирующий массив, смещая все последующие элементы на одну позицию влево

      имя_массива.shift()
       

      Пример использования метода shift:

      1
      2
      3
      4
      
      var x = ["a", "b", "c", "d"];
      x.shift();
      document.write(x);
      //выведет на экран обозревателя строку b,c,d
    4. Метод javaScript рор() — удаляет последний элемент массива и возвращает результирующий массив

      имя_массива.рор()
       

      Пример использования метода рор:

      1
      2
      3
      4
      
      var x = ["a", "b", "c", "d"];
      x.pop();
      document.write(x);
      //выведет на экран обозревателя строку a,b,c.

      Задание array 5_7. Дополните код согласно инструкции:
      Присвоить значение метода pop() в переменную len. Вывести отдельно результирующий массив и отдельно его удаленный элемент (значение переменной len):

      1
      2
      3
      4
      
      var arr = ["January", "February", "March", "April", "May", "June"];
      var len = ...
      document.write(arr.join(" ")+"</br>");
      document.write(len);

    5. Метод javaScript unshift(значение) — добавляет к массиву указанное значение в качестве первого элемента

      имя_массива.unshift(значение)
       

      Пример использования метода unshift:

      1
      2
      3
      
      var x = ["a", "b", "c", "d"];
      document.write(x.unshift("e"));
      //выведет на экран обозревателя число 5
    6. Метод javascript push(значение) — добавляет к массиву указанное значение в качестве последнего элемента и возвращает новую длину массива

      имя_массива.push(значение)
       

      Пример использования метода push:

      1
      2
      3
      
      var x = ['a', 'b', 'c', 'd'];
      document.write(x.push('e'));
      //выведет на экран обозревателя число 5
    7. Метод javaScript reverse() — изменяет порядок следования элементов массива на противоположный

      имя_массива.reverse()
       

      Пример использования метода reverse:

      1
      2
      3
      4
      
      var x = new Array();
      x[0] = 0; x[2] = 2; x[4] = 4;
      document.write(x.reverse());
      //выведет на экран обозревателя строку 4,,2,,0

      Задание array 5_8. Что выведет на экран следующий фрагмент кода?

      1
      2
      3
      
      var a = new Array(11, 22, 33, 44, 55, 66, 77);
      a.reverse(); 
      document.write(a.join("<br/>"));

    8. Метод javascript slice(индекс1 [, индекс2]) — создает массив из элементов исходного массива с индексами указанного диапазона (возвращает подмассив указанного массива).

      имя_массива.slice (индекс1 [, индекс2])
       

      Пример:

      1
      2
      3
      4
      5
      
      var a = new Array(1, 2, 'Звезда' , 'а' , 'b');
      alert(a.slice(1,3));
      // массив с элементами: 2, "Звезда"
      alert(a.slice(2));
      // массив с элементами: "Звезда", "а", “b”

      Задание array 5_9. Дополните код согласно заданию: Присвоить переменной t возвращаемое значение метода slice(), который будет возвращать первых 3 значения из массива:

      1
      2
      3
      
      var a = [1, 2, 3, 4, 5, 6, 7];
      var t = ...
      document.write(t);

    9. Метод javaScript sort() — сортирует (упорядочивает) элементы массива (если строковые элементы, то сначала произойдет сортировка текста, потом сортировка по алфавиту)

      имя_массива.sort()
       

      Пример использования метода sort():

      1
      2
      3
      4
      5
      6
      7
      8
      9
      
      var arr = [1, 16, 2];
      arr.sort();
      document.write(arr.join("<p>"));
      /*
      Выведет на экран:
       1
       16
       2
      */
    10. Метод javaScript splice(индекс, количество) — удаляет из массива несколько элементов и возвращает массив из удаленных элементов или заменяет значения элементов. Т.е. этот метод используется для вставки и удаления элементов из массива.

      имя_массива.splice(индекс, количество)
       

      Пример использования метода splice:

      1
      2
      3
      4
      
      var a = new Array('Ivan','Max','Peter',12,5);
      var x = a.splice(1,3); 
      document.write(x+"<br>"); // Max,Peter,12
      document.write(a); // Ivan,5

      Задание array 5_10. Дополните код согласно заданию: В переменную d присвоить значение метода splice(), который должен удалить числа 2, 3, 4 из массива:

      1
      2
      3
      
      var a = [1, 2, 3, 4, 5, 6, 7];
      var d = ...
      document.write(a);

    11. toLocaleString(), toString() — преобразуют содержимое массива в символьную строку

      Задание array 5_11. Дан массив из чисел: 1, 2, 3, 4, 5. Распечатать массив в обратном порядке (5, 4, 3, 2, 1), используя функцию javaScript reverse()

      Задание array 5_12. Дан массив из элементов: ‘c’, 5, 2, ‘b’, 3, 1, 4, ‘a’. Распечатать массив, предварительно отсортировав его по возрастанию (1, 2, 3, 4, 5, a, b, c)

      Задание array 5_13. Дан массив из элементов: 1, 2, 3, 4, 5. Распечатать исходный массив и массив, получившийся из элементов исходного массива, с разделителем «+» (метод javaScript join 1+2+3+4+5)

    Ассоциативный массив в javaScript

    Ассоциативный массив — это абстрактный тип данных, по сути, аналог двумерного массива в javascript, позволяющий хранить пары вида «(ключ, значение)». Т.е. ассоциативные массивы позволяют вместо индексов использовать строковые значения.

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

    Пример создания ассоциативного массива:

    var pupil = { name: "Andrey", group: "1" };

    Другой пример:

    1
    2
    3
    4
    5
    6
    7
    8
    
    var m_list = new Object();
     
    m_list["fat"] = "Полный";
    m_list["small"] = "Маленький";
    m_list["name"] = "Иван";
     
    for (var x in m_list) //выведем на экран все элементы
      document.write(m_list[x] + "<br>");

    Задание array 5_14. Исправить ошибку (ошибки) во фрагменте кода для корректной работы:

    1
    2
    3
    4
    
    var laptop = ( cpu: "Core i7", ram: "4 GB", screen: "19" );
    var Key = prompt("Введите интересующий параметр (ram, cpu, screen)");
    var value = laptop[key];
    document.write(value);

    Многомерные массивы

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

    1
    2
    3
    4
    5
    6
    7
    
    var matrica = [
      [5, 5, 5],
      [1, 5, 1],
      [2, 2, 2]
    ];
     
    document.write(matrica[1][1]); //выбран элемент по центру (5)

    Задание array 5_15. Дана матрица 5 х 5. Вывести элементы матрицы, принадлежащие интервалу[-5; 7].

    При исходной матрице:

      [3, 15, 25, 15, -2],
      [4, 11, 5, 11, 12],
      [12, 22, 12, -3, -10]
      [22, 22, 32, -33, -12]
      [2, 22, 12, -12, -10]
    

    Результат должен быть:

    3 -2 4 5 -3 2

    Поделитесь уроком с коллегами и друзьями:

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить