Массивы (большие переменные)

Встреча № 5

Массивы (большие переменные)

Простые переменные, содержат фрагмент информации, например, число или последовательность символов. Они отлично подходят для отслеживания одного показателя (счета, возраста или общей стоимости). Однако если вам приходится отслеживать несколько однородных показателей (дней недели или изображений на веб-странице), то обычные переменные не очень удобны.

Например, вы создали систему электронного заказа на языке JavaScript, отслеживающую товары, которые собирается приобрести посетитель. Если вы решите отслеживать все единицы товара, используя обычные переменные, то должны будете написать следующий код:  

var iteml = 'Игровая приставка Xbox 360';

var item2 = 'Теннисные туфли';

var item3 = 'Подарочный сертификат';

А, если товаров будет больше? Вам придется добавить новые переменные: var item4, var item5 и т. д. Поскольку вы не знаете, сколько товаров захочет заказать посетитель, вы не можете заранее угадать, сколько переменных потребуется создать. К счастью, язык JavaScript предусматривает более удобный способ отслеживания списка элементов, называемый массивом.

Массив — это способ хранения более одного значения в одном и том же месте.

Создание массива

Для создания массива необходимо объявить его имя (как и с переменной), а затем добавить список значений, разделенных запятыми: каждое значение представляет собой один из элементов списка.

Как и в случае с переменной вы можете выбрать любое имя, но вам следует придерживаться правил по созданию переменных.

Чтобы создать массив, поместите список элементов в квадратные скобки — [ ].

Например, чтобы создать массив, содержащий дни недели, следует написать такой код:

var days = ['Пн ', 'Вт', 'Ср ', 'Чт', 'Пт', 'Сб ', 'Вс' ];

Квадратные скобки — [ ] — очень важны. Они сообщают интерпретатору JavaScript о том, что он имеет дело с массивом. Вы также можете создать пустой массив, не содержащий элементов:

var playList = [];

Вы создаете пустой массив, если не добавляете в него элементы до тех пор, пока программа не будет запущена. Например, пустой массив может быть использован для отслеживания названий песен, которые посетитель выберет из списка на веб-странице. Вы не можете знать заранее, какие песни будут выбраны, поэтому декларируете пустой массив, а позднее заполняете его элементами по мере того, как посетитель выбирает композиции.

Вы можете хранить в массиве любые значения. Другими словами, в одном и том же массиве могут присутствовать числа, строки, логические значения и даже выражения:

var prefs = [1, -30.4, 'www.eksmo.ru', false, 5+4];

Примечание

В качестве элементов массива вы можете использовать другие массивы и иные объекты. Этот способ позволяет хранить сложные данные.

Разряженные массивы

Разреженным называется массив, индексы элементов которого не образуют непрерывную последовательность чисел, начиная с 0.

Обычно свойство length массива определяет количество элементов в массиве. В разреженном массиве значение свойства length больше количества элементов.

Разреженный массив можно создать путем присваивания значения элементу с индексом, большим, чем текущая длина массива.

a = []; // Соз­даст пус­той мас­сив со зна­че­ни­ем length = 0

a[1000] = 0; // До­ба­вит один эле­мент, но ус­та­но­вит дли­ну рав­ной 1001.

Разреженные массивы обычно более медленны и потребляют больше памяти, чем плотные массивы.

Доступ к элементам массива

Вы можете получить доступ к значению переменной, просто используя ее имя. Например, команда alert(lastName) открывает окно оповещения со значением, сохраненным в переменной lastName.

Однако, поскольку массив может содержать более одного значения, вы не получите доступ к его элементам, просто введя имя массива.

Уникальный номер, называемый индексом, указывает позицию каждого элемента в массиве.

Чтобы получить доступ к отдельно взятому элементу, вы должны использовать его индекс.

let days = ['Пн', 'Вт', 'Ср', 'Чт ', 'Пт ', 'Сб', 'Вс'];

alert(days[0]);

Данный фрагмент кода открывает окно оповещения с элементом 'Пн'.

Массивы индексируются с нуля, это означает, что первый элемент имеет индекс 0, а второй — 1.

Поскольку индексный номер последнего элемента массива всегда на единицу меньше их общего числа то, чтобы получить доступ к последнему элементу, вам достаточно знать, сколько всего элементов содержится в массиве.

Чтобы получить доступ к свойству length, наберите после имени массива точку и слово length. Например, код days.length возвращает количество элементов в массиве days.

days[days.length-1]

Этот фрагмент кода показывает, что вам необязательно использовать конкретное число в качестве индекса (например, 0 в коде days[0]). Вы также можете использовать выражение, возвращающее необходимый номер: в данном случае часть days.length-1 является выражением — оно сначала находит общее количество элементов массива и вычитает из него единицу.

Вы также можете использовать в качестве индекса переменную, содержащую номер:

var i = 0; alert(days[i]);

Изменение значений массива

Вы можете изменить значение элемента массива, присвоив его позиции новое значение.

Например, чтобы присвоить новое значение первому элементу массива days, укажите следующее:

var days = ['Пн ', 'Вт', 'Ср ', 'Чт', 'Пт', 'Сб ', 'Вс' ];

days[0] = 'Понедельник';

Функции — это…

Представьте, что у вас на работе появился новый ассистент, который готов помочь вам в любом деле. Например, вы проголодались и захотели кусочек пиццы, но, поскольку помощник еще не знаком с планом здания, вы должны дать ему подробные инструкции: «Выйди из кабинета, поверни направо к лифту...». В следующий раз ассистент уже будет знать, где готовят пиццу, поэтому вы просто говорите: «Принеси мне кусочек пиццы», он идет в пиццерию и приносит пиццу. Другими словами, вам нужно дать подробные инструкции только один раз. Ваш ассистент запомнит необходимые шаги. И если вы скажете: «Принеси мне кусочек», он мгновенно исчезнет, а через некоторое время появится с пиццей.

Функция — это серия шагов программирования, которые вы задаете в начале сценария — то же, что и подробные инструкции для ассистента. Эти шаги не выполняются при создании функции, вместо этого они сохраняются в памяти браузера, и вы вызываете их, когда это необходимо.

Функции бесценны для выполнения нескольких шагов программы с определенной периодичностью. Например, вы создали на веб-странице фотогалерею, состоящую из 50 эскизов фотографий. Если кто-то щелкнет мышью по маленькой фотографии, вам нужно, чтобы страница потускнела, отобразился заголовок, и экран заполнила большая версия изображения. Каждый раз, когда кто-нибудь щелкнет кнопкой мыши по картинке, процесс повторится. Таким образом, на странице, содержащей 50 маленьких фотографий, ваш сценарий выполнит одну и ту же серию шагов 50 раз. К счастью, вам не придется писать один и тот же код 50 раз, чтобы ваша фотогалерея работала. Вместо этого вы можете записать функцию со всеми необходимыми шагами, а затем эта функция будет выполняться при каждом щелчке по эскизу. Вы пишете код только один раз, но выполняете его, когда хотите.

Основная структура функции выглядит так:

function имяфункции() {

// код JavaScript, который необходимо выполнить

}

Ключевое слово function дает интерпретатору JS знать, что вы создаете функцию.

Далее вы указываете имя функции, как и в случае с переменной, вы можете выбрать любое имя. Кроме того, хорошей практикой считается включение в имя функции глагола, например, updatePage. Глагол дает представление о том, что делает функция, и помогает отличить функцию от переменной.

После имени добавьте пару скобок (), являющихся другой характеристикой функции.

После скобок — пробел, за которым следует фигурная скобка, одна или более строк кода JS и, наконец, закрывающая фигурная скобка. Как и в случае с инструкциями if, фигурные скобки определяют начало и конец фрагмента кода функции.

Важно!

Помните, что функция не запускается сразу после создания, — это все равно, что рассказать ассистенту, где находится пицца, но не послать его за ней.

Код JavaScript, записанный в виде функции, просто сохранен в памяти браузера, ожидая, что позднее, когда он понадобится, его запустят. Но как запустить функцию? Говоря языком программистов, вы вызываете функцию, когда желаете, чтобы она выполнила свою задачу.

Вызвать функцию — значит записать ее имя, за которым следует пара скобок. Например, вы запускаете функцию printToday, набрав следующее: printToday(); Как видно, для запуска функции не нужно много печатать. Будучи однажды созданной, она не требует дополнительного кода, чтобы выдать результат.

Важно!

Вызывая функцию, не забудьте поставить в конце скобки, которые ее запускают. Например, запись printToday ни к чему не приведет, а запись printToday() выполнит функцию.

Передача данных функциям

Функции еще более полезны, если вы сообщаете им необходимую информацию.

Вернемся к вашему ассистенту — парню, приносящему пиццу. Первичная «функция», описанная ранее, заключалась в том, чтобы отправиться в пиццерию, купить порцию и вернуться в офис. Пожелав пиццы, вы «вызвали» функцию, попросив ассистента: «Принеси мне кусочек пиццы!». Конечно же, в зависимости от настроения, вы можете захотеть кусочек пряной, сырной или оливковой пиццы. Чтобы ваши инструкции были более точными, расскажите ассистенту, чего именно вы желаете. Каждый раз, заказывая пиццу, вы можете выбрать иной тип.

Функции JS способны воспринимать информацию (аргументы), которые они используют для выполнения своих действий. Например, вы хотите создать функцию для расчета общей стоимости заказа посетителя, поэтому должны сообщить ей, сколько стоит товар и сколько единиц заказано.

Основная структура будет выглядеть так:

function имяФункции (аргумент) {

// код JavaScript, который необходимо выполнить

}

Параметр (аргумент) — это просто переменная, поэтому вы можете выбрать любое допустимое имя.

Например, вы хотите сэкономить несколько нажатий на клавиши каждый раз, когда набираете код для отображения чего-либо на странице. Вы создаете простую функцию, позволяющую заменить функцию браузера document. write () более кратким именем:

function print(message) {

console.log(message);

}

Функция print имеет один параметр — message. Когда вы вызываете функцию, она получает информацию (сообщение, которое необходимо напечатать), а затем с использованием команды console.log () выводит сообщение на страницу.

Конечно, функция ничего не делает, пока вы ее не запустите, поэтому где-нибудь в другом месте вашего кода вы должны вызвать эту функцию таким образом: print (”Привет, мир.”); Во время выполнения этого кода вызывается функция print и ей посылается строка “Привет, мир.”, которую она выводит в консоль.

Технически процесс посылания информации функции называется передачей аргумента. В данном примере текст 'Привет, мир.' — это аргумент.

Аргументы — это значения, передаваемые в функции, которые соответствуют параметрам, определенным при создании функции.

Функция не ограничена одним параметром. Вы можете присвоить ей любое количество аргументов. Вам просто нужно указать каждый параметр в функции через запятую, например:

function имяФункции (параметр1, параметр2, параметрЗ) {

// код JavaScript, который необходимо выполнить

}

А затем вам нужно вызвать функцию с тем же количеством аргументов, в том же порядке:

имяФункции(аргумент1, аргумент2, аргумент3);

Запрос данных от функций (Инструкция return)

Иногда функция просто делает что-то, например, выводит на страницу сообщение, перемещает объект по экрану, проверяет элементы формы. Но иногда необходимо получить от функции какие-то данные как результат ее работы, ведь от функции «Принеси мне кусочек пиццы» будет мало толку, если в результате вы ничего не получите. Точно также, функция, вычисляющая общую стоимость товаров в корзине, не будет слишком полезной, если не сообщит вам окончательную стоимость.

Некоторые функции, встроенные в JavaScript, как мы уже видели, возвращают значения. Например, команда prompt() выводит диалоговое окно с текстом, и то, что пользователь вводит в него, возвращается. Как вы уже знаете, можно сохранить возвращенное значение в переменной и что-нибудь с ним сделать:

var answer = prompt (“В каком месяце вы родились?”);

Ответ посетителя, введенный в диалоговое окно, сохраняется в переменной answer. Вы можете проверить значение этой переменной, используя управляющие инструкции или произвести над ней любые действия, предусмотренные в языке JavaScript.

Инструкция return внутри функций служит для определения значения, возвращаемого функцией.

Инструкция return имеет следующий синтаксис: return вы­ра­же­ние;

Важно!

Инструкция return может располагаться только в теле функции. Присутствие ее в любом другом месте является синтаксической ошибкой.

Когда выполняется инструкция return, функция возвращает значение вы­ра­же­ния вызывающей программе. Например:

function square(x) {

return x*x; // Возврат значения

}

square(2) // Этот вы­зов вер­нет 4

Если функция не имеет инструкции return, при ее вызове интерпретатор будет выполнять инструкции в теле функции одну за другой, пока не достигнет конца функции, и затем вернет управление вызвавшей ее программе. В этом случае выражение вызова вернет значение undefined.

Инструкция return часто является последней инструкцией в функции, но это совершенно необязательно: функция вернет управление вызывающей программе, как только будет достигнута инструкция return, даже если за ней следуют другие инструкции в теле функции.

Инструкция return может также использоваться без вы­ра­же­ния, тогда она просто прерывает выполнение функции и возвращает значение undefined вызывающей программе.

Функциональные выражения

В JavaScript функция является значением, таким же как строка или число. Как и любое значение, объявленную функцию можно вывести, вот так:

function sayHi() {

alert("Привет");

}

alert(sayHi); // выведет код функции

Обратим внимание на то, что в последней строке после sayHi нет скобок. То есть, функция не вызывается, а просто выводится на экран.

Функцию можно скопировать в другую переменную:

function sayHi() { // (1)

alert("Привет");

}

var func = sayHi; // (2)

func(); // Привет // (3)

sayHi = null;

sayHi(); // ошибка (4)

1. Объявление как бы говорит: “создай функцию и помести её в переменную sayHi”;

2. В строке мы копируем функцию в новую переменную func. Ещё раз обратите внимание: после sayHi нет скобок. Если бы они были, то вызов var func = sayHi() записал бы в func результатработы sayHi() (кстати, чему он равен? правильно, undefined, ведь внутри sayHi нет return).

3. На момент функцию можно вызывать и как sayHi() и как func()

4. Однако, в любой момент значение переменной можно поменять. При этом, если оно не функция, то вызов выдаст ошибку.

Обычные значения, такие как числа или строки, представляют собой данные. А функцию можно воспринимать как действие.

Это действие можно запустить через скобки (), а можно и скопировать в другую переменную, как было продемонстрировано выше.

Итог по функциям

Функции в JavaScript являются значениями. Их можно присваивать, передавать, создавать в любом месте кода.

Если функция объявлена в основном потоке кода, то это Function Declaration.

Если функция создана как часть выражения, то это Function Expression.

Между этими двумя основными способами создания функций есть следующие различия:

	Function Declaration	Function Expression
Время создания	До выполнения первой строчки кода.	Когда управление достигает строки с функцией.
Можно вызвать до объявления	Да (т.к. создаётся заранее)	Нет

Если нет явной причины использовать Function Expression – предпочитайте Function Declaration.

Сравните по читаемости:

// Function Expression

var f = function() {... }

// Function Declaration

function f() {... }

Function Declaration короче и лучше читается. Дополнительный бонус – такие функции можно вызывать до того, как они объявлены.

Используйте Function Expression только там, где это действительно нужно и удобно.

Встреча № 5

Массивы (большие переменные)

Простые переменные, содержат фрагмент информации, например, число или последовательность символов. Они отлично подходят для отслеживания одного показателя (счета, возраста или общей стоимости). Однако если вам приходится отслеживать несколько однородных показателей (дней недели или изображений на веб-странице), то обычные переменные не очень удобны.

Например, вы создали систему электронного заказа на языке JavaScript, отслеживающую товары, которые собирается приобрести посетитель. Если вы решите отслеживать все единицы товара, используя обычные переменные, то должны будете написать следующий код:  

var iteml = 'Игровая приставка Xbox 360';

var item2 = 'Теннисные туфли';

var item3 = 'Подарочный сертификат';

А, если товаров будет больше? Вам придется добавить новые переменные: var item4, var item5 и т. д. Поскольку вы не знаете, сколько товаров захочет заказать посетитель, вы не можете заранее угадать, сколько переменных потребуется создать. К счастью, язык JavaScript предусматривает более удобный способ отслеживания списка элементов, называемый массивом.

Массив — это способ хранения более одного значения в одном и том же месте.

Создание массива

Для создания массива необходимо объявить его имя (как и с переменной), а затем добавить список значений, разделенных запятыми: каждое значение представляет собой один из элементов списка.

Как и в случае с переменной вы можете выбрать любое имя, но вам следует придерживаться правил по созданию переменных.

Чтобы создать массив, поместите список элементов в квадратные скобки — [ ].

Например, чтобы создать массив, содержащий дни недели, следует написать такой код:

var days = ['Пн ', 'Вт', 'Ср ', 'Чт', 'Пт', 'Сб ', 'Вс' ];

Квадратные скобки — [ ] — очень важны. Они сообщают интерпретатору JavaScript о том, что он имеет дело с массивом. Вы также можете создать пустой массив, не содержащий элементов:

var playList = [];

Вы создаете пустой массив, если не добавляете в него элементы до тех пор, пока программа не будет запущена. Например, пустой массив может быть использован для отслеживания названий песен, которые посетитель выберет из списка на веб-странице. Вы не можете знать заранее, какие песни будут выбраны, поэтому декларируете пустой массив, а позднее заполняете его элементами по мере того, как посетитель выбирает композиции.

Вы можете хранить в массиве любые значения. Другими словами, в одном и том же массиве могут присутствовать числа, строки, логические значения и даже выражения:

var prefs = [1, -30.4, 'www.eksmo.ru', false, 5+4];

Примечание

В качестве элементов массива вы можете использовать другие массивы и иные объекты. Этот способ позволяет хранить сложные данные.

Разряженные массивы

Разреженным называется массив, индексы элементов которого не образуют непрерывную последовательность чисел, начиная с 0.

Обычно свойство length массива определяет количество элементов в массиве. В разреженном массиве значение свойства length больше количества элементов.

Разреженный массив можно создать путем присваивания значения элементу с индексом, большим, чем текущая длина массива.

a = []; // Соз­даст пус­той мас­сив со зна­че­ни­ем length = 0

a[1000] = 0; // До­ба­вит один эле­мент, но ус­та­но­вит дли­ну рав­ной 1001.

Разреженные массивы обычно более медленны и потребляют больше памяти, чем плотные массивы.

Доступ к элементам массива

Вы можете получить доступ к значению переменной, просто используя ее имя. Например, команда alert(lastName) открывает окно оповещения со значением, сохраненным в переменной lastName.

Однако, поскольку массив может содержать более одного значения, вы не получите доступ к его элементам, просто введя имя массива.

Уникальный номер, называемый индексом, указывает позицию каждого элемента в массиве.

Чтобы получить доступ к отдельно взятому элементу, вы должны использовать его индекс.

let days = ['Пн', 'Вт', 'Ср', 'Чт ', 'Пт ', 'Сб', 'Вс'];

alert(days[0]);

Данный фрагмент кода открывает окно оповещения с элементом 'Пн'.

Массивы индексируются с нуля, это означает, что первый элемент имеет индекс 0, а второй — 1.

Поскольку индексный номер последнего элемента массива всегда на единицу меньше их общего числа то, чтобы получить доступ к последнему элементу, вам достаточно знать, сколько всего элементов содержится в массиве.

Чтобы получить доступ к свойству length, наберите после имени массива точку и слово length. Например, код days.length возвращает количество элементов в массиве days.

days[days.length-1]

Этот фрагмент кода показывает, что вам необязательно использовать конкретное число в качестве индекса (например, 0 в коде days[0]). Вы также можете использовать выражение, возвращающее необходимый номер: в данном случае часть days.length-1 является выражением — оно сначала находит общее количество элементов массива и вычитает из него единицу.

Вы также можете использовать в качестве индекса переменную, содержащую номер:

var i = 0; alert(days[i]);