Eu sei o que é for... inloop (itera sobre a chave), mas ouvi pela primeira vez sobrefor... of (itera sobre valor).

Estou confuso com for... ofloop. Não recebi um adjetivo. Este é o código abaixo:

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it is does not log "3", "5", "7", "hello"
}

O que eu consegui é que for... ofitera sobre os valores da propriedade. Então, por que ele não registra (retorna) em "3", "5", "7", "hello"vez de "3", "5", "7"? mas o for... inloop itera sobre cada tecla ( "0", "1", "2", "foo"). Aqui, o for... inloop também itera sobre a foochave. Mas for... ofnão itera sobre o valor da foopropriedade, ou seja "hello". Por que é assim?

Em resumo:

Aqui eu console o for... ofloop. Ele deve registrar, "3", "5", "7","hello"mas aqui ele registra "3", "5", "7". Por quê ?

Exemplo de Link

for in faz um loop sobre os nomes de propriedades enumeráveis ​​de um objeto.

for of(novo no ES6) usa um objeto específico iteradore faz um loop sobre os valores gerados por ele.

No seu exemplo, o iterador da matriz gera todos os valores da matriz (ignorando propriedades que não são de índice).

Eu encontro uma resposta completa em: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Embora seja para script de tipo, isso também é para javascript)

As instruções for..ofe for..initeram nas listas; os valores iterados são diferentes, porém, for..inretorna uma lista de chaves no objeto que está sendo iterado, enquanto for..ofretorna uma lista de valores das propriedades numéricas do objeto que está sendo iterado.

Aqui está um exemplo que demonstra essa distinção:

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

Outra distinção é que para .. in opera em qualquer objeto; serve como uma maneira de inspecionar propriedades nesse objeto. for..ofpor outro lado, está interessado principalmente em valores de objetos iteráveis. Objetos internos, como a implement Symbol.iteratorpropriedade Map e Set , permitindo acesso aos valores armazenados.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

For ... in loop

O loop for ... in melhora os pontos fracos do loop for, eliminando a lógica de contagem e a condição de saída.

Exemplo:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Mas você ainda precisa lidar com a questão de usar um índice para acessar os valores da matriz, e isso fede; quase o torna mais confuso do que antes.

Além disso, o loop for ... in pode causar grandes problemas quando você precisa adicionar um método extra a uma matriz (ou outro objeto). Como o loop for ... in sobre todas as propriedades enumeráveis, isso significa que, se você adicionar outras propriedades ao protótipo da matriz, essas propriedades também aparecerão no loop.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Impressões:

0 0

1

2

3

4

5

6

7

8

9

function () {for (let i = 0; i <this.length; i ++) {this [i] = this [i] .toFixed (2); }}

É por isso que os loops ... in são desencorajados ao fazer um loop sobre matrizes.

NOTA : O loop forEach é outro tipo de loop for em JavaScript. No entanto, forEach()é realmente um método de matriz, portanto, só pode ser usado exclusivamente com matrizes. Também não há como parar ou interromper um loop forEach. Se você precisar desse tipo de comportamento em seu loop, precisará usar um loop for básico.

For ... de loop

O loop for ... of é usado para fazer um loop sobre qualquer tipo de dados que seja iterável.

Exemplo:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

Impressões:

0 0

1

2

3

4

5

6

7

8

9

Isso torna o loop for ... of a versão mais concisa de todos os loops for.

Mas espere, tem mais! O loop for ... of também tem alguns benefícios adicionais que corrigem os pontos fracos dos loops for e for ....

Você pode parar ou interromper um loop for ... a qualquer momento.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

Impressões:

1

3

5

7

9

E você não precisa se preocupar em adicionar novas propriedades aos objetos. O loop for ... of fará loop somente sobre os valores no objeto.

Diferença for..ine for..of:

Ambas for..ine for..ofsão construções de loop que são usadas para iterar sobre estruturas de dados. A única diferença é sobre o que eles iteram:

1. for..initera sobre todas as chaves de propriedade enumeráveis de um objeto
2. for..ofitera sobre os valores de um objeto iterável. Exemplos de objetos iteráveis ​​são matrizes, seqüências de caracteres e NodeLists.

Exemplo:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

Neste exemplo, podemos observar que o for..inloop itera sobre as chaves do objeto, que é um objeto de matriz neste exemplo. As chaves são 0, 1, 2, que correspondem aos elementos da matriz que adicionamos e addedProp. É assim que o arrobjeto array fica no chrome devtools:

Você vê que nosso for..inloop não faz nada além de simplesmente iterar sobre esses valores.

O for..ofloop em nosso exemplo itera sobre os valores de uma estrutura de dados. Os valores neste exemplo específico são 'el1', 'el2', 'el3'. Os valores que uma estrutura de dados iterável retornará usando for..ofdepende do tipo de objeto iterável. Por exemplo, uma matriz retornará os valores de todos os elementos da matriz, enquanto uma string retorna todos os caracteres individuais da string.

A for...ininstrução itera sobre as propriedades enumeráveis ​​de um objeto, em uma ordem arbitrária. Propriedades enumeráveis ​​são aquelas cujo sinalizador interno [[Enumerable]] está definido como true; portanto, se houver alguma propriedade enumerável na cadeia de protótipos, o for...inloop também será iterado.

A for...ofinstrução itera sobre os dados que o objeto iterável define para ser iterado.

Exemplo:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

Como anteriormente, você pode pular a adição hasOwnPropertyde for...ofloops.

A instrução for-in itera sobre as propriedades enumeráveis ​​de um objeto, em ordem arbitrária.

O loop iterará sobre todas as propriedades enumeráveis ​​do próprio objeto e aquelas que o objeto herda do protótipo do construtor

Você pode pensar nisso como "for in", basicamente itera e lista todas as chaves.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

Existem alguns tipos de dados já definidos que nos permitem iterá-los facilmente, por exemplo, Array, Map, String Objects

Normal para itera sobre o iterador e, em resposta, fornece as chaves que estão na ordem de inserção, como mostrado no exemplo abaixo.

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

Agora, se tentarmos o mesmo com for de , em resposta, ele nos fornecerá os valores, não as chaves. por exemplo

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

Portanto, olhando para os dois iteradores, podemos diferenciar facilmente a diferença entre os dois.

Nota: - Para apenas funciona com o Symbol.iterator

Portanto, se tentarmos iterar sobre o objeto normal, ele nos dará um erro, por exemplo:

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

O quarto não é iterável

Agora, para iterar, precisamos definir um Symbol.iterator do ES6, por exemplo

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

Essa é a diferença entre For in e For of . Espero que isso possa esclarecer a diferença.

Outra diferença entre os dois loops, que ninguém mencionou antes:

A reestruturação for...inestá obsoleta. Use em for...ofvez disso.

Fonte

Portanto, se queremos usar a desestruturação em um loop, para obter o índice e o valor de cada elemento do array , devemos usar o for...ofloop com o método Arrayentries() :

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

Todo mundo explicou por que esse problema ocorre, mas ainda é muito fácil esquecê-lo e depois coçar a cabeça por que você obteve resultados errados. Especialmente quando você está trabalhando em grandes conjuntos de dados, quando os resultados parecem bons à primeira vista.

Usando Object.entriesvocê, assegure-se de percorrer todas as propriedades:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

A ver muitas boas respostas, mas eu decido colocar meus 5 centavos apenas para ter um bom exemplo:

For in loop

itera sobre todos os adereços enumeráveis

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

For do laço

itera sobre todos os valores iteráveis

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

Quando comecei a aprender o loop for in e of , fiquei confuso com minha saída também, mas com algumas pesquisas e compreensão, você pode pensar no loop individual da seguinte maneira:

1. for ... in loop retorna os índices da propriedade individual e não tem efeito sobre o valor da propriedade , faz um loop e retorna informações sobre a propriedade e não sobre o valor . Por exemplo

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

O código acima está apenas criando um objeto chamado profile ; nós o usaremos nos dois exemplos ; portanto, não se confunda quando vir o objeto de perfil em um exemplo, apenas saiba que ele foi criado.

Então agora vamos usar o loop for ... in abaixo

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

Agora, o motivo da saída é que temos quatro (4) propriedades em nosso objeto de perfil e indexação, como todos sabemos, começa em 0 ... n , portanto, obtemos o índice de propriedades 0,1,2,3, pois estamos trabalhando com o loop for..in .

2. for ... of loop * pode retornar a propriedade , o valor ou ambos , vamos dar uma olhada em como. No javaScript, não podemos fazer um loop através dos objetos normalmente, como faríamos nas matrizes; portanto, existem alguns elementos que podemos usar para acessar qualquer uma das nossas opções a partir de um objeto.

   • Object.keys ( nome-do-objeto-vai-para-cá ) >>> Retorna as chaves ou propriedades de um objeto.

   • Object.values ( nome-do-objeto-vai-aqui ) >>> Retorna os valores de um objeto.

   • Object.entries ( nome do objeto vai-aqui ) >>> Retorna ambas as chaves e valores de um objeto.

Abaixo estão exemplos de seu uso, preste atenção a Object.entries () :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Ao usar Object.entries () , você deve chamar duas entradas no objeto, ou seja , as chaves e os valores. Você pode chamar os dois por qualquer uma das entradas. Exemplo Abaixo.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

Faça comentários nas seções de peças pouco claras.

O for-inlaço

for-inloop é usado para percorrer as propriedades enumeráveis ​​de uma coleção, em uma ordem arbitrária . Uma coleção é um objeto do tipo contêiner cujos itens podem estar usando um índice ou uma chave.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-inloop extrai as propriedades enumeráveis ( chaves ) de uma coleção de uma só vez e itera sobre ela uma de cada vez. Uma propriedade enumerável é a propriedade de uma coleção que pode aparecer em for-inloop.

Por padrão, todas as propriedades de uma matriz e um objeto aparecem em for-inloop. No entanto, podemos usar o método Object.defineProperty para configurar manualmente as propriedades de uma coleção.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

No exemplo acima, a propriedade ddo myObjecte o índice 3de myArraynão aparecem no for-inloop porque estão configurados com enumerable: false.

Existem alguns problemas com for-inloops. No caso de Arrays, o for-inloop também considerará methodsadicionado à matriz usando a myArray.someMethod = fsintaxe, no entanto, myArray.lengthpermanece 4.

O for-oflaço

É um equívoco que o for-ofloop itera sobre os valores de uma coleção. for-ofloop itera sobre um Iterableobjeto. Um iterável é um objeto que possui o método com o nome Symbol.iteratordiretamente em um de seus protótipos.

Symbol.iteratorO método deve retornar um iterador . Um iterador é um objeto que possui um nextmétodo. Este método, quando chamado de retorno valueedone propriedades.

Quando iteramos um objeto iterável usando for-ofloop, Symbol.iteratoro método será chamado assim que obter um objeto iterador . Para cada iteração de for-ofloop, o nextmétodo desse objeto iterador será chamado até que doneretornado pela next()chamada retorne false. O valor recebido pelo for-ofloop para cada iteração se a valuepropriedade retornada pela next()chamada.

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

O for-ofloop é novo no ES6 e o Iterable e o Iterables também . O Arraytipo de construtor tem Symbol.iteratormétodo em seu protótipo. O Objectconstrutor infelizmente não tê-lo, masObject.keys() , Object.values()e Object.entries()métodos retornam um iterável ( você pode usar console.dir(obj)para verificar os métodos de protótipo ). O benefício do for-ofloop é que qualquer objeto pode ser tornado iterável, mesmo o seu costume Doge Animalclasses.

A maneira mais fácil de tornar um objeto iterável é implementando o ES6 Generator em vez da implementação personalizada do iterador.

Ao contrário for-in , o for-ofloop pode esperar a conclusão de uma tarefa assíncrona em cada iteração. Isso é alcançado usando a awaitpalavra-chave após a documentação dafor instrução .

Outra grande coisa sobre o for-ofloop é que ele tem suporte a Unicode. De acordo com as especificações ES6, as strings são armazenadas com a codificação UTF-16. Portanto, cada personagem pode pegar um 16-bitou 32-bit. Tradicionalmente, as strings eram armazenadas com a codificação UCS-2, que suporta suportes para caracteres que podem ser armazenados 16 bitsapenas dentro .

Portanto, String.lengthretorna o número de 16-bitblocos em uma sequência. Personagens modernos, como um Emoji, levam 32 bits. Portanto, esse caractere retornaria length2. o for-inloop itera sobre 16-bitblocos e retorna o errado index. No entanto, o for-ofloop itera sobre o caractere individual com base nas especificações UTF-16.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

Achei a seguinte explicação de https://javascript.info/array muito útil:

Uma das maneiras mais antigas de alternar itens da matriz é o loop for over index:

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

Tecnicamente, como matrizes são objetos, também é possível usar for..in:

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

O loop for..in itera sobre todas as propriedades, não apenas sobre as numéricas.

Existem objetos chamados "de matriz" no navegador e em outros ambientes que se parecem com matrizes. Ou seja, eles têm propriedades de comprimento e índices, mas também podem ter outras propriedades e métodos não numéricos, dos quais geralmente não precisamos. O loop for..in os listará. Portanto, se precisarmos trabalhar com objetos do tipo matriz, essas propriedades "extras" podem se tornar um problema.

O loop for..in é otimizado para objetos genéricos, não matrizes e, portanto, é 10-100 vezes mais lento. Claro, ainda é muito rápido. A aceleração pode ter apenas gargalos. Mas ainda devemos estar cientes da diferença.

Geralmente, não devemos usar for..in para matrizes.

Aqui está um mnemônico útil para lembrar a diferença entre for...inLoop e for...ofLoop.

"index in, objeto de"

for...in Loop=> itera sobre o índice na matriz.

for...of Loop=> itera sobre o objeto dos objetos.