for..in和for..of的功能

for...in  (兼容性较好)

功能一：可以枚举对象

例：

var obj = {
  a: 1,
  b: [],
  c: function () {}
};
for (var key in obj) {
   console.log(key);
}
// 结果是：
// a
// b
// c

功能二：可以枚举数组

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

功能三：可以迭代数组和索引值

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

功能四：不仅可以枚举数组自身。而且可以枚举数组的原型对象，以及数组对象本身属性值
例：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   console.log(i);
}
// 结果是：
// 0
// 1
// 2
// foo
// arrCustom
// objCustom
在实际开发工作中，这些对象很可能是不需要的，为了防止出现问题，可以使用  hasOwnProperty  避免出现问题
例：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   if (arr.hasOwnProperty(i)) {
    console.log(i);
  }
}
// 结果是：
// 0
// 1
// 2
// foo

为避免把数组本身的属性打印出来，可以利用forEach来辅助，

例：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

var arr = [3, 5, 7];
arr.foo = 'hello';

arr.forEach(function (value, i) {
  console.log(i);
});
// 结果是：
// 0
// 1
// 2

但是，forEach遍历数组时无法break或者return false中断
例：

var arr = [3, 5, 7];

arr.forEach(function (value) {
  console.log(value);
  if (value == 5) {
    return false;
  }
});
// 结果是：
// 3
// 5
// 7

for...of   (ES6新特性，IE浏览器不支持)

功能一：可以迭代数组

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

不仅如此，for...of还可以使用break中断循环
例：

var arr = [3, 5, 7];

for (let value of arr) {
  console.log(value);
  if (value == 5) {
    break;
  }
}
// 结果是：
// 3
// 5

功能二：迭代字符串
例：

let str = 'boo';

for (let value of str) {
  console.log(value);
}
// 结果是：
// "b"
// "o"
// "o"

功能三：迭代arguments类数组对象
例：

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);
// 结果是：
// 1
// 2
// 3

功能四：迭代NodeList这类DOM集合
无需[].slice.call()，也不需要Array.from()进行数组转化
例：

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

for (let element of elements) {
  console.log(element.tagName);
}
// 结果是：
// "BODY"

功能五：迭代类型数组
例：

let typeArr = new Uint8Array([0x00, 0xff]);

for (let value of typeArr) {
  console.log(value);
}
// 结果是：
// 0
// 255

功能六：迭代Map
例：

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

for (let [key, value] of mapData) {
  console.log(value);
}
// 结果是：
// 1
// 2
// 3

功能七：迭代Set
例：

let setData = new Set([1, 1, 2, 2, 3, 3]);

for (let value of setData) {
  console.log(value);
}
// 结果是：
// 1
// 2
// 3