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

原因：

工作中用过for...in，但是没有实际研究过，通过延伸知识点，又发现了一些好玩的东西，因此深入了解一些，加深印象

for...in

对象时候，枚举属性，可遍历对象键值

let obj = {
    a:1,
    b:2
}


for(let key in obj){
    console.log(key)
}

//输出
//a
//b

数组时，枚举下标

var arr = ['ONE', 'TWO', 'THREE'];
for (var i in arr) {
   console.log(i);
}

//输出
//0
//1
//2

且可以输出索引和值

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

for...of 遍历数组，字符串等有可迭代的数据结构，不支持对象

var arr = [1, 2, 3];

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

//迭代字符串

let str = 'wht';

for (let value of str) {
  console.log(value);
}
// 结果是：
// "w"
// "h"
// "t"

//迭代类数组

//节点对象通常是用[].slice.call(),for...of也可以
let elements = document.querySelectorAll('body');

for (let element of elements) {
  console.log(element.tagName);
}

总结：

for in 和for of 区别

1、for...of无法遍历对象

2、for...in是遍历的索引，for...of遍历的是值

3、for...of支持类数组和字符串遍历且支持break，contain,return