javascript总for of和for in的区别？
<h1>javascript总for of和for in的区别？</h1><p>先说结论：</p>
<ol>
<li>
<p>推荐在循环对象属性的时候，使用<code>for...in</code>,在遍历数组的时候的时候使用<code>for...of</code>。</p>
</li>
<li>
<p><code>for...in</code>循环出的是key，<code>for...of</code>循环出的是value</p>
</li>
<li>
<p>注意，<code>for...of</code>是ES6新引入的特性。修复了ES5引入的<code>for...in</code>的不足</p>
</li>
<li>
<p><code>for...of</code>不能循环普通的对象，需要通过和<code>Object.keys()</code>搭配使用</p>
</li>
</ol>
<p>假设我们要遍历一个数组的value<code>let aArray = ['a',123,{a:'1',b:'2'}]</code></p>
<p>使用<code>for...in</code>循环：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">for(let index in aArray){
console.log(`${aArray}`);
}
</pre>
</div>
<p> </p>
<p>使用<code>for...of</code>循环：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">for(var value of aArray){
console.log(value);
}
</pre>
</div>
<p> </p>
<p>咋一看好像好像只是写法不一样而已，那为什么说<code>for...of</code>修复了<code>for...in</code>的缺陷和不足。<br>假设我们往数组添加一个属性name:<br><code>aArray.name = 'demo'</code>,再分别查看上面写的两个循环：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">for(let index in aArray){
console.log(`${aArray}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
console.log(value);
}
</pre>
</div>
<p> </p>
<p>所以说，作用于数组的<code>for-in</code>循环除了遍历数组元素以外,还会遍历自定义属性。</p>
<p><code>for...of</code>循环不会循环对象的key，只会循环出数组的value，因此<code>for...of</code>不能循环遍历<strong>普通对象</strong>,对普通对象的属性遍历推荐使用<code>for...in</code></p>
<p>如果实在想用<code>for...of</code>来遍历普通对象的属性的话，可以通过和<code>Object.keys()</code>搭配使用，先获取对象的所有key的数组<br>然后遍历：</p>
<div class="widget-codetool">
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student);
}
</pre>
</div>
<p> </p>
</div><br><br>
来源：https://www.cnblogs.com/yu412/p/11724012.html
頁:
[1]