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

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

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

JavaScript объекты

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

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

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

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

Объявление новых объектов происходит одинаково, независимо от объекта:

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

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

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

Теперь подробнее рассмотрим объект массив.
Массив — упорядоченный набор данных.

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

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;

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

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

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

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

Задание 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

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

 

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

Пример: Вывести элементы массива на экран, в качестве конечного значения счетчика цикла использовать свойство 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
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, который удалит из массива последний элемент:

    1
    2
    3
    
    var arr = ["January", "February", "March", "April", "May", "June"];
    var len = ...
    document.write(arr.join(" "));
  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]); //выбран элемент по центру

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

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

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

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

*
*

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