Как использовать циклы For в JavaScript

Вам нужно пройти через набор чисел, список имен или что-то еще? Чтобы получить каждый элемент массива (или каждую пару ключ-значение из объекта), вы можете использовать цикл for.

Изучая, как перебирать массив, вы снова и снова будете сталкиваться с этим базовым шаблоном:

Итак, что же это за таинственный i? Ну, это просто переменная. Вы можете поместить туда любое слово или букву, если это сделает его более понятным, от x до чизкейк. Вот почему вам нужно, чтобы let в вашем цикле for (также это не должно быть let, это может быть var или const).

Вы объявляете эту переменную, в данном случае i, эквивалентной 0. Вы также говорите, что iвсегда меньше длины массива (по которому вы выполняете итерацию) и, наконец, что вы хотите увеличивайтеiна 1 каждый раз.

Цикл For в действии

Давайте посмотрим на пример! (прочитайте все о том, как это работает, в закомментированных частях. У вас есть проблема: пожалуйста, создайте функцию, которая принимает массив, а затем возвращает новый массив, содержащий все нечетные числа.

let oddNum = function(array){
//create a new array to push the odd numbers into 
  let oddnumbers = []
//iterate through the original array using  a for-loop
  for(let i = 0; i < array.length; i++){
//array[i] here means the original array at index i. So we are checking if the array at index i is NOT divisible by 0 without a remainder. If it is not, then we know for sure it is an odd number
  if (array[i] % 2 !== 0){
//once we confirmed that it is an odd number, we can push it into the new array
    oddnumbers.push(array[i])
  }
  }
//we can return our new array
  return oddnumbers;
}
//here, we have the array that acts as the arguement we are passing into our function. It can be any array with numbers.
let numbersarray = [1,2,3,4,5,6,7,8,9,10]
//we call our function, and print it out
console.log(oddNum(numbersarray))
//our result for this particular problem shoud be [1,3,3,7,9] printed to the console.

Как перебрать массив в обратном порядке?

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

let oddNum = function(array){
  let oddnumbers = []
//time to loop through the array again. 
//This time, we are looping through backwords
//with the starting point being array.length-1.
  for(let i = array.length-1 ; i > 0; i--){
  if (array[i] % 2 !== 0){

    oddnumbers.push(array[i])
  }
  }
  return oddnumbers;
}
.
let numbersarray = [1,2,3,4,5,6,7,8,9,10]
console.log(oddNum(numbersarray))
//our result for this particular problem shoud be [9,7,5,3] printed to the console.

В этом примере важно отметить тот факт, что мы используем array.length-1. Почему это? Ну, когда мы используем свойство .length, мы фактически получаем количество всех элементов в массиве. Это, однако, не учитывает, что мы начинаем все индексирование с 0. Поэтому, чтобы мы могли пройтись по индексам в обратном порядке, не столкнувшись с неопределенным в конце, когда мы нажмем 0, нам нужно приспособиться к этому, используя -1.

Как работают вложенные циклы?

Вложенные циклы могут помочь вам углубиться в свои массивы или работать с двумерными массивами.

Здесь мы перебираем двумерный массив с одним циклом for:

let candy = [["chocolates", "caramels"], ["hard candy", "sugar free"], ["gum", "mints", "breath strips"]]

let candyFunc = function(array){
  for (let i = 0; i < array.length; i++){
    console.log(array[i])  
}
}
candyFunc(candy)

это приведет к этой печати на терминал:

Это элементы внешнего массива.

Затем мы можем пройтись по тому же массиву двумя циклами:

let candy = [["chocolates", "caramels"], ["hard candy", "sugar free"], ["gum", "mints", "breath strips"]]

let candyFunc = function(array){
  for (let i = 0; i < array.length; i++){
       let innerelements = array[i] 
    for (let j = 0; j < innerelements.length; j++)
    console.log(innerelements[j])
}
}
candyFunc(candy)

Выше вы можете увидеть, что выводят два цикла for. Это элементы внутренних массивов внутри массива «конфеты». Используя вложенные циклы, вы можете получить доступ к строкам или массивам внутри внешнего массива.

Небольшой взгляд в будущее циклов For-Loop:

Когда вы действительно познакомитесь с этим циклом for, вы получите возможность использовать циклы for, где все происходит «под капотом»:

for(let element in array){
console.log(i)
}

Это даст вам тот же эффект, что и использование ручного цикла for. Небольшой совет: поэкспериментируйте: что произойдет, если вы используете of вместо in?

Если вы хотите узнать больше об основах, ознакомьтесь с основами Функций JavaScript.

Если вы хотите узнать о Fat Arrow Functions, нажмите здесь.