1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
---
title: for...in
slug: Web/JavaScript/Reference/Statements/for...in
tags:
- JavaScript
- Laço de repetição
- Loop
- Statement
- for...in
translation_of: Web/JavaScript/Reference/Statements/for...in
---
<div>{{jsSidebar("Statements")}}</div>
<p>O laço <strong><code>for...in</code> </strong> interage sobre propriedades enumeradas de um objeto, na ordem original de inserção. O laço pode ser executado para cada propriedade distinta do objeto.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">for (<var>variavel</var> in objeto) {<em>...</em>
}</pre>
<dl>
<dt><code>variavel</code></dt>
<dd>Uma propriedade diferente do objeto é atribuida em cada iteração.</dd>
<dt><code>objeto</code></dt>
<dd>Objeto com as propriedades enumeradas.</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>O laço for...in somente iterage sobre propriedades enumeradas. Objetos criados a partir de construtores built-in (arrays e object) herdam propriedades não enumeradas de object.prototype e String.prototype, assim como método {{jsxref("String")}}'s {{jsxref("String.indexOf", "indexOf()")}} ou {{jsxref("Object")}}'s {{jsxref("Object.toString", "toString()")}}. O laço irá iterar sobre todas as propriedades enumeráveis do próprio objeto e somente aquelas enumeráveis herdadas de construtores de objetos prototype.</p>
<h3 id="Propriedades_deletadas_adicionadas_ou_modificadas">Propriedades deletadas, adicionadas ou modificadas</h3>
<p>O laço <code>for...in</code> iterage sobre as propriedades de um objeto em uma ordem arbitrária (veja o {{jsxref("Operators/delete", "delete")}} ). Se uma propriedade é deletada durante a execução do loop, ela se torna indisponível para ser acessada depois. É recomendável não adicionar, remover ou alterar propriedades novas ao objeto durante a execução do laço (durante o loop)</p>
<h3 id="Iteração_em_Arrays_e_for...in">Iteração em Arrays e <code>for...in</code></h3>
<div class="note">
<p><strong>Note:</strong> <code>for...in</code> não deve ser usado para iteração em uma {{jsxref("Array")}} onde a ordem é importante, visto que ele iterage em uma ordem arbitrária.</p>
</div>
<p>Indices de arrays somente se tornam propriedades enumeradas com inteiros (integer). Não há garantia de que utilizando o laço for...in os indices de um array serão retornados em uma ordem particular ou irá retornar todas as propriedades enumeráveis. É recomendável utilizar o laço {{jsxref("Statements/for", "for")}} com índices numéricos ou {{jsxref("Array.prototype.forEach()")}} ou ainda {{jsxref("Statements/for...of", "for...of")}} quando iteragir sobre arrays onde a ordem é importante.</p>
<h3 id="Iteração_apenas_sobre_suas_próprias_propriedades">Iteração apenas sobre suas próprias propriedades</h3>
<p>Se você quer considerar somente as propriedades do próprio objeto e não as herdadas via prototype, use {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} ou execute {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} ou ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable")}}</p>
<h2 id="Exemplos">Exemplos</h2>
<p>A função seguinte toma como argumento um objeto. O laço for...in iterage sobre todos as propriedades enumeráveis do objeto e retorna uma string com o nome das propriedades e seus respectivos valores.</p>
<pre class="brush: js">//Objeto
var obj = {a:1, b:2, c:3};
//Para prop (propriedade) in obj (objeto) faça
for (var prop in obj) {
// ctrl+shift+k (para abrir o console no mozilla firefox)
console.log("obj." + prop + " = " + obj[prop]);
}
//A saída (output) deverá ser:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"</pre>
<p>A função seguinte ilustra o uso de {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: as propriedades herdadas não são exibidas.</p>
<pre class="brush: js">var triangle = {a:1, b:2, c:3};
function ColoredTriangle() {
this.color = "red";
}
ColoredTriangle.prototype = triangle;
var obj = new ColoredTriangle();
for (var prop in obj) {
if( obj.hasOwnProperty( prop ) ) {
console.log("obj." + prop + " = " + obj[prop]);
}
}
// Output:
// "obj.color = red"
</pre>
<h2 id="Specificações">Specificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-12.6.4', 'for...in statement')}}</td>
<td>{{Spec2('ES3')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Definição inicial</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte básico</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Compatibilidade_Initializer_expressions">Compatibilidade: Initializer expressions</h2>
<p>Anterior ao SpiderMonkey 40 {{geckoRelease(40)}}, era possível usar uma expressão inicial com o laço for...in, conforme exemplo que se segue:</p>
<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3};
for(var i=0 in obj) {
console.log(obj[i]);
}
// 1
// 2
// 3
</pre>
<p>Este não é o comportamento padrão e atualmente é ignorado a partir da versão 40 e posteriores e seu uso irá exibir o error {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers"). Outras engines como a v8 (Chrome), Chakra (IE/Edge) e JSC (Webkit/Safari) estão estudando o que fazer com esse comportamento.</p>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{jsxref("Statements/for...of", "for...of")}} - laço similar que iterage sobre os valores das propriedades.</li>
<li>{{jsxref("Statements/for_each...in", "for each in")}} - (deprecated).</li>
<li>{{jsxref("Statements/for", "for")}}</li>
<li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Generator expressions</a> (uses the <code>for...in</code> syntax)</li>
<li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li>
<li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
<li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
<li>{{jsxref("Array.prototype.forEach()")}}</li>
</ul>
|
