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

Дата публикации: 11 августа 2016

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

Назад
К оглавлению
Далее к уроку 6
Материалы сайта 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 Привет
    2. Использование цикла for in для перебора элементов массива:
      3. 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

    Назад
    К оглавлению
    Далее к уроку 6
    Поделитесь уроком с коллегами и друзьями:[SvenSoftSocialShareButtons]

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

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

    *
    *

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