Resumo : neste tutorial, você aprenderá como usar o for...in
loop JavaScript para iterar sobre as propriedades enumeráveis de um objeto.
Introdução ao JavaScript para…em loop
O for...in
loop 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 enumerable
sinalizador interno é definido como true
.
O enumerable
padrão do sinalizador é true
quando 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...in
loop:
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...in
loop 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...in
loop e herança
Quando você percorre as propriedades de um objeto que herda de outro objeto, a for...in
instruçã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 circle
objeto possui seu próprio protótipo que faz referência ao decoration
objeto. Portanto, o for...in
loop exibe as propriedades do circle
objeto 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...in
to 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 Array
em suas bibliotecas da seguinte forma:
Array.prototype.foo = 100;
Linguagem de código: JavaScript ( javascript )
Portanto, o for...in
nã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 }
160
Linguagem 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
3
Linguagem 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...in
loop 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...in
loop para iterar sobre elementos de um array, especialmente quando a ordem do índice for importante.