for in循环和for of循环，二者区别

1、for of循环：

举个栗子1:

  <script>

var arr = ['nick','freddy','mike','james'];
for(var item of arr){	
    console.log(item);
}

  </script>

结果：

举个栗子2:

  <script>

var arr = [
    { name:'nick', age:18 },
    { name:'freddy', age:24 },
    { name:'mike', age:26 },
    { name:'james', age:34 }
];
for(var item of arr){	
    console.log(item.name,item.age);
}

  </script>

结果：

2、与for in 区别:

区别①：for of无法循环遍历对象

  <script>

var userMsg = {
    0: 'nick',
    1: 'freddy',
    2: 'mike',	
    3: 'james'
};
 
for(var key in userMsg){
    console.log(key, userMsg[key]);	
}
console.log('-----------分割线-----------');
for(var item of userMsg){	
    console.log(item);
}

  </script>

结果：

区别②：遍历输出结果不同

  <script>

var arr = ['nick','freddy','mike','james'];
for(var key in arr){
    console.log(key);	
}

console.log('-----------分割线-----------');
for(var item of arr){	
    console.log(item);
}

  </script>

结果：

for in循环遍历的是数组的键值(索引)，而for of循环遍历的是数组的值。

区别③：for in 会遍历自定义属性，for of不会

  <script>

var arr = ['nick','freddy','mike','james'];
arr.name = "数组";
 
for(var key in arr){
    console.log(key+': '+arr[key]);	
}

console.log('-----------分割线-----------');
for(var item of arr){	
    console.log(item);
}

  </script>

结果：

给数组添加一个自定义属性name，并且赋值"数组"。然后进行遍历输出的，会发现新定义的属性也被for in输出来了，而for of并不会对name进行输出。

小结：

• for in可以循环数组和对象，得到是数组的下标或对象的键名
• for of只能循环数组，得到的是数组对应的值