Содержание:
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
Теперь подробнее рассмотрим объект массив.
Доступ к элементам массива осуществляется с помощью порядкового номера — индекса. Таким образом, массив — объект, представляющий собой проиндексированный набор элементов.
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 2 3 4 5 | var earth = new Array(4); /* массив из 4-х элементов*/ earth[0] = "Планета"; earth[1] = "24 часа"; earth[2] = 6378; earth[3] = 365.25; |
var earth = new Array("Планета", "24 часа", 6378, 365.25); |
1 2 3 4 5 | var earth = new Array(); // пустой массив earth.xtype = "Планета"; earth.xday = "24 часа"; earth.radius = 6378; earth.period = 365.25; |
var country = ["Россия", "Белоруссия", "Казахстан"]; |
Javascript: работа с массивами
1 2 3 4 | var mas=new Array(1,25,'Привет'); mas[0]='Пока'; mas[1]=35; |
Вывод элементов массива
write
, его элементы выводятся через запятую:
1 2 | var mas=new Array(1,25,'Привет'); document.write(mas) |
Результат:
1,25,Привет
- Рассмотрим, как осуществляется в javascript вывод массива с использованием обычного цикла
for
: - Использование цикла
for in
для перебора элементов массива:
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 Привет
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 Привет
countries
– с названием стран, и population
– с населением этих стран. Вывести название страны и ее население (использовать метод document.write
).
Комментарии к выполнению:
- Вывод элементов массива оформить в виде функции.
- Сначала выполнить задание с помощью цикла
for с счетчиком
, затем — с помощью циклаfor in
.
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
, элементы которые мы не использовали — они остаются пустыми.delete
:
1 2 3 | var myColors = new Array("red", "green", "blue"); delete myColors[1]; alert(myColors); // red,,blue |
Свойства массива (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 19 20 21 22 | 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 false; // если не нашли - возвращаем false } var elem=findValue("element2"); if (elem) alert ("элемент найден, его индекс="+elem) else alert("элемент не найден"); |
theValue
) — значение искомого элемента массива. В случае нахождения элемента функция возвращает индекс найденного элемента, если элемент не найден — функция возвратит false
.
Методы массива (Array) в javaScript
Рассмотрим некоторые javascript методы массива.
Часто используемым методом в 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, "Звезда", "а", "б", "в", "г" */ |
a
присвоить возвращаемое значение метода concat
, передав в этот метод два значения 4
и 5
. Что будет выведено на экран?:
1 2 3 | var a = [1, 2, 3]; a = ... document.write(a); |
Метод 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 Звезда» |
res
присвоить значение: на массиве arr
вызвать метод join
, в который передать аргумент (тег br
) и вывести на экран значение переменной res
1 2 3 | var arr = ["Edward", "Andrey", "Chris"] var res = ... document.write(res); |
Метод javaScript shift()
— удаляет первый элемент массива и возвращает результирующий массив, смещая все последующие элементы на одну позицию влево
имя_массива
.
shift()
Пример использования метода shift:
1 2 3 4 | var x = ["a", "b", "c", "d"]; x.shift(); document.write(x); //выведет на экран обозревателя строку b,c,d |
Метод javaScript рор()
— удаляет последний элемент массива и возвращает результирующий массив
имя_массива
.
рор()
Пример использования метода рор:
1 2 3 4 | var x = ["a", "b", "c", "d"]; x.pop(); document.write(x); //выведет на экран обозревателя строку a,b,c. |
Присвоить значение метода
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); |
Метод javaScript unshift(значение)
— добавляет к массиву указанное значение в качестве первого элемента
имя_массива
.
unshift(
значение)
Пример использования метода unshift:
1 2 3 | var x = ["a", "b", "c", "d"]; document.write(x.unshift("e")); //выведет на экран обозревателя число 5 |
Метод javascript push(значение)
— добавляет к массиву указанное значение в качестве последнего элемента и возвращает новую длину массива
имя_массива
.
push(
значение)
Пример использования метода push:
1 2 3 | var x = ['a', 'b', 'c', 'd']; document.write(x.push('e')); //выведет на экран обозревателя число 5 |
Метод 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 |
1 2 3 | var a = new Array(11, 22, 33, 44, 55, 66, 77); a.reverse(); document.write(a.join("<br/>")); |
Метод 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” |
t
возвращаемое значение метода slice()
, который будет возвращать первых 3 значения из массива:
1 2 3 | var a = [1, 2, 3, 4, 5, 6, 7]; var t = ... document.write(t); |
Метод javaScript sort([compareFunction])
— сортирует (упорядочивает) элементы массива (элементы сортируются путём преобразования их в строки и сравнения строк в порядке следования кодовых точек Unicode). Необязательный параметр compareFunction
указывает функцию, определяющую порядок сортировки, может пригодиться при сортировке целочисленного массива (см. ниже).
имя_массива
.
sort(
)
Пример использования метода sort():
1 2 3 4 5 6 7 8 9 | var arr = [1, 2, 16]; arr.sort(); document.write(arr.join("<p>")); /* Выведет на экран: 1 16 2 */ |
Для числового сравнения, вместо строкового, функция сравнения может просто вычитать b
из a
. Следующий пример будет сортировать массив по возрастанию:
var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); document.write(numbers); // [1, 2, 3, 4, 5] |
Метод 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 |
d
присвоить значение метода splice()
, который должен удалить числа 2
, 3
, 4
из массива:
1 2 3 | var a = [1, 2, 3, 4, 5, 6, 7]; var d = ... document.write(a); |
toLocaleString()
, toString()
— преобразуют содержимое массива в символьную строку
reverse()
+
» (метод javaScript join
– 1+2+3+4+5)1, 2, 5, 4, 6
и 8, 2, 5, 9, 5
. Найти медиану двух этих массивов одновременно (медиана — это числовое значение, которое делит отсортированный массив чисел на большую и меньшую половины. В отсортированном массиве с нечетным числом элементов медиана — это число в середине массива). Для решения задачи понадобятся стандартные функции.
отсортированные элементы массивов: 1, 2, 2, 4, 5, 5, 6, 7, 8, 9 медиана: 5
Ассоциативный массив в 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>"); |
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) |
При исходной матрице:
[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