for..in和for..of的区别

for...in可以枚举对象;for..of不可以 

var obj = {  a: 1,  b: [],  c: function () {

     }

 };

for (var key in obj) {  

console.log(key);

}

// 结果是：

// a

// b

// c

若换成for...of那么会报错 Uncaught TypeError: obj is not iterable

for..in枚举数组是key;for...of枚举数组得到的是值

var arr = [3, 5, 7]; for (var i in arr) {   console.log(i); }// 结果是： // 0 // 1 // 2 ;是key

var arr = [3, 5, 7]; for (var i of arr) {   console.log(i); }// 结果是： // 3 // 5 // 7;是value

for...each 和for..of 

forEach遍历数组的时候是无法break或者return false中断的

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

array.forEach(function(currentValue, index, arr), thisValue); 第一个是当前的value,第二个当前元素的索引值;第三个是当前数组对象,(第一个是必选,2,3为可选)

var arr = [3, 5, 7];

arr.forEach(function (value) {  

console.log(value);  

if (value == 5) {  

 return false;

 }

});

// 结果是：

// 3

// 5

// 7

return false根本就没作用，一直循环到底。

使用for..of可以用break跳出当前循环

var arr = [3, 5, 7];

for (let value of arr) {

 console.log(value);

 if (value == 5) {  

 break;  

}

}// 结果是：

// 3

// 5

for...in无法遍历字符串;但是for..of可以迭代字符串

let str = 'boo';

for (let value of str) {

 console.log(value);

}

// 结果是：

// "b"

// "o"

// "o"

for..of可以

直接迭代arguments类数组对象，且看

(function() {

 for (let argument of arguments) {

   console.log(argument);  

}

})(1, 2, 3);

// 结果是： // 1 // 2 // 3

 

for..of可以迭代NodeList这类DOM集合

let elements = document.querySelectorAll('body');

for (let element of elements) {  

console.log(element.tagName);

}

// 结果是： // "BODY" 

for..of迭代map

let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let [key, value] of mapData) {  

console.log(value);

}

// 结果是： // 1 // 2 // 3

for..of技能更广，但是毕竟是ES6新特性，IE浏览器不支持,不过随着发展肯定是越来越支持