javascript中for-in和for-of的区别

白夜浪人 發表於 2019-9-4 00:01:00

在JavaScript中遍历数组通常是使用fori循环，自ES5发布后也可以使用forEach，另外在ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用forEach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。
<div class="cnblogs_code">
<pre>myArray.forEach(function (currentValue, index, arr) {
console.log(currentValue);
});</pre>
</div>
因此另外有for-in循环和for-of循环两种增强型循环。其中，for-in是ES5标准，遍历的是key（可遍历对象、数组或字符串的key）；for-of是ES6标准，遍历的是value（可遍历对象、数组或字符串的value）。
for-in
直接看简单的代码示例了解用法。
<div class="cnblogs_code">
<pre>var arr = ;
for (var index in arr) {
　　console.log(myArray);
}</pre>
</div>
使用for-in可以遍历数组，但是会存在以下问题：
1.index索引为字符串型数字（注意，非数字），不能直接进行几何运算。
2.遍历顺序有可能不是按照实际数组的内部顺序（可能按照随机顺序）。
3.使用for-in会遍历数组所有的可枚举属性，包括原型。例如上例的原型方法method和name属性都会被遍历出来，通常需要配合hasOwnProperty()方法判断某个属性是否该对象的实例属性，来将原型对象从循环中剔除。
<div class="cnblogs_code">
<pre>for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}</pre>
</div>
所以for-in更适合遍历对象，通常是建议不要使用for-in遍历数组。
for-of
for-of可以简单、正确地遍历数组（不遍历原型method和name）。
<div class="cnblogs_code">
<pre>var myArray = ;
myArray.name = "数组";
myArray.getName = function() { return this.name; }
for (var value of myArray) {
console.log(value);
}</pre>
</div>
1.这是最简洁、最直接的遍历数组元素的语法。
2.这个方法避开了for-in循环的所有缺陷。
3.与forEach()不同的是，它可以正确响应break、continue和return语句。
因此建议是使用for-of遍历数组，因为for-of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name。
区别总结
简单总结就是，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
for-in总是得到对象的key或数组、字符串的下标。
for-of总是得到对象的value或数组、字符串的值，另外还可以用于遍历Map和Set。
<div class="cnblogs_code">
<pre>var set = new Set();
set.add("a").add("b").add("d").add("c");

// 遍历Set
for (let s of set) {
console.log(s);
}

var map = new Map();
map.set("a", 1).set("b", 2).set(999, 3);

// 遍历Map
for(let of map) {
console.log(k, v);
}</pre>
</div>
我更喜欢用for-of，但是使用的时候还是要注意浏览器的兼容性，嘿嘿。
 
"把时间花在该花的事情上面，别每天矫情地想七想八。"

</div>
<div id="MySignature" role="contentinfo">
你要去做一个大人，不要回头，不要难过。 
来源：https://www.cnblogs.com/yanggb/p/11455127.html

頁: [1]

琼殿技术论坛's Archiver

javascript中for-in和for-of的区别