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

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

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

Практическая задача по работе с Массивами в javascript - Добавление элементов - Создание пустого массива - Циклы и Массивы

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

Задача на этой странице позволяет закрепить материал по работе с массивами в Javascript. Также будем работать с циклами и условиями.

Условие задачи:

Есть массив произвольных чисел:

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

Нужно сделать следующее:

1. Вывести значения всех элементов массива и соответствующие им индексы:

Индексу 0 - соответствует число 42
Индексу 1 - соответствует число 65

и т.д...

2. Найти и вывести на экран максимальное число массива:

Максимальное число массива: 70

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

Позиции (индексы) максимального числа в массиве: 6,13

В условии задачи содержатся три задания, поэтому и решение будет состоять из 3-х частей.

1 часть - Как вывести значения всех элементов массива и соответствующие им индексы?

Что нужно знать?

1. Нумерация элементов массива начинается с нуля, то есть первый элемент массива имеет индекс 0, второй элемент - индекс 1 и т.д.

2. Знать, как вывести данные из массива.

3. Как узнать длину (число элементов) массива - свойство length.

3. Вспомнить, как работает цикл while или for (цикл for применим в 3-ей части решения).

4. Полезно будет обратиться к уроку Цикл while и Массивы.

<script type="text/javascript">

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

var i = 0; /* Счетчик */

/* В цикле перебираем все элементы массива и выводим на экран индексы и соответствующие им значения */
while(i < anyNumber.length)
{

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

i++; /* Увеличиваем счетчик на единицу */
}

</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

Комментарии к решению:

  • Устанавливаем счетчик i = 0.
  • При помощи цикла while перебираем все элементы Массива:
    while(i < anyNumber.length)(пока счетчик меньше числа элементов массива...).
  • Выводим на экран сначала индекс каждого элемента i, затем значение соответствующего ему элемента: anyNumber[i].
  • В конце цикла увеличиваем счетчик на единицу i++.

2 часть - Как найти максимальное число в массиве?

Что нужно знать?

1. Помимо знаний, не обходимых для решения 1-ой части задачи, здесь мы будем иметь дело с условием - оператор if.

<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)
{

/* ... в условии сравниваем их значения с переменной maximum */
if (anyNumber[i] > maximum)
{
maximum = anyNumber[i]
}

i++; /* Увеличиваем счетчик */
}

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

</script>

Решение - 2-ой части задачи - Результат...

Максимальное число массива: 70

Комментарии к решению:

  • Устанавливаем счетчик i = 0 и создаем переменную maximum = 0, в которую будем заносить максимальное число массива.
  • При помощи цикла while перебираем все элементы Массива:
    while(i < anyNumber.length)(пока счетчик меньше длины массива...).
  • В условии проверяем: если значение текущего элемента массива больше переменной maximum if (anyNumber[i] > maximum), то присваиваем ей это значение maximum = anyNumber[i].
  • В конце цикла увеличиваем счетчик на единицу i++.
  • Выводим результат на экран...

    Подробнее о том, что происходит в цикле и условии?

    1. Берем 1-ый элемент массива 42 и сравниваем его с начальным значением переменной maximum, то есть с 0.

    2. Проверяем 42 > 0, поэтому присваиваем это значение переменной maximum. Теперь maximum = 42.

    3. Берем 2-ой элемент массива 65 и сравниваем его с текущим значением переменной maximum, то есть с 42.

    4. Проверяем 65 > 42, поэтому теперь присваиваем значение 65 переменной maximum.

    5. 3-ий элемент массива 49 будет меньше 65, поэтому на этом шаге переменная maximum не меняет своего значения. И по-прежнему maximum = 65.

    6. 4-ый элемент массива равен 68, что больше 65. Поэтому переменная maximum снова меняет свое значение - на 68.

    7. И так далее, пока цикл не переберет все элементы массива. В итоге переменная maximum остановиться на максимальном значении, то есть на 70.

3 часть - Определяем индекс максимального числа массива

Что нужно знать?

1. В примерах выше использовался цикл while, но для разнообразия и для практики, здесь мы будем работать с циклом for.

2. Как создать пустой массив?

3. Добавление элементов в массив - метод push.

Помимо метода push существует другой способ добавления элементов в массив:

empty[0] = "Text"; /* Заносим в массив текст - это первый элемент массива */

empty[1] = 49; /* Заносим в массив число - это второй элемент массива */

Решение для 3-ей части задачи отталкивается от результата, полученного во 2-ой части, где было получено максимальное число массива и занесено в переменную maximum.

<script type="text/javascript">

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

var maximum = 70; /* Максимальное число массива, найденное во 2-ой части задания */

var empty = []; /* Пустой массив */

/* Цикл for - для перебора всех элементов массива */
for(i = 0; i < anyNumber.length; i++)
{

/* Сравнение значения текущего элемента массива с его максимальным значением и .... */
if(anyNumber[i] == maximum)
{
empty.push(i); /* ... занесение индекса текущего элемента массива в новый массив empty */
}

} /* Конец цикла for */

document.write("Позиции (индексы) максимального числа в массиве: " + empty); /* Выводим массив empty */

</script>

Решение - 3-ей части задачи - Результат...

Позиции (индексы) максимального числа в массиве: 6,13

Комментарии к решению:

  • Работаем с максимальным значением массива, которое было определено во второй части задания maximum = 70.
  • Создаем пустой массив var empty = [].
  • При помощи цикла for перебираем все элементы Массива:
    for(i = 0; i < anyNumber.length; i++).
  • В условии проверяем: если значение текущего элемента массива равно переменной maximum if(anyNumber[i] == maximum), то индекс этого значения заносим в ранее созданный пустой массив empty при помощи метода push empty.push(i).
  • Таким образом мы занесли в пустой массив индексы максимального числа массива. Выводим значения элементов массива empty.

4 часть - Способы добавления элементов в массив

В предыдущем примере добавление элементов в массив осуществлялось при помощи метода push.

Сейчас реализуем этот же момент иначе: о другом способе создания/добавления элементов массива говорилось в начале 3-ей части задачи.

<script type="text/javascript">

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

var empty = [];

var maximum = 70;

var i = 0;

var j = 0;

while (i < anyNumber.length)

{
if(anyNumber[i] == maximum)
{
empty[j] = i;
j++;

}

i++;
}

document.write("Позиции (индексы) максимального числа в массиве: " + empty);

</script>

Добавляем элементы в массив другим способом Результат...

Позиции (индексы) максимального числа в массиве: 6,13

Проанализируйте этот вариант решения 3-ей части задачи самостоятельно...

5 часть – Код для решения всей задачи

Ниже представлен Javascript-код, который содержит в себе все три решения исходной задачи.

<script type="text/javascript">

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

var i = 0;

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

 

var i = 0;

var maximum = 0;

while (i < anyNumber.length)
{
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>

Работа с Массивами - Добавление элементов - Создание пустого массива - Циклы и Массивы - Результат...

6 часть – Оптимизация кода

Окончательный код из предыдущего примера можно оптимизировать: сделать его короче и компактнее.

<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

Здесь код, выделенный жирным шрифтом, объединяет первые два решения.

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

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

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

Комментарий добавил(а): Admin
Дата: 2017-11-27

Это тестовый комментарий...

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

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

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