- 推荐在循环对象属性的时候，使用
for in,在遍历数组的时候的时候使用for of。 -
for in循环出的是key，for of循环出的是value - 注意，
for of是ES6新引入的特性。修复了ES5引入的for in的不足 -
for of不能循环普通的对象，需要通过和Object.keys()搭配使用
假设我们要遍历一个数组的 var arr= ['1',2,{a:'1',b:'2'}]
使用 for in 循环：
var arr = ['1',2,{a:'1',b:'2'}];
for(let key in arr ){
console.log(`${arr[key]}`);
// 1
// 2
// [object Object]
}
使用 for of 循环：
var arr = ['1',2,{a:'1',b:'2'}];
for(var value of arr){
console.log(value);
// 1
// 2
// {a: "1", b: "2"}
}
咋一看好像好像只是写法不一样而已，那为什么说 for of 修复了 for in 的缺陷和不足。
假设我们往数组添加一个属性 name : arr.name = 'demo' ,再分别查看上面写的两个循环：
使用 for in 循环：
var arr = ['1',2,{a:'1',b:'2'}];
arr.name = 'demo';
for(let key in arr){
console.log(`${arr[key]}`); //Notice!!arr.name也被循环出来了
// 1
// 2
// [object Object]
// demo
}
使用 for of 循环：
var arr = ['1',2,{a:'1',b:'2'}];
arr.name = 'demo';
for(var value of arr){
console.log(value);
// 1
// 2
// {a: "1", b: "2"}
}
所以说，作用于数组的 for in 循环除了遍历数组元素以外,还会遍历自定义属性。
for of 循环不会循环对象的 key，只会循环出数组的 value，因此 for of 不能循环遍历普通对象,对普通对象的属性遍历推荐使用 for in
如果实在想用 for of 来遍历普通对象的属性的话，可以通过和 Object.keys() 搭配使用，先获取对象的所有 key 的数组
然后遍历：
var obj = {
name : '小明',
age : 9,
locate : {
country : 'china',
city : 'xiamen'
}
}
for(var key of Object.keys(obj)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+obj[key]);
// name: 小明
// age: 9
// locate: [object Object]
}
再简单点说，for in 是遍历键名，for of 是遍历键值。
例如：
let arr = ["a","b"];
// for in 的方式
for (a in arr) {
console.log(a);//1,2
}
// for of 的方式
for (a of arr) {
console.log(a);//a,b
}
// 由于for of的这个特性，他还可以实现对iterator对象的遍历，而for in就是简单的遍历了。
用两种做一个小练习, 寻找两个有序数组a,b中最小相同元素
使用 for in 的方式
var a = [3, 4, 6, 8, 10, 15, 25];
var b = [1, 2, 10, 15, 25, 26, 27, 28];
var c = [];
for(let x in a){
for(let y in b){
if(a[x] == b[y]){
c.push(a[x]);
}
}
}
console.log(`数组A,B最小的相同元素是：${c[0]}`);// 10
使用 for of 的方式
var a = [3, 4, 6, 8, 10, 15, 25];
var b = [1, 2, 10, 15, 25, 26, 27, 28];
var c = [];
for(let x of a){
for(let y of b){
if(x == y){
c.push(x);
}
}
}
console.log(`数组A,B最小的相同元素是：${c[0]}`);// 10
