JavaScript para…em Loop

Resumo : neste tutorial, você aprenderá como usar o for...inloop JavaScript para iterar sobre as propriedades enumeráveis ​​de um objeto.

Introdução ao JavaScript para…em loop

O for...inloop sobre as propriedades enumeráveis ​​que são codificadas por strings de um objeto . Observe que uma propriedade pode ser codificada por uma string ou um símbolo .

Uma propriedade é enumerável quando seu enumerablesinalizador interno é definido como true.

O enumerablepadrão do sinalizador é truequando uma propriedade é criada por meio de uma atribuição simples ou de um inicializador de propriedade:

object.propertyName = value;

ou

let obj = {
    propertyName: value,
    ...
};
Linguagem de código:  JavaScript  ( javascript )

O seguinte mostra a sintaxe do for...inloop:

for(const propertyName in object) {
    // ...
}
Linguagem de código:  JavaScript  ( javascript )

O for...in  permite acessar cada propriedade e valor de um objeto sem saber o nome específico da propriedade. Por exemplo:

var person = {
    firstName: 'John',
    lastName: 'Doe',
    ssn: '299-24-2351'
};

for(var prop in person) {
    console.log(prop + ':' + person[prop]);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

firstName:John
lastName:Doe
ssn:299-24-2351
Linguagem de código:  CSS  ( css )

Neste exemplo, usamos o for...inloop para iterar sobre as propriedades do objeto person. Acessamos o valor de cada propriedade usando a seguinte sintaxe:

object[property];
Linguagem de código:  CSS  ( css )

O for...inloop e herança

Quando você percorre as propriedades de um objeto que herda de outro objeto, a for...ininstrução sobe na cadeia de protótipos e enumera as propriedades herdadas. Considere o seguinte exemplo:

var decoration = {
    color: 'red'
};

var circle = Object.create(decoration);
circle.radius = 10;


for(const prop in circle) {
    console.log(prop);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

radius
color

O circleobjeto possui seu próprio protótipo que faz referência ao decorationobjeto. Portanto, o for...inloop exibe as propriedades do circleobjeto e seu protótipo.

Se quiser enumerar apenas as propriedades próprias de um objeto, use o hasOwnProperty()método:

for(const prop in circle) {
    if(circle.hasOwnProperty(prop)) {
        console.log(prop);
    }
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

radius

O loop for…in e o array

É uma boa prática não usar o for...into iterate over an array , especialmente quando a ordem dos elementos do array é importante.

O exemplo a seguir funciona perfeitamente:

const items = [10 , 20, 30];
let total = 0;

for(const item in items) {
    total += items[item];
}
console.log(total); Linguagem de código:  JavaScript  ( javascript )

No entanto, alguém pode definir uma propriedade do tipo interno Arrayem suas bibliotecas da seguinte forma:

Array.prototype.foo = 100;Linguagem de código:  JavaScript  ( javascript )

Portanto, o for...innão funcionará corretamente. Por exemplo:

// somewhere else
Array.prototype.foo = 100;

const items = [10, 20, 30];
let total = 0;

for (var prop in items) {
  console.log({ prop, value: items[prop] });
  total += items[prop];
}
console.log(total);Linguagem de código:  JavaScript  ( javascript )

Saída:

{ prop: '0', value: 10 }
{ prop: '1', value: 20 }
{ prop: '2', value: 30 }
{ prop: 'foo', value: 100 }
160Linguagem de código:  CSS  ( css )

Outro exemplo:

var arr = [];
// set the third element to 3, other elements are `undefined`
arr[2] = 3; 

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);    
}Linguagem de código:  JavaScript  ( javascript )

A saída mostra três elementos do array, o que está correto:

undefined
undefined
3Linguagem de código:  JavaScript  ( javascript )

No entanto, o  for...in loop ignora os dois primeiros elementos:

for (const key in arr) {
    console.log(arr[key]);
}
Linguagem de código:  JavaScript  ( javascript )

Saída:

3

A saída mostra apenas o terceiro elemento, não os dois primeiros elementos.

Resumo

• O for...inloop itera sobre as propriedades enumeráveis ​​de um objeto. Também vai até a cadeia de protótipos e enumera as propriedades herdadas.
• Evite usar for...inloop para iterar sobre elementos de um array, especialmente quando a ordem do índice for importante.