for in 和 for of 的区别

区别：for in 用于迭代对象，for of 用于迭代数组。（记住！记牢！下面要考！）
用法：
- for in

const obj = { a: 'aaa', b: 'bbb' };
for(let i in obj) {
  console.log('obj[i]---' + obj[i], 'obj.i---' + obj.i, 'i---' + i, 'typeof i---' + typeof i); 
  // obj[i]---aaa obj.i---undefined i---a typeof i---string
  // obj[i]---bbb obj.i---undefined i---b typeof i---string
}

该方法中：

i 是每一项的键名，数据类型是字符串；
obj[i] 形式打印 i 对应的键值；
obj.i 之所以打印 undefined ，是因为 i 在这是字符串，而我们一般使用的 obj.a 这里的 a 是变量，可以调用到 a 的值。

for of

const arr = [3, 2, 1];
for(let i of arr) {
  console.log('arr[i]---' + arr[i], 'arr.i---' + arr.i, 'i---' + i, 'typeof i---' + typeof i); 
  // arr[i]---undefined arr.i---undefined i---3 typeof i---number
  // arr[i]---1 arr.i---undefined i---2 typeof i---number
  // arr[i]---2 arr.i---undefined i---1 typeof i---number
}

该方法中：

i 是数组每一项，打印直接得数组元素；
arr[i] 首个打印 undefined ，是因为 i = 3，而 arr[3] 为数组第4 项，不存在；
arr[i] 后两个能打印，道理同上，类推可知；
arr.i 属于对像写法，错误；
typeof i 即为判断数组每一项的数据类型。

如果你用反了呢？

for in 打印数组

const arr = [3, 2, 1];
for(let i in arr) {
  console.log('arr[i]---' + arr[i], 'arr.i---' + arr.i, 'i---' + i, 'typeof i---' + typeof i); 
  // arr[i]---3 arr.i---undefined i---0 typeof i---string
  // arr[i]---2 arr.i---undefined i---1 typeof i---string
  // arr[i]---1 arr.i---undefined i---2 typeof i---string
}

这种情况下：

i 是数组的索引（下标），但是这里，它被当做了对象的键名，所以是打印出来是字符串类型；MDN 上有句话：“只能用整数作为数组元素的索引，而不能用字符串”；
arr[i] 打印出数组每一项，能打印出来，大概是因为 js 做了隐式转换（arr[0] 和 arr['0'] 都能打印出结果）；
arr.i 不能打印理由同上。

for of 打印对象

const obj = { a: 'aaa', b: 'bbb' };
for(let i of obj) {
  console.log('obj[i]---' + obj[i], 'obj.i---' + obj.i, 'i---' + i, 'typeof i---' + typeof i); 
  // obj[i]---aaa obj.i---undefined i---a typeof i---string
  // obj[i]---bbb obj.i---undefined i---b typeof i---string
}

这种情况下：报错“Uncaught TypeError: obj is not iterable”（obj 不可迭代）。