前端面试中经常会被问道for in和for of的差异区别，本篇文章根据实际案例来详细说明在使用中关于for in和 for of的差异性。

两者支持版本：

    for in和for循环方式历史悠久，从ECMAScript 1就被支持。

    for of是ES6新增的循环方法。

for in和for of简单的说两者都是进行数据遍历的操作，但实际使用和结果却有着不同。

一、for in 和for of对于数组的遍历。

var a = [1,2,3,4]
for(let item in a){
	console.log("打印：",item)
}
//打印：0
//打印：1
//打印：2
//打印：3
for(let item of a){
	console.log("打印：",item)
}
//打印：1
//打印：2
//打印：3
//打印：4

从上述打印结果可以看出，for in打印item是数组的index下标，而for of则打印的是数组的值。即这就是它们之间的第一个不同点，输出item值不同。

二、for in 和for of对于json数据的遍历。

    json数据是开发中最常见的数据格式之一，for in和for of对于json数据的遍历操作也不同。

var test = {a:1,b:2}
for(let item in test){
	console.log("键名",item)
	console.log("键值",test[item])
}
//打印：a
//打印：1
//打印：b
//打印：2
for(let item of test){
	console.log(item)
}
Uncaught TypeError: test is not iterable

从代码中可以看出for in能正常对json数据进行便利，但for of则不行。

那么如果询问到你如果需要在for of遍历json数据要如何处理呢？

这里就需要对json数据先进行一次处理，即Object.keys的使用

    Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

test = Object.keys(test)
for(let item of test){
	console.log("键名",item)
	console.log("键值",test[item])
}
//打印：a
//打印：1
//打印：b
//打印：2

由此便实现了使用for of对于json数据的遍历操作。