§14. Массивы как объекты. Многомерные массивы. Работа с датой и временем.
Как было уже сказано в предыдущем параграфе, массивы в JavaScript можно воспринимать как объекты. Данный параграф посвящён этой теме.
Создание массивов с помощью конструктора Array.
Т.к. массив это объект, то существует конструктор Array, с помощью которого его можно создать. В качестве аргументов ему передаются значения элементов. Если будет передан один аргумент, то будет создан массив из количества элементов равного значению аргумента. Пример:
var m_1 = new Array(3,4,23,3456,5);
var m_2 = new Array(10);
В данном примере первый массив m_1 имеет 5 элементов с соответствующими значениями, а второй массив m_2 - 10 элементов с неопределёнными значениями.
Многомерные массивы.
Что значит многомерный? Многомерный – означает, что в одном элементе содержаться два и более значения. Для примера в трёхмерном массиве удобно хранить координаты точек трёхмерного пространства.
Многомерный массив в JavaScript – это массив, элементы которого тоже являются массивами. Для создания двух и более мерных массивов необходимо обязательно использовать конструктор Array. Делается это следующим образом:
var m = new Array(10);
for (var i = 0; i<10; i++) m[i] = new Array(3);
В данном примере создан трёхмерный массив из 10 элементов.
После того, как многомерный массив создан доступ к его элементам осуществляется следующим образом:
m[3][4] = 345;
document.write(m[3][4]);
Свойства и методы массивов.
Далее в таблице перечислены свойства и методы объектов. Они даны так же без примеров, создать которые будет предложено в задачах.
Свойство/метод | Описание |
Length | Содержит в себе количество элементов массива. Это свойство можно менять, соответственно изменится и количество элементов массива. Если массив был больше, то часть элементов с конца будет просто удалена. Если массив был меньше, то добавятся элементы с неопределёнными значениями. |
join(str) | Возвращает строку с элементами массива. str – необязательный аргумент, который является разделительной строкой. |
reverse() | Реверсирует элементы массива. Другими словами меняет порядок их следования. |
sort() | Сортирует массив в алфавитном порядке. Т.е. все значения элементов переводятся в строки и сортируются. После этого типы элементов возвращаются. В качестве аргумента можно передать функцию, которая задаст логику сортировки. В рамки данного учебника этот материал не входит. |
concat(m) | Возвращает массив, соединённый с массивом m, добавляя его в конец. |
slice(i_1,i_2) | Возвращает подмассив, начиная с элемента с индексом i_1, заканчивая элементом с индексом i_2. |
splice(i) | Удаляет элементы с позиции i включительно до конца. |
splice(i,count) | Удаляет count элементов с позиции i включительно. |
splice(i,count,'43',) | Удаляет count элементов с позиции i включительно. Затем вставляет в массив с позиции i элементы, значения которых преданы в качестве аргументов, начиная с третьего аргумента. Если count равен нулю, то просто вставляются элементы. |
push(1,3,5...) | Добавляет в конец массива элементы со значениями, переданными в качестве аргументов. Возвращает новую длину массива. |
pop() | Возвращает значение последнего элемента и удаляет его. |
unshift() shift() | То же самое, что и push и pop, только они работают с началом массива. |
toString() | Возвращает массив в виде строки. |
toLocaleString() | Возвращает массив в виде строки с учётом региональных особенностей. |
delete(i) | Удаляет значение элемента с индексом i. При этом сам элемент не прекращает своего существования. |
Примечание: методы pop, push и unshift, shift реализуют принцип работы стека. О том, что такое стек можете почитать в Интернете.
Работа с датой и временем. Конструктор Date.
В базовом JavaScript для работы с датой и временем существует конструктор Date, который создаёт соответствующие объекты. Они, в свою очередь, хранят в себе дату и время, а так же с помощью методов могут её возвращать и устанавливать. При решении задачи 12 параграфа мы уже имели опыт использования таких объектов. Сейчас рассмотрим этот вопрос более подробно.
Далее в первой таблице будут представлены различные вызовы конструктора Date с различным количеством аргументов. Во второй таблице будут представлены методы объектов, созданных конструктором Date. В обеих таблицах приняты следующие обозначения аргументов:
d – день, целое число от 1 до 31;
m – месяц, целое число от 0 до 11;
y – год, целое четырёхзначное число;
h – часы, целое число от 0 до 23;
min – минуты, целое число от 0 до 59;
s – секунды, целое число от 0 до 59;
ms – миллисекунды, целое число от 0 до 999;
x - миллисекунды начиная с 1 января 1970 год, целое число.
Здесь стоит пояснить, что означает аргумент x, «миллисекунды, начиная с 1 января 1970 год». Дело в том, что сама дата в объекте хранится в виде целого числа, которое является количеством миллисекунд прошедших с 1 января 1970 года. А уже с помощью различных методов мы получаем или записываем дни, часы, минуты и т.д. При таком подходе удобно рассчитывать «расстояние» между двумя точками времени.
Конструктор Date с различными параметрами. | Описание |
Date() | Создаёт объект с текущими на момент создания датой и временем. |
Date(x) | Создаёт объект с датой указанной в миллисекундах от 1 января 1970г. |
Date(y,m,d,h,min,s,ms) | Создаёт объект с датой и временем переданным в качестве аргументов. |
Методы объектов созданных конструктором Date. | Описание |
Возвращающие методы. | |
getDate() | Возвращает день месяца |
getDay() | Возвращает день недели |
getFullYear() | Возвращает год в четырёхзначном виде |
getHours() | Возвращает время |
getMilliseconds() | Возвращает миллисекунды |
getMinues() | Возвращает минуты |
getMonth() | Возвращает месяц |
getSeconds() | Возвращает сикунды |
getTime() | Возвращает количество миллисекунд с 1 января 1970 до текущей даты. (Не путайте с методом getMilliseconds). |
Устанавливающие методы. | |
setDate(d) | Устанавливает день и месяц. |
setFullYear(y) | Устанавливает год. |
setFullYear(y,m) | Устанавливает год и месяц. |
setFullYear(y,m,d) | Устанавливает год, месяц и день. |
setHours(h) | Устанавливает часы. |
setHours(h,min) | Устанавливает часы и минуты. |
setHours(h,min,s) | Устанавливает часы, минуты и секунды. |
setHours(h,min,s,ms) | Устанавливает часы, минуты, секунды и миллисекунды. |
setMilliseconds(ms) | Устанавливает миллисекунды. |
setMinues(min) | Устанавливает минуты. |
setMinues(min,s) | Устанавливает минуты. |
setMinues(min,s,ms) | Устанавливает минуты. |
setMonth(m) | Устанавливает месяц. |
setMonth(m,d) | Устанавливает месяц и день. |
setSeconds(s) | Устанавливает секунды. |
setSeconds(s,ms) | Устанавливает секунды и миллисекунды. |
setTime(x) | Устанавливает количество миллисекунд с 1 января 1970 до текущей даты. (Не путайте с методом setMilliseconds) |
Преобразующие методы. | |
toString() | Возвращает строку дата и в время в развёрнутом виде. |
toLocaleString() | Возвращает строку дата и в время с учётом региональных особенностей. |
toDateString() | Возвращает строку с датой. |
toLocaleDateString() | Возвращает строку с датой с учётом региональных особенностей. |
toTimeString() | Возвращает строку со временем. |
toLocaleTimeString() | Возвращает строку со временем с учётом региональных особенностей. |
Пример использования некоторых методов:
<script>
var d = new Date();
document.write('d.getDate() = ',d.getDate(),' - день месяца<br>');
document.write('d.getDay() = ',d.getDay(),' - день недели<br>');
document.write('d.getFullYear() = ',d.getFullYear(),' - год<br>');
document.write('d.getHours() = ',d.getHours(),' - часы<br>');
document.write('d.getMilliseconds() = ',d.getMilliseconds(),' - милисекнды<br>');
document.write('d.getMinutes() = ',d.getMinutes(),' - минуты<br>');
document.write('d.getMonth() = ',d.getMonth(),' - месяц<br>');
document.write('d.getSeconds() = ',d.getSeconds(),' - секунды<br>');
document.write('d.getTime() = ',d.getTime(),' - милисекунды с 1 января 1970 года<br>');
document.write('<br>');
document.write('d.toString() = ',d.toString(),'<br>');
document.write('d.toLocaleString() = ',d.toLocaleString(),'<br>');
document.write('<br>');
document.write('d.toDateString() = ',d.toDateString(),'<br>');
document.write('d.toLocaleDateString() = ',d.toLocaleDateString(),'<br>');
document.write('<br>');
document.write('d.toTimeString() = ',d.toTimeString(),'<br>');
document.write('d.toLocaleTimeString() = ',d.toLocaleTimeString(),'<br>');
</script>
Примечание: в объектах конструктора Date существуют методы реализующие работу со стандартами времени UTC и GMT. В данном учебнике эта тема не рассматривается.
Задачи.
1. Создать примеры работы свойства length и всех методов массивов, приведённых в таблице.
2. Создать произвольный двухмерный массив, отсортировать его, реверсировать его элементы. Все результаты вывести в окно браузера.
3. Создать произвольный трёхмерный массив. Удалить из него элементы «строки», в которых сумма трёх элементов больше 20 но меньше 70.
4. Создать две произвольных даты/время и вывести в окно браузера сколько между ними лет, месяцев, дней, часов, минут, секунд и миллисекунд.
5. Создать страницу с текущей датой и временем.