Урок 3. Массивы и объекты в JavaScript
Теория
В программировании очень часто возникает задача хранения списка похожих значений, например, всех дней недели или всех месяцев. Можно создавать под каждое значение списка свою переменную, но это очень неудобно (для списка дней недели понадобилось бы 7 переменных, а для месяцев - 12).
Представьте, что нужно вывести название 3-го месяца. С помощью 12 различных переменных это проблематично, т.к. необходимо помнить названия всех переменных, в которые записаны месяцы.
Поэтому ввели специальный тип данных: массив.
Массив создается с помощью квадратных скобок []:
a=[]//Создан массив a
Пока созданный массив не содержит никаких данных. Заполним его названиями дней недели:
a=['пн','вт','ср','чт','пт','сб','вс']
Каждое значение списка, который записан в массив (каждый день недели), называется элементом массива.
Элементы разделяются между собой запятой. После этой запятой можно ставить пробелы, а можно не ставить.
Внимание! Названия дней недели представляют собой строки и поэтому взяты в кавычки. Кроме строк в массиве можно хранить числа (их в кавычки не брать):
a=['пн',6,'ср',4,8,'сб',88];
Как вывести отдельный элемент массива
Нужно вывести четверг с помощью составленного массива дней недели.
Делается это так: нужно после переменной массива (a) написать квадратные скобки [], а в них указать порядковый номер элемента, который нужно вывести: a[3]. Казалось бы, порядковый номер четверга - это 4, нет. В программировании нумерация начинается с 0. Поэтому 0 - это понедельник, 1 - это вторник и т.д.
Пример:
Вывести слово 'ср':
a=['пн','вт','ср','чт','пт','сб','вс'];document.write(a[2])
Ассоциативные массивы (объекты)
В предыдущем примере, чтобы обратиться к нужному элементу массива, вписан в квадратных скобках его порядковый номер (нумерация начинается с 0). Эти порядковые номера называются ключами массива.
Т.е. получено значение элемента массива по его ключу.
JavaScript сам определял ключи для элементов, это были их порядковые номера. Иногда это неудобно, например, если нужно вывести название 3-го дня недели (среда), то в квадратных скобках надо написать цифру 2, а не 3.
Поэтому в JavaScript можно указать ключи в явном виде. Делается это с помощью объектов (в других языках программирования они называются ассоциативными массивами). Объекты создаются с помощью фигурных скобок {}, внутри которых пишутся элементы этого объекта в формате ключ:значение.
Пример. Понедельник имеет ключ 1, а не 0 (и всем остальным дням прибавим 1):
Ключи указываются в явном виде:
o={1:'пн',2:'вт',3:'ср',4:'чт',5:'пт',6:'сб',7:'вс'};document.write(o[1])//Выведет 'пн'
Синтаксис здесь такой: ключ, затем идет двоеточие :, а потом значение.
Ключи не обязательно должны быть числами, они могут быть и строками.
Пример. Массив, в котором ключами будут имена работников, а элементами - их зарплаты:
Массив (объект) работников:
o={'Коля':200,'Вася':300,'Петя':400}
Узнать зарплату Васи:
o={'Коля':200,'Вася':300,'Петя':400};document.write(o['Вася'])//Выведет 300
Кавычки вокруг строковых ключей можно не ставить:
o={k1:200,k2:300,k3:400};document.write(o['k1'])//Выведет 200
Но на такие ключи накладываются ограничения: они не должны начинаться с цифры, не должны иметь символ дефиса или символ пробела внутри. Если есть такой ключ, просто возьмите его в кавычки.
Свойства объекта
Существует и другой способ обратиться к элементу объекта - используя обращение не через квадратные скобки, а через точку: не o['k'], а o.k.
В этом случае говорят, что обращаются к свойству объекта.
Пример:
o={k1:200,k2:300,k3:400};document.write(o.k1)//Выведет 200
При таком способе обращения на названия свойств (т.е. ключей) накладываются ограничения: они не должны начинаться с цифры, не должны иметь символ дефиса или символ пробела внутри. Если есть такой ключ, используйте обращение через квадратные скобки.
Как еще можно создать массив или объект.
Вместо {} и [] можно пользоваться Object() и Array() соответственно (это просто альтернативный синтаксис).
Cоздать объект 1-м синтаксисом (не работает этот Object):
o=new Object(k1:200,k2:300,k3:400);document.write(o['k1'])//Выведет 200
Cоздать массив 2-м синтаксисом:
a=Array('пн',256,'ср',34,38,'сб',95);document.write(a)
Создание объекта через {} и через Object() эквивалентно, можно пользоваться тем способом, который удобнее.
А вот с массивом не все так просто. Разница между ними проявляется в случае, если нужно сделать массив, состоящий из 1 элемента, который будет целым числом, вот так:
a=Array(10);
В этом случае получится не такой массив: a=[10], а вот такой: a=[,,,,,,,,,].
Это будет массив, состоящий из 10 пустых элементов (их значение будет undefined), а не массив из 1 элемента 10, как нужно.
Заполнение массива
Массив можно заполнять после этапа создания.
Пример. Переменная a - массив, а потом массив заполняется данными:
a=[];a[0]=1,a[1]=2,a[2]=3;document.write(a)//Выводится содержимое массива
Также можно поступать и с объектами:
o={};o['Коля']=100,o['Вася']=200,o['Петя']=300;document.write(o)
Многомерный массив
Элементы массива могут быть не только строками и числами, но и массивами. Т.е. получится массив массивов или многомерный массив.
Давайте сделаем массив студентов s, который будет содержать 2 подмассива: студенты мужского пола и женского:
var s={'m':['Коля','Вася','Петя'],'g':['Даша','Маша','Лена']}
Чтобы вывести какой-либо элемент из многомерного массива следует писать уже не 1 пару [], а 2: s['m'][0], так мы выведем 'Коля'.
Практика
Примеры решения задач
Задача
Дан массив с элементами 'Привет, ','мир','!'. Необходимо вывести на экран фразу 'Привет, мир!'.
Решение:
Вывести фразу 'Привет, мир!':
a=['Привет, ','мир','!'];document.write(a[0]+a[1]+a[2])
Разберем это решение: слово 'Привет, ' хранится под номером 0, это значит, что для доступа к нему надо написать a[0]. Для доступа к слову 'мир' надо написать a[1], а a[2] содержит в себе '!'. Далее с помощью оператора '+' сложить 3 текста ('Привет, ','мир','!') в 1 строку так: a[0]+a[1]+a[2] и вывести с помощью document.write.
Задача
Дан массив с элементами 'Привет, ','мир','!'. Записать в переменную s фразу 'Привет, мир!' и вывести содержимое этой переменной.
Решение:
Вывести фразу 'Привет, мир!':
a=['Привет, ','мир','!'],s=a[0]+a[1]+a[2];/*В переменной s теперь лежит строка 'Привет, мир!'*/document.write(s)
Задача
Дан массив ['Привет, ','мир','!']. Записать в 0-й элемент этого массива слово 'Пока, ' (т.е. вместо слова 'Привет, ' будет 'Пока, ').
Решение:
a=['Привет, ','мир','!'];a[0]='Пока, ';/*Перезапишем 0-й элемент массива*/document.write(a)
Задача. Объекты (ассоциативные массивы)
Создать ассоциативный массив (объект) зарплат o. Вывести зарплату Пети и Коли.
o={'Коля':'1000','Вася':'500','Петя':'200'};console.log(o)
Решение:
Чтобы вывести зарплату Коли следует вывести значение элемента объекта с ключом 'Коля':
o={'Коля':'1000','Вася':'500','Петя':'200'};document.write(o['Коля'])//Выведет 1000
Задача. Способы создания массива
Создать массив a с элементами 1,2,3,4,5 2-мя различными способами.
Решение:
1 способ создать массив - объявить его через []:
a=[1,2,3,4,5];
2 способ создания массива - это поступить таким образом:
a=[];
a[0]=1;
a[1]=2;
a[2]=3;
a[3]=4;
a[4]=5;
Задача. Многомерный массив
Дан 2-мерный массив a:
a={'r':['голубой','красный','зеленый'],'e':['blue','red','green']}
Выведите с его помощью слово 'голубой'.
Решение:
Т.к. массив 2-мерный, то придется написать несколько квадратных скобок подряд. Поясню:
document.write(a['r']);
В этом случае результатом будет массив ['голубой','красный','зеленый'], который является частью нашего 2-мерного массива. Чтобы вывести слово 'голубой', необходимо дописать еще 1 квадратную скобку с ключом, соответствующим этому элементу (у него нет явного ключа, значит его ключ 0):
document.write(a['r'][0]);//Выведет 'голубой'
Выведем теперь слово 'красный':
document.write(a['r'][1]);//Выведет 'красный'
Выведем 'red':
document.write(a['e'][1]);//Выведет 'red'
Задачи для решения
Работа с массивами
Создать массив a=['a','b','c']. Вывести с помощью document.write.
С помощью массива a из предыдущего номера вывести содержимое 1-го, 2-го и 3-го элементов.
Создать массив a=['a','b','c','d'] и с его помощью вывести на экран строку 'a+b,c+d'.
Создать массив a с элементами 2,5,3,9. Умножить 1-й элемент массива на 2-й, а 3-й элемент на 4-й. Результаты сложить, присвоить переменной r. Вывести значение переменной r.
Объекты (ассоциативные массивы)
Создайте объект o. Вывести элемент с ключом 'c' 2-мя способами: через квадратные скобки и как свойство объекта:
o={a:1,b:2,c:3}
Создать массив зарплат o. Вывести зарплату Пети и Коли.
o={Коля:'1000',Вася:'500',Петя:'200'}
Создать объект с днями недели. Ключами в нем должны служить номера дней от начала недели (понедельник - 1-й и т.д.). Вывести текущий день недели.
Пусть теперь номер дня недели хранится в переменной d, например там лежит число 3. Вывести день недели, соответствующий значению переменной d.
Многомерные массивы
Дан массив [[1,2,3],[4,5,6],[7,8,9]]. Вывести цифру 4 из этого массива.
Дан объект {js:['jQuery','Angular'],php:'hello',css:'world'}. Вывести с его помощью слово 'jQuery'.
Создать 2-мерный массив. 1-е 2 ключа - это 'r' и 'e'. Пусть 1-й ключ содержит элемент, являющийся массивом названий дней недели по-русски, а 2-й - по-английски. Вывести с помощью этого массива понедельник по-русски и среду по-английски (пусть понедельник - это 0-й день).
Пусть теперь в переменной l хранится язык (она принимает 1 из значений или 'r', или 'e', либо то, либо то), а в переменной d - номер дня. Вывести словом день недели, соответствующий переменным l и d. Т.е., если, например, l='r' и d=3, то вывести 'среда'.
