javascript总for of和for in的区别

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript总for of和for in的区别相关的知识，希望对你有一定的参考价值。

简单说，for in是遍历键名，for of是遍历键值。
例如：

let arr = ["q","c"];
for (a in arr) 
   console.log(a);//1,2


for (a of arr) 
   console.log(a);//q,c

由于for of的这个特性，他还可以实现对iterator对象的遍历，而for in就是简单的遍历了。

兼容方面来说

for in是ES5标准,for of是ES6标准;

for of兼容性还不够,移动端安卓（6.0以下）微信浏览器貌似不支持，苹果的可以;web端IE支持也不够，chrome可以。

 参考技术A <!--
for...in用来迭代对象的属性名，然后可以以关联数组的形式访问对象的对应属性名的属性值（可能浏览器不支持）
for...of用来直接迭代对象的属性值（可能浏览器不支持）
下面这个例子显示了document对象的所有属性名-属性值对。
-->
<html>
<body>
<script type="text/javascript">
//<!--
for(var p in document)

document.write("document."+p+"="+document[p]+"<br />");

document.write("<br />");
//-->
</script>
<script type="text/javascript">
//<!--
for(var pv of document)

document.write(pv+"<br />");

//-->
</script>
</body>
</html>

javascript中 for in for forEach for of Object.keys().

一 、for ..in 循环

　　使用for..in循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中的实例。这里需要注意的是使用for-in返回的属性因各个浏览器厂商遵循的标准不一致导致对象属性遍历的顺序有可能不是当初构建时的顺序。（实例+原型中的可枚举属性）

1、遍历数组

　　虽然for..in主要用于遍历对象的属性，但同样也可以用来遍历数组元素。

2：for..in和for遍历数组时下标类型不一样
var colors = [‘red‘, ‘green‘, ‘blue‘];

for (var i in colors) {
  typeof i; // string
}

for (var j = 0; j < colors.length; j++) {
  typoef i; // number
}

二、JavaScript forEach() 方法

列出数组的每个元素：

<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
 
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
 
function myFunction(item, index) {
    demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
}
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
</script>

三、for...of  方法

1、for..of为ES6新增的方法，主要来遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取对象的属性值，而for..in主要获取对象的属性名。

  • for of支持遍历数组、类对象（例如DOM NodeList对象）、字符串、Map对象、Set对象；
  • for of不支持遍历普通对象，可通过与Object.keys()搭配使用遍历；（见示例二）
  • for of遍历后的输出结果为数组元素的值；
var colors = [‘red‘, ‘green‘, ‘blue‘];
colors.length = 5;
colors.push(‘yellow‘);

for (var i in colors) {
  console.log(colors[i]); // red green blue yellow
}

for (var j of colors) {
  console.log(j); // red green blue undefined undefined yellow
}

可以看到使用for..of可以输出包括数组中不存在的值在内的所有值。

2、其实除了使用for..of直接获取属性值外，我们也可以利用Array.prototype.forEach()来达到同样的目的。

var colors = [‘red‘, ‘green‘, ‘blue‘];
colors.foo = ‘hello‘;
console.log(Object.keys(colors));//["0", "1", "2", "foo"]
Object.keys(colors).forEach(function(elem, index) {
  console.log(elem);//0 1 2 foo
  console.log(colors[elem]); // red green blue hello
  console.log(colors[index]); // red green blue undefined
});

colors.forEach(function(elem, index) {
  console.log(elem); // red green blue
  console.log(index); // 0 1 2
})

 

四、Object.keys（） 方法

  • 遍历结果为由对象自身可枚举属性组成的数组，数组中的属性名排列顺序与使用for in循环遍历该对象时返回的顺序一致；
  • 与for in区别在于不能遍历出原型链上的属性；
// 遍历数组
var colors = [‘red‘, ‘green‘, ‘blue‘];
colors.length = 10;
colors.push(‘yellow‘);
Array.prototype.demo = function () {};

Object.keys(colors); // ["0", "1", "2", "10"]

// 遍历对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.demo = function() {};

var jenemy = new Person(‘jenemy‘, 25);

Object.keys(jenemy); // ["name", "age"]

五、总结

一、1、for in循环。遍历实例+原型中可枚举的属性
　　2、for in不适合遍历数组
　　7、for in遍历数组的下标类型不一样 ：for in为String，for为Number
　　8、对不存在项的处理：for in不存在的项不被枚举出来；for全部枚举出
　　9、index in array特性可以判断某个索引是否存在对应元素
二、Object.keys()，遍历实例可枚举属性，返回属性名组成的数组。
三、for of输出数组中包括不存在的值在内的所有值












以上是关于javascript总for of和for in的区别的主要内容，如果未能解决你的问题，请参考以下文章

javaScript的for of和for in 的区别总结

我可以在 Javascript for...in 和 for...of 循环中使用 continue 和 break 吗？

JavaScript for in 和 for of 的区别

区分 for...in 和 for...of

JavaScript之for...in和for...fo区别

javascript中 for in for forEach for of Object.keys().