Стать программистом. Часть 14. Основы JavaScript для абсолютных новичков!
Доброго времени суток, друзья!
В прошлом уроке мы с Вами познакомились с основными операторами сравнения, рассмотрели их названия, кодовое представление, а также на практике разобрали примеры с их использованием. Надеюсь большинство материала, изложенного в предыдущем уроке, было доступным и не вызвало большого количества вопросов. Если же вопросы возникли, пожалуйста, излагайте их в комментариях и буем разбираться вместе.
По большому счету следующими темами, которые мы должны были бы разбирать должны были стать темы условных выражений и циклов. Однако, с моей точки зрения, для того чтобы более гармонично влиться в темы такого рода, особенно циклы, нам необходимо вернуться на несколько уроков назад и вспомнить то, что мы упомянули, но до сих пор еще не рассмотрели.
Поэтому "только сегодня и только сейчас" на очереди у нас сложные переменные типа Object.
Давайте начнем.
УРОК 14. Сложные переменные. Array и Object.
Давайте вспомним список возможных типов переменных из урока №4.
Согласно этому списку мы с Вами уже успели познакомится с различными видами переменных. А вот чего мы точно не делали - не касались типа, расположенного в 4 пункте. Помнится, я тогда обратил на него Ваше внимание и, в силу некоторых обстоятельств, я обещал рассмотреть его чуть позже. Сегодня мне представляется уместным начать восполнять этот пробел, хотя мы и не охватим абсолютно все что касается переменных типа Object. Но нам это и не требуется. Для начала будет достаточно приобрести знания о том, что это вообще за переменные с таким типом, как они выглядят, как их создавать, какими они бывают. А уже более глубоко мы рассмотрим их позже, после темы, которая будет назваться функции.
Для начала немного теории:
Все переменные в JavaScript'e можно условно разделить на три группы. Первая группа — это так называемые примитивы. К ним как раз-таки и относятся все типы переменных, которые мы уже успели рассмотреть. Вот они:
- String (Строка).
- Number (Число).
- Boolean (Логический тип).
Кроме этих типов мы успели затронуть специфические значения переменных, такие как:
- Undefined (Неизвестное, неопределенное).
- Null (Пустота).
Третья группа включает в себя тип сложносоставных переменных. К этой группе как раз и относится тип:
- Object (Объект).
Именно этот тип переменных мы и будем рассматривать.
Object как тип сложносоставных переменных.
Для того чтобы достичь ясности в вопросе типа сложносоставных переменных, нам для начала потребуется понять, что же именно эти переменные из себя представляют. Давайте освежим нашу память и вспомним самые первые уроки о переменных в принципе. Для понимания сущности переменной в уроке № 3 мы проводили некую параллель и сравнивали переменную с коробочкой, куда мы могли положить вещь (значение).
В общих чертах сложносоставные переменные так же можно сравнить с коробочкой, однако коробочка эта будет состоять из нескольких отделений и в каждом из этих отделений может лежать либо своя вещь, либо еще одна такая же коробочка с множеством отделений. Теоретически, количество таких отделений неограниченно. На практике их число, конечно, имеет свой предел, но действительно может быть очень большим.
Давайте рассмотрим на практике, чтобы закрепить ассоциативный образ с кодовым представлением и начнем мы с первой сложносоставной переменной, которая называется Array или Массив.
Array (Массив).
В своем кодовом представлении самый обычный массив выглядит следующим образом:
// Сложносоставные переменные типа Object
var a = [1, 2, 3, 4, 5];
Мы видим, что создание самой переменной ничем не отличается от того, что нам доводилось видеть ранее. Мы так же используем var чтоб начать создание переменной, так же ка и раньше присваиваем переменной имя a и единственное что отличается это ее значение. Раньше на этом месте мы записывали что-то одно (либо цифру, либо число, либо одно из булевских значений, либо undefined, либо null) теперь же мы видим, что значение у нас тоже одно, но внутри этого значения аж пять цифр. Все они охвачены квадратными скобками [....] и каждая цифра отделена от ругой запятой.
Обратите особое внимание, что в конце последней цифры запятая не ставится!
Если возвращаться к нашей ассоциации, то квадратные скобки можно сравнить с бортами коробочки, запятые - с перегородками её отделений, а цифры - с вещами.
Безусловно каждая составная часть массива имеет свое название. Но на данном этапе нам не особенно важно углубляться в терминологию. Единственное что нам не будет лишним знать это то, что цифры в данном примере (или любое другое значение вместо этих цифр) называются элементами массива.
Для того, чтобы проверить тип переменной, значением которой является массив мы можем воспользоваться нашими знаниями из предыдущих уроков и вооружится уже знакомым нам помощником typeof.
// Сложносоставные переменные типа Object
var a = [1, 2, 3, 4, 5];
alert(typeof a);
Пройдем в браузер, где открыт наш index.html и обновим окно:
Как мы видим из сообщения, тип переменной в значении которой находится массив - Object. То есть мы лишний раз подтвердили, что тип сложносоставной переменной именно Object (Объект).
Далее, массив может содержать в себе элементы с абсолютно любым значением и как следствие типом этого значения. Например,
// Массив с элементами разных типов
var a = [1, 'привет', null, undefined, true];
В отличие от предыдущего примера var a = [1, 2, 3, 4, 5];, где все элементы являются цифрами с типом Number, масив var a = [1, 'привет', null, undefined, true]; тоже имеет пять значений, но все они разного типа. Массив такого рода называется смешанным.
Более того, как уже было сказано вначале урока, если сравнивать сложносоставную переменную с коробочкой внутри которых есть множество отделений, каждое из которых может содержать какое-либо значение или такую же коробочку с множеством значений внутри, то мы смело можем предположить, что внутрь элемента массива кроме примитивных значений можно положить такой же массив. Такое предположение будет верным и массивы, содержащие внутри себя другие массивы, называются многомерными. Пример:
// Массив с элементами разных типов
var a = [1, [1, true, 'привет' ], null, undefined, true];
В этом примере мы видим, что переменная a в своем значении содержит многомерный массив (обведенный красной рамкой). А многомерным он является потому, что его второй элемент тоже является массивом (обведен зеленой рамкой). И все это не меняет того факта, что оба эти массива в то же самое время являются смешанными, так, как и в первом массиве и во втором присутствуют элементы разных типов.
Представление массива в одну строку, как на примерах выше, встречается только в случае, когда сам массив не большой, то есть имеет маленькой количество элементов внутри себя. Зачастую, для простоты восприятия массивы в коде представляют следующим образом:
// Массив с элементами разных типов
var a = [
1,
'привет',
null,
undefined,
true
];
JavaScript достаточно умен, чтобы проигнорировать переносы строк внутри квадратных скобок и отнести всю запись к одному массиву и одной переменной.
Любая сложносоставная переменная, в том числе и Массив имеет свойства. Свойства содержат в себе дополнительную информацию о переменной. Например, если возвращаться к нашей ассоциации с коробочкой, то мы вполне можем допустить что эта коробочка будет иметь как минимум три параметра: длину, ширину и глубину. Эти три параметра как раз и будут являться свойствами для коробочки.
Подробно свойства сложносоставных переменных мы тоже будем рассматривать позже. А на данный момент, в разрезе темы Массив будет достаточно знать, что он тоже обладает свойствами. Одно из таких свойств называется length - длина. Это свойство появляется сразу же, как только был создан сам массив. Длина содержит цифру. Эта цифра - это общее количество всех элементов первого порядка внутри массива. Что значит первого порядка?
Если взять наш пример с много мерным массивом. Вот он:
То для формирования свойства length массива, обведенного в красную рамку количество элементов внутри массива, обведенного в зеленую рамку учитываться не будет. То есть сам этот "зеленый массив" в общей сумме элементов учтётся, а количество его собственных элементов в формировании длины для "родительского" массива участвовать не будут.
Если посчитать количество элементов массива, приведенного выше, легко вычислить что в свойстве length этого массива будет лежать цифра 5. Кончено мы можем проверить истинность нашего предположения.
Для того, чтобы это сделать, нам необходимо использовать запись следующего вида:
// Массив с элементами разных типов
var a = [1, [1, true, 'привет' ], null, undefined, true];
alert(a.length);
Запись, которую Вы видите на строке №4, вернее та ее часть, которая подчеркнута красной линией, дает нам доступ к значению которое лежит в свойстве length массива a. Разбирать синтаксис (форму представления) этой записи сейчас нам не требуется. Пока просто запомните, как она выглядит. Ну а конструкцию alert(); вы уже знаете.
Проверим в браузере:
Длина смешанного, многомерного массива a действительно равна пяти.
Задача.
- Создайте многомерный, смешанный массив.
- Создайте многомерный, НЕсмешанный массив так, чтобы его свойство length было на два больше, чем свойство length у массива из первого пункта.
А на сегодня все
Ссылки на предыдущие уроки:
var array = [ Урок 1, Урок 2, Урок 3, Урок 4, Урок 5, Урок 6, Урок 7, Урок 8, Урок 9, Урок 10, Урок 11, Урок 12, Урок 13]