for of 和 for in 的区别介绍

1.共性

for of 和 for in都是用来遍历的属性

2.区别

• for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
• for in得到对对象的key或数组,字符串的下标
• for of和forEach一样,是直接得到值
• for of不能用于对象

1.两者对比例子(遍历对象)

const obj = {
        a: 1,
        b: 2,
        c: 3
    }
    for (let i in obj) {
        console.log(i)    //输出 ： a   b  c
    }
    for (let i of obj) {
        console.log(i)    //输出： Uncaught TypeError: obj is not iterable 报错了
    }

说明： for in 和 for of 对一个obj对象进行遍历,for in 正常的获取了对象的 key值,分别打印 a、b、c,而 for of却报错了。

2.两者对比例子(遍历数组)

   const arr = ['a', 'b', 'c']
   // for in 循环
   for (let i in arr) {
       console.log(i)         //输出  0  1  2
   }
   
   // for of
   for (let i of arr) {
       console.log(i)         //输出  a   b   c
   }

3.特点

①. for in 特点

• for … in 循环返回的值都是数据结构的 键值名(即下标)。
• 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
• for … in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
• 特别情况下, for … in 循环会以看起来任意的顺序遍历键名
• for in 的 常规属性和 排序属性
• 在ECMAScript规范中定义了 「数字属性应该按照索引值⼤⼩升序排列，字符串属性根据创建时的顺序升序排列。」在这⾥我们把对象中的数字属性称为 「排序属性」，在V8中被称为 elements，字符串属性就被称为 「常规属性」， 在V8中被称为 properties。

function Foo() {
 this[100] = 'test-100'
 this[1] = 'test-1'
 this["B"] = 'bar-B'
 this[50] = 'test-50'
 this[9] = 'test-9'
 this[8] = 'test-8'
 this[3] = 'test-3'
 this[5] = 'test-5'
 this["A"] = 'bar-A'
 this["C"] = 'bar-C'
}
var bar = new Foo()
for(key in bar){
 console.log(`index:${key} value:${bar[key]}`)
}

//输出：
index:1 value:test-1
index:3 value:test-3
index:5 value:test-5
index:8 value:test-8
index:9 value:test-9
index:50 value:test-50
index:100 value:test-100
index:B value:bar-B
index:A value:bar-A
index:C value:bar-C

总结一句: for in 循环特别适合遍历对象。

①. for of

• for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
• 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
• for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。

知识点补充：

简述for in 和 for of 的区别

1、推荐在循环对象属性的时候使用 for...in，在遍历数组的时候的时候使用 for...of 
2、for...in 循环出的是 key，for...of 循环出的是 value 
3、注意，for...of 是 ES6 新引入的特性。修复了 ES5 引入的 for...in 的不足 
4、for...of 不能循环普通的对象（如通过构造函数创造的），需要通过和 Object.keys()搭配使用

 for in遍历数组的毛病：

1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组。

那么除了使用for循环，如何更简单的正确的遍历数组达到我们的期望呢（即不遍历method和name），ES6中的for of更胜一筹.

遍历对象

遍历对象 通常用for in来遍历对象的键名

到此这篇关于for of 和 for in 的区别的文章就介绍到这了,更多相关for of 和 for in 的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！