for in

for…in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
for … in是为遍历对象属性而构建的，不建议与数组一起使用

  1. var obj = {a:1, b:2, c:3};
  3. for (var prop in obj) {
  4.   console.log( prop);
  5. }
  6. //a,b,c

仅迭代自身的属性

如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

  1. var triangle = {a: 1, b: 2, c: 3};
  3. function ColoredTriangle() {
  4.   this.color = 'red';
  5. }
  7. ColoredTriangle.prototype = triangle;
  9. var obj = new ColoredTriangle();
  11. for (var prop in obj) {
  12.   if (obj.hasOwnProperty(prop)) {
  13.     console.log(prop);
  14.   }
  15. }
  16. //这里就仅输出了 ColoredTriangle 自身的属性
  17. // color
  20. //这里就仅输出了 ColoredTriangle 自身的属性
  21. console.log(Object.getOwnPropertyNames(obj))
  22. //['color']

for of

for…of语句用于循环可迭代对象（Array，Map，Set，String，arguments，nodeList，HTMLCollection 等等）

  1. //迭代字符串
  2. let iterable = "boo";
  3. for (let value of iterable) {
  4.   console.log(value);
  5. }
  6. // "b"
  7. // "o"
  8. // "o"
  10. //迭代Map
  11. let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
  12. for (let entry of iterable) {
  13.   console.log(entry);
  14. }
  15. // ["a", 1]
  16. // ["b", 2]
  17. // ["c", 3]
  20. //迭代 arguments
  21. function test(){
  22.   for (let argument of arguments) {
  23.     console.log(argument);
  24.   }
  25. }
  26. test(1,2,3,4,5)
  27. //1
  28. //2
  29. //3
  30. //4
  31. //5
  33. //迭代 DOM 集合
  34. let nodeList = document.querySelectorAll('li')
  35. for(node of nodeList){
  36.   console.log(node)
  37. }
  38. // <li></li>
  39. // ......

两者区别

for … in是为遍历对象属性而构建的，不要用它去遍历数组 。for…in 语句以任意顺序迭代对象的可枚举属性。
for…of 语句遍历可迭代对象定义要迭代的数据
部分具体差异如下：

  1. Object.prototype.objCustom = function() {};
  2. Array.prototype.arrCustom = function() {};
  4. let iterable = [3, 5, 7];
  5. iterable.foo = 'hello';
  7. for (let i in iterable) {
  8.   console.log(i); //打印得是key
  9. }
  10. for (let i in iterable) {
  11.   console.log(iterable[i]); //打印得是value
  12. }
  13. // 0, 1, 2, "foo", "arrCustom", "objCustom" //key
  14. // 3, 5, 7, hello,  ƒ () {}, ƒ () {} //value
  17. for(let i of iterable){
  18.   console.log(i)
  19. }
  20. // 3 5 7

重要；虽然for … in 也能循环字符串/arguments/NodeList等等。但我们最好不用这个来循环数组/类数组。仅用作循环对象。