Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Дизайн сайтов
Работа с Массивами Использование функций Параллельные массивы

Пример использования функций в javascript - Практические примеры и решения

Количество просмотров: 353

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

Использование функций в javascript - Исходный код

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

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

var i = 0;
var maximum = 0;

while (i < anyNumber.length)
{
document.write("Индексу " + i + " - соответствует число " + anyNumber[i] + "<br />");
if (anyNumber[i] > maximum)
{
maximum = anyNumber[i]
}
i++;
}


document.write("Максимальное число массива: " + maximum + "<br>")

 

var empty = [];

for(i = 0; i < anyNumber.length; i++)

{
if(anyNumber[i] == maximum)
{
empty.push(i);
}
}

document.write("Позиции этого числа в массиве: " + empty);

</script>

Результат - Исходный вариант кода

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70
Позиции этого числа в массиве: 6,13

Первая функция

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

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

function max_Value(array)
{

var i = 0;
var maximum = 0;

while (i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(anyNumber);

document.write(result_1 + " - Максимальное значение массива");

 

var empty = [];

for(i = 0; i < anyNumber.length; i++)

{
if(anyNumber[i] == maximum)
{
empty.push(i);
}
}

document.write("Позиции этого числа в массиве: " + empty);

</script>

Результат - Использование функций - Шаг №1

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70

Комментарии к коду (красным помечены изменения в исходном коде):

  • Итак, в примере была создана функция max_Value с одним параметром array function max_Value(array), в которую заключен код, выделенный жирным шрифтом.
  • В конце функции, при помощи оператора return мы возвращаем переменную maximum return maximum .
  • Затем вызываем функцию max_Value и в качестве ее параметра вместо array указываем исходный массив anyNumber. Результат работы функции заносим в переменную result_1 var result_1 = max_Value(anyNumber).
  • Далее выводим переменную result_1 на экран.

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

Вторая функция

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

var empty = [];

for(i = 0; i < anyNumber.length; i++)

{
if(anyNumber[i] == maximum)
{
empty.push(i);
}
}

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

function max_Value(array)
{

var i = 0;
var maximum = 0;

while (i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(anyNumber);

document.write(result_1 + " - Максимальное значение массива");

 

function index_max_Value(array)
{

var empty = [];

for(i = 0; i < array.length; i++)

{
if(array[i] == result_1)
{
empty.push(i);
}
}

return empty;
}

var result_2 = index_max_Value(anyNumber);

document.write("<p> Позиции этого числа в массиве: " + result_2);

</script>

Результат - Использование функций - Шаг №2

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70

Позиции этого числа в массиве: 6,13

Комментарии к коду:

  • Создаем вторую функцию index_max_Value с параметром array:
    function index_max_Value(array).
  • Функция index_max_Value возвращает массив, который содержит индексы (позиции) максимального значения исходного массива: return empty.
  • Затем вызываем функцию index_max_Value, а в качестве ее параметра вместо array указываем исходный массив anyNumber. Результат работы функции заносим в переменную result_2
    var result_2 = index_max_Value(anyNumber).
  • Далее выводим переменную result_2 на экран.

Обратите внимание: в теле функции index_max_Value в условии if текущее значение исходного массива сравнивается с результатом работы функции max_Value - с переменной result_1 (а это в свою очередь переменная maximum): if(array[i] == result_1).
После чего, если условие верно, индекс текущего значения исходного массива заносится в ранее созданный массив empty: empty.push(i).

Повторное использование функций

Теперь, когда отдельные фрагменты кода вынесены в функции, их можно применять как шаблоны для повторного использования уже с другими массивами.

Для повторного использования функций возьмем другой произвольный массив test и подставим его вместо параметра array при вызове функций.

<script type="text/javascript">

var test = [1, 4, 6, 9, 2, 7, 9];

//First function
function max_Value(array)
{
var i = 0;
var maximum = 0;

while (i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(test);
document.write(result_1 + " - Максимальное значение массива")

//Second function
function index_max_Value(array)
{
var empty = [];

for(i = 0; i < array.length; i++)

{
if(array[i] == result_1)
{
empty.push(i);
}
}
return empty;
}

var result_2 = index_max_Value(test);

document.write("<p> Позиции этого числа в массиве: " + result_2);

</script>

Результат - Повторное испльзование функций - Шаг №3

Индексу 0 - соответствует число 1
Индексу 1 - соответствует число 4
Индексу 2 - соответствует число 6
Индексу 3 - соответствует число 9
Индексу 4 - соответствует число 2
Индексу 5 - соответствует число 7
Индексу 6 - соответствует число 9
9 - Максимальное значение массива

Позиции этого числа в массиве: 3,6

Использование функций в javascript - Тонкости и Нюансы

Существуют определенные тонкости при использовании функций. Далее рассмотрим одну из них.

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

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

<script type="text/javascript">

var anyNumber = [42, 65, 49, 68, 56, 47, 70, 42, 51, 35, 58, 63, 40, 70];

//First function
function all_Value(array)
{
var i = 0;
while(i < array.length)
{
document.write("Индексу " + i + " - соответствует число " + array[i] + "<br />");
i++;
}
}

//Second function
function max_Value(array)
{
var i = 0;
var maximum = 0;

while (i < array.length)
{
if (array[i] > maximum)
{
maximum = array[i]
}
i++;
}
return maximum;
}

var result_1 = max_Value(anyNumber);

//Third function
function index_Max_Value(array)
{
var empty = [];

for(i = 0; i < array.length; i++)

{
if(array[i] == max_Value(array))
{
empty.push(i);
}
}
return empty;
}

var result_2 = index_Max_Value(anyNumber);

all_Value(anyNumber);

document.write("Максимальное число массива: " + result_1 + "<br>");

document.write("Позиция максимального числа в массиве: " + result_2 + "<br>");

</script>

Результат - Использование функций - Тонкости и Нюансы - Шаг №4

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65
Индексу 2 - соответствует число 49
Индексу 3 - соответствует число 68
Индексу 4 - соответствует число 56
Индексу 5 - соответствует число 47
Индексу 6 - соответствует число 70
Индексу 7 - соответствует число 42
Индексу 8 - соответствует число 51
Индексу 9 - соответствует число 35
Индексу 10 - соответствует число 58
Индексу 11 - соответствует число 63
Индексу 12 - соответствует число 40
Индексу 13 - соответствует число 70
Максимальное число массива: 70
Позиция максимального числа в массиве: 6,13

Так вот, обратите внимание на то, что во 2-ой функции из последнего или предпоследнего примеров (текущей страницы) допустимо и используется сравнение: if(array[i] == result_1), но не допустимо следующее: if(array[i] == max_Value(array)).

if(array[i] == result_1) - здесь в сравнении со значением текущего элемента массива используется только возвращаемое функцией max_Value значение переменной maximum.

if(array[i] == max_Value(array)) - здесь же в сравнении используется весь результат работы функции max_Value.

В то время как в текущем (выше представленном) примере допустимы оба варианта сравнения.

Проанализируйте эту ситуацию с использованием функций и массивов в javascript самостоятельно. Это полезно для практики.

Частота просмотра уроков
JavaScript
Работа с Массивами Использование функций Параллельные массивы

Ваши комментарии:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru