Добавление элементов в массив

Язык JavaScript предусматривает несколько способов добавления содержимого в массив.

Добавление элемента в конец массива

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

Допустим, вы создали массив:

var properties = ['red', '14px', 'Arial'];

В данный момент этот массив содержит три элемента. Вы уже знаете, что индекс последнего элемента массива на единицу меньше общего числа элементов. Таким образом, последний элемент в данном массиве — properties[2]. Добавим еще один элемент в массив:

properties[3] = 'bold';

Данная строка кода помещает элемент 'bold' на четвертую позицию, в результате получается массив из четырех элементов: ['red','14рх','Arial','bold'].

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

properties[properties.length] = 'bold';

Вы также можете использовать метод push(), который добавит в конец массива новое значение, указанное в круглых скобках. Например:

properties: properties.push('bold');

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

properties.push('bold','italic','underlined');

Добавление элемента в начало массива

Если вы хотите добавить элемент в начало массива, используйте метод unshift().

Вот как можно добавить значение 'bold' в начало массива:

var properties = ['red','14px','Arial'];

­properties.unshift('bold');

В результате массив properties будет содержать четыре элемента: ['bold','red','14рх','Arial'].

Также можете использовать функцию unshift() для вставки нескольких элементов в начало массива:

properties.unshift('bold','italic','underlined');

Команды push() и unshift() возвращают значение.

После выполнения своих задач команды push() и unshift() предоставляют число элементов в массиве:

var р = [0,1,2,3];

var totalltems = p.push(4,5);

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

Удаление элементов из массива

Если вы хотите удалить элемент из начала или из конца массива, используйте методы pop() или shift().

Метод pop () удаляет элемент из конца массива, а метод shift() — из начала.

Методы pop() и shift() возвращают только что удаленное значение.

Например, приведенный ниже код удаляет значение и сохраняет его в переменной removedltem:

var р = [0,1,2,3];

var removedltem = p.shift();

Значение removedltem после выполнения — 0, а массив р теперь содержит элементы [1,2,3].

Неочевидное поведение свойства length

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

a = [1,2,3,4,5]; // Соз­дать мас­сив с пя­тью эле­мен­та­ми.

a.length = 3; // те­перь мас­сив a со­дер­жит эле­мен­ты [1,2,3].

a.length = 0; // Уда­лит все эле­мен­ты. a - пус­той мас­сив [].

a.length = 5; // Дли­на рав­на 5, но эле­мен­ты от­сут­ст­ву­ют

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

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

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

Например, чтобы присвоить новое значение первому элементу массива 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. Однако, в любой момент значение переменной можно поменять. При этом, если оно не функция, то вызов выдаст ошибку.

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

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