for of 和 for in 的区别

遍历Object

for-of

var obj = {
  a: 1,
  b: [],
  c: function () {}
};
for (var key of obj) {
   console.log(key);
}
// 出错：
// Uncaught TypeError: obj is not iterable

for-in

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

遍历数组

for-in

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

for-of

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

总结1

1. for-of 无法遍历 不可迭代对象

可迭代对象包括: Array，Map，Set，String，TypedArray，arguments等等

2. for-of 遍历的是值，for-in遍历的是key

遍历其他可迭代对象

Map

for-of

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
 
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for-in

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
 
for (let entry in iterable) {
  console.log(entry);
}
// 啥都不输出

Set

for-of

let iterable = new Set([1, 1, 2, 2, 3, 3]);
 
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for-in

let iterable = new Set([1, 1, 2, 2, 3, 3]);
 
for (let value in iterable) {
  console.log(value);
}
// 啥都不输出

for-in 输出原型上属性

输出原型属性

Object.prototype.key1 = function() {}; 
Array.prototype.key2 = function() {};

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

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

避免输出原型属性

Object.prototype.key1 = function() {}; 
Array.prototype.key2 = 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