浅谈for...in与for....of
Posted dxz1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈for...in与for....of相关的知识，希望对你有一定的参考价值。
for...in:
for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。
语法：
for (variable in object) {...}
variable- 在每次迭代时，将不同的属性名分配给变量。
object- 被迭代枚举其属性的对象
-
描述
for...in循环只遍历可枚举属性。像Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如String的indexOf()方法或Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。删除，添加或者修改属性
for...in循环以任意序迭代一个对象的属性（请参阅delete运算符，了解为什么不能依赖于迭代的表面有序性，至少在跨浏览器设置中）。如果一个属性在一次迭代中被修改，在稍后被访问，其在循环中的值是其在稍后时间的值。一个在被访问之前已经被删除的属性将不会在之后被访问。在迭代进行时被添加到对象的属性，可能在之后的迭代被访问，也可能被忽略。通常，在迭代过程中最好不要在对象上进行添加、修改或者删除属性的操作，除非是对当前正在被访问的属性。这里并不保证是否一个被添加的属性在迭代过程中会被访问到，不保证一个修改后的属性（除非是正在被访问的）会在修改前或者修改后被访问，不保证一个被删除的属性将会在它被删除之前被访问。注意：
for...in不应该用于迭代一个Array，其中索引顺序很重要。数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证
for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时，最好用整数索引去进行
for循环（或者使用Array.prototype.forEach()或for...of循环）。例如：
<!DOCTYPE html>
<html>
<body><p>点击按钮循环对象属性。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {text += person[x] + " ";
}
document.getElementById("demo").innerHTML = text;
}
</script></body>
</html>for....of:
for...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。语法
for (variable of iterable) { //statements }variable在每次迭代中，将不同属性的值分配给变量。iterable被迭代枚举其属性的对象。- 例如：
function* foo(){
yield 1;
yield 2;
}for (let o of foo()) {
console.log(o);
// expected output: 1break; // closes iterator, triggers return
}for...of与for...in的区别无论是
for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for...of语句遍历可迭代对象定义要迭代的数据。for each....in:
使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行.
作为ECMA-357(E4X)标准的一部分,for each...in语句已被废弃,E4X中的大部分特性已被删除,但考虑到向后兼容,for each...in只会被禁用而不会被删除,可以使用ES6中新的for...of语句来代替.(bug 791343.)
for each...in是 ECMA-357 (E4X) 标准的一部分, 大部分非Mozilla浏览器都没有实现该标准, E4X并不是 ECMAScript 标准的一部分.语法
for each (variable in object) { statement }variable- 用来遍历属性值的变量,前面的
var关键字是可选的.该变量是函数的局部变量而不是语句块的局部变量.
object- 该对象的属性值会被遍历.
statement- 遍历属性值时执行的语句. 如果想要执行多条语句, 请用(
{ ... }) 将多条语句括住.
描述
一些对象的内置属性是无法被遍历到的,包括所有的内置方法,例如String对象的
indexOf方法.不过,大部分的用户自定义属性都是可遍历的.警告:永远不要使用for each...in语句遍历数组,仅用来遍历常规对象。
(以上内容均来源于网络摘抄)
以上是关于浅谈for...in与for....of的主要内容，如果未能解决你的问题，请参考以下文章