Skip to content

30 Days Of JavaScript

Twitter Follow Автор: Asabeneh Yetayeh
Январь, 2020

<< День 5 | День 7 >>

Day 5

📔 День 6

Циклы

Большинство действий, которые мы делаем в жизни, полны повторений. Представьте себе, если я попрошу вас распечатать от 0 до 100, используя console.log(). Для реализации этой простой задачи может потребоваться от 2 до 5 минут, такая утомительная и повторяющаяся задача может быть выполнена с помощью цикла.

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

Цикл for

// Структура цикла for
for(initialization, condition, increment/decrement){
  // код идет здесь
}

for (let i = 0; i <= 5; i++) {
  console.log(i);
}
// 0 1 2 3 4 5

for (let i = 5; i >= 0; i--) {
  console.log(i);
}
// 5  4  3  2  1  0

for (let i = 0; i <= 5; i++) {
  console.log(`${i} * ${i} = ${i * i}`);
}

0 * 0 = 0
1 * 1 = 1
2 * 2 = 4
3 * 3 = 9
4 * 4 = 16
5 * 5 = 25

const countries = ["Finland", "Sweden", "Denmark", "Norway", "Iceland"];
const newArr = [];
for (let i = 0; i < countries.length; i++) {
  newArr.push(countries[i].toUpperCase());
}
//["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]

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

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  sum = sum + numbers[i]; // можно сократить: sum += numbers[i]
}

console.log(sum); // 15

Создание нового массива на основе существующего массива

const numbers = [1, 2, 3, 4, 5];
const newArr = [];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  newArr.push(i * i);
}

console.log(newArr); // [1, 4, 9, 16, 25]

const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
const newArr = [];
for (let i = 0; i < countries.length; i++) {
  newArr.push(countries[i].toUpperCase());
}

console.log(newArr); // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]

Цикл while

let i = 0;
while (i <= 5) {
  console.log(i);
  i++;
}
// 0 1 2 3 4 5

Цикл do while

let i = 0;
do {
  console.log(i);
  i++;
} while (i <= 5);
// 0 1 2 3 4 5

Цикл for of

Мы используем для цикла для массивов. Это очень удобный способ перебора массива, если мы не заинтересованы в индексе.

for (const element of arr) {
  // код идет здесь
}

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num); //1 2 3 4 5
}

for (const num of numbers) {
  console.log(num * num); //1 4 9 16 25
}

// добавление всех чисел в массиве
let sum = 0;
for (const num of numbers) {
  sum += sum + num; // можно также сократить, как это: sum += num
}
console.log(sum); // 15

const webTechs = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Redux",
  "Node",
  "MongoDB"
];

for (const tech of webTechs) {
  console.log(tech.toUpperCase()); // HTML CSS JAVASCRIPT REACT NODE MONGODB
}

for (const tech of webTechs) {
  console.log(tech[0]); // получить только первую букву каждого элемента,  H C J R N M
}

const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
const newArr = [];
for (const country of countries) {
  newArr.push(country.toUpperCase());
}

console.log(newArr); // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]

break

контент будет добавлен в ближайшее время

continue

контент будет добавлен в ближайшее время

🌕 Ты такой смелый, что дошел так далеко. Теперь вы получили возможность автоматизировать повторяющиеся и утомительные задачи. Вы только что завершили 6-й день испытаний, и вы на 6 ступенек на пути к успеху. Теперь сделайте несколько упражнений для вашего мозга и ваших мышц.

💻 Упражнения: День 6

Упражнения: Уровень 1

const countries = [
  "Albania",
  "Bolivia",
  "Canada",
  "Denmark",
  "Ethiopia",
  "Finland",
  "Germany",
  "Hungary",
  "Ireland",
  "Japan",
  "Kenya"
];

const webTechs = [
  "HTML",
  "CSS",
  "JavaScript",
  "React",
  "Redux",
  "Node",
  "MongoDB"
];

const mernStack = ["MongoDB", "Express", "React", "Node"];
  1. Выполните итерацию от 0 до 10 с помощью цикла for, сделайте то же самое с помощью циклов while и do while
  2. Итерируйте 10 к 0, используя цикл for, cделайте то же самое, используя цикл while и do while
  3. Итерируйте от 0 до n, используя цикл for
  4. Напишите цикл, который создает следующий шаблон, используя console.log():
    #
    ##
    ###
    ####
    #####
    ######
    #######
  1. Используйте цикл для печати следующего шаблона:
0 x 0 = 0
1 x 1 = 1
2 x 2 = 4
3 x 3 = 9
4 x 4 = 16
5 x 5 = 25
6 x 6 = 36
7 x 7 = 49
8 x 8 = 64
9 x 9 = 81
10 x 10 = 100
  1. Используя цикл, напечатайте следующий шаблон
 i    i^2   i^3
 0    0     0
 1    1     1
 2    4     8
 3    9     27
 4    16    64
 5    25    125
 6    36    216
 7    49    343
 8    64    512
 9    81    729
 10   100   1000
  1. Используйте цикл для перебора от 0 до 100 и печати только четных чисел.
  2. Используйте цикл для итерации от 0 до 100 и выведите только нечетные числа
  3. Используйте цикл для итерации от 0 до 100 и печатайте только простые числа

  4. Используйте цикл для итерации от 0 до 100, распечатайте и распечатайте сумму всех чисел.

    Сумма всех чисел 5050.

  5. Используйте цикл for для итерации от 0 до 100 и выведите сумму всех четных чисел и сумму всех коэффициентов.

    The sum of all evens is 2550. And the sum of all odds is 2500.

  6. Используйте цикл for для итерации от 0 до 100 и выведите сумму всех четных чисел и сумму всех шансов. Вывести сумму четных и сумму шансов в виде массива

      [2550, 2500]

  7. Разработайте небольшой скрипт, который генерирует массив из 5 случайных чисел

  8. Разработайте небольшой скрипт, который генерирует массив из 5 случайных чисел, числа должны быть уникальными

  9. Разработайте небольшой скрипт, который генерирует случайный идентификатор из шести символов:

    5j2khz

Упражнения: Уровень 2

  1. Разработайте небольшой скрипт, который генерирует произвольное количество символов случайного идентификатора:
  fe3jo1gl124g

  xkqci4utda1lmbelpkm03rba
  1. Напишите скрипт, который генерирует случайное шестнадцатеричное число
'#ee33df'
  1. Напишите скрипт, который генерирует случайное число цветов RGB.
rgb(240,180,80)
  1. Используя вышеуказанный массив стран, создайте следующий новый массив.
["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
  1. Используя приведенный выше массив стран, создайте массив для длины стран.
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
  1. Используйте массив стран для создания следующего массива массивов:
  [
  ['Albania', 'ALB', 7],
  ['Bolivia', 'BOL', 7],
  ['Canada', 'CAN', 6],
  ['Denmark', 'DEN', 7],
  ['Ethiopia', 'ETH', 8],
  ['Finland', 'FIN', 7],
  ['Germany', 'GER', 7],
  ['Hungary', 'HUN', 7],
  ['Ireland', 'IRE', 7],
  ['Japan', 'JAP', 5],
  ['Kenya', 'KEN', 5]
]
  1. В приведенном выше массиве стран проверьте, существует ли страна или страны, содержащие слово 'land'. Если есть страны, содержащие 'land', выведите ее в виде массива. Если нет страны, содержащей слово 'land', выведите «All these are countries without land».
['Finland', 'Iceland']
  1. В приведенном выше массиве стран проверьте, существует ли страна или страны, заканчивающиеся на «ia». Если есть страны, оканчивающиеся на, распечатайте его, как массив. Если нет страны, содержащей слово «ai», выведите «Эти страны заканчиваются без ia».
['Albania', 'Bolivia','Ethiopia']
  1. Используя приведенный выше массив стран, найдите страну, содержащую наибольшее количество символов.
Ethiopia

  1. Используя приведенный выше массив стран, найдите страну, содержащую всего 5 символов.

    ['Japan', 'Kenya']

  2. Найдите самое длинное слово в массиве webTechs.

  3. Используйте webTechs для создания следующего массива массивов:

    [["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]

  4. Приложение, созданное с использованием MongoDB, Express, React и Node, называется стеком MERN. Создайте аббревиатуру MERN с помощью массива mernStack.

  5. Итерируйте по массиву, ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"], используя цикл for или цикл for of печатайте из предметов.
  6. Это массив фруктов ['banana', 'orange', 'mango', 'lemon'] измените порядок, используя цикл, без использования обратного метода.

  7. Распечатайте все элементы массива, как показано ниже.

    const fullStack = [
  ["HTML", "CSS", "JS", "React"],
  ["Node", "Express", "MongoDB"]
];

      HTML
  CSS
  JS
  REACT
  NODE
  EXPRESS
  MONGODB

Упражнения: Уровень 3

  1. Скопируйте массив стран (избегайте мутаций)
  2. Массивы изменчивы. Создайте копию массива, которая не изменяет оригинал. Сортировать скопированный массив и сохранить в переменной sortedCountries
  3. Отсортируйте массив webTechs и массив mernStack
  4. Извлеките все страны содержащие слово 'land' в массив стран и распечатайте его как массив
  5. Найдите страну, содержащую наибольшее количество символов в массиве стран
  6. Извлеките все страны содержащие слово 'land' from the массив стран и распечатайте его как массив
  7. Извлеките все страны, содержащие только четыре символа из массива стран и распечатайте его как массив
  8. Извлеките все страны, содержащие два или более слов из массив стран и распечатайте его как массив
  9. Разверните массив стран и примените метод capitalize для каждой страны, храня его в виде массива

🎉 ПОЗДРАВЛЯЕМ ! 🎉

<< День 5 | День 7 >>