Для… в VS Для… из — JavaScript

После некоторого времени написания кода на JavaScript я на днях понял, что все еще немного путаюсь между циклами for…in и for…of в JavaScript. . Проведя небольшое исследование и поэкспериментировав с кодом в своей консоли, я наконец понял, в чем заключается главное отличие, и захотел поделиться тем, что узнал.

For…in перебирает все перечисляемые свойства объекта или массива. По определению, перечислимое свойство — это свойство, внутренний флаг которого имеет значение true. Это было очень запутанно для меня, чтобы понять, но после тестирования в консоли я пришел к следующим трем выводам:

• Если вы перебираете строку → значением будут индексы
• Если вы перебираете массив → значение также будет индексом
• Если вы зацикливаетесь на объекте → значения будут фактическими значениями пары ключ/значение для этого объекта.

Некоторые примеры:

function test(){
  let str = "hello"
     for(let val in str){
         console.log(val)
     }
}

Этим выводом для этого будет индекс каждой буквы в строке, например:

// 0  1  2  3  4

Тогда для массива это будет то же самое:

function test(){
  let arr = [5,6,7,8]
     for(let val in arr){
         console.log(val)
     }
}

Результатом являются такие индексы:

// 0  1  2  3

И, наконец, для объекта:

function test(){
  let obj = {A: "a", B: "b", C: "c"}
     for(let val in obj){
         console.log(val)
     }
}

Выходы - это все фактические значения:

// A  B  C

Разница при использовании цикла for…of заключается в том, что теперь вы перебираете все итерируемые объекты. Таким образом, фактические значения элементов или букв в массиве или строке и ключи в объекте. Используя те же примеры, что и выше, я покажу вам новые результаты.

Для строки:

function test(){
  let str = "hello"
    for(let val of str){
       console.log(val)
    }
}

Этим выводом будет каждая буква в строке

// h  e  l  l  o

Затем для массива:

function test(){
  let arr = [5,6,7,8]
     for(let val of arr){
         console.log(val)
     }
}

На выходе будет каждый элемент массива:

// 5  6  7  8

И, наконец, для объекта:

function test(){
  let obj = {A: "a", B: "b", C: "c"}
     for(let val of obj){
         console.log(val)
     }
}

Выходные данные — это все фактические значения в паре ключ: значение:

// "a"  "b"  "c"

Я так привык постоянно использовать базовый цикл for, когда он может ОЧЕНЬ пригодиться. Я всегда знал, что делает каждый из этих циклов, но прошло некоторое время с тех пор, как я проверял их, чтобы убедиться, что я действительно знаю, что происходит под ремнем. Я надеюсь, что это может помочь другим понять, когда использовать каждый цикл!