«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих
 

Задача на этой странице позволяет закрепить материал по работе с массивами в 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.

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

Фрагмент кода

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

Сейчас реализуем этот же момент иначе.

Фрагмент кода

<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
Популярные заметки
Последние заметки