for in和for of的区别

1. 在循环对象属性的时候使用for...in，在遍历数组的时候使用for...of

2. for...of是 ES6 新引入的特性，可用于在可迭代对象（包括 Array、Map、Set、String、TypedArray、arguments对象）上创建一个迭代循环

3. for...in遍历的是对象的可枚举属性和原型对象上的属性

如果只想遍历对象本身的属性，可以使用Object.getOwnPropertyNames()或者使用for...in结合hasOwnProperty()一起使用

Object.keys()和Object.getOwnPropertyNames()的异同：

相同点：都只返回对象本身的属性，不会返回原型对象上的属性

不同点：Object.keys()只返回对象上可枚举的属性，Object.getOwnPropertyNames()返回对象上所有的属性（包括不可枚举属性但不包括 Symbol 值作为名称的属性）

// for...in 和 for...of 的区别
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

// for...in 结合 hasOwnProperty() 一起使用
var triangle = {a: 1, b: 2, c: 3};
function ColoredTriangle() {
  this.color = 'red';
}
ColoredTriangle.prototype = triangle;
var obj = new ColoredTriangle();
for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  }
}

// Output:
// "obj.color = red"

// 测试 Object.keys() 和 Object.getOwnPropertyNames() 的异同：
var obj = {};
obj['name'] = 'tom';
Object.defineProperty(obj, 'sex', {
	enumerable: false,
	value: 'man'
})
obj[Symbol('age')] = 20;
console.log(Object.keys(obj));
console.log(Object.getOwnPropertyNames(obj));

// Output:
// ['name']
// ['name', 'sex']

参考资料：

for…of语句

for…in语句