一、for...in

定义

1. 遍历对象自身的和继承的可枚举的属性（不含Symbol属性）的键名。
2. 由于对象的属性没有顺序，因此for...in每个属性都会返回一次，但输出的属性顺序不可预测。

语法：

for (var key in obj) {

    console.log(obj[key])
}

这里的var操作符不是必需，但为了保证局部变量，推荐使用上面的写法

代码解析

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayHello = function () {
    console.log('Hello');
  }
}

Person.prototype.addr = 'The Earth'
Person.prototype.getNum = function() {
  console.log(1);
}

const tom = new Person('Tom', 18, 'tomato')
console.log(tom); 
console.log(tom.__proto__); 

for (var key in tom) {
  console.log(key   ':'   tom[key]);

}

for...in用于遍历数组

遍历数组的缺点：

• 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for...in循环会以任意顺序遍历键名。
• for...in循环主要是为遍历对象而设计的，不适用于遍历数组

const colors = ['red', 'blue', 'yellow']
colors.name = 'overcast'
for (var key in colors) {

  console.log(key); 
}

for (var v of colors) {
  console.log(v);  
}

使用for...in进行深拷贝

function deepClone (obj = {}) {
  let result
  if (typeof obj !== 'object' || obj === null) {
    return obj
  }

  if (obj instanceof Array) {
    result = []
  } else {
    result = {}
  }

  for (let key in obj) {

    if (obj.hasOwnProperty(key)) {

      result[key] = deepClone(obj[key])
    }
  }

  return result
}

const obj1 = {
  name: 'tom',
  colors: ['red', 'blue'],
  numbers: {
    language: 96,
    mathematics: 100
  }
}

const obj2 = deepClone(obj1)
obj2.name = 'jane'
obj2.colors = ['pink']
obj2.numbers.language = 100

console.log(obj1); 
console.log(obj2); 

Object.keys()，Object.values()，Object.entries()

定义

Object.keys()，Object.values()，Object.entries()均返回一个数组，区别是数组成员不一样（都不含Symbol属性）。

• Object.keys()
  • 返回一个数组
  • 数组成员是参数对象自身的（不含继承的）所有可枚举（enumerable）属性的键名
• Object.values()
  • 返回一个数组
  • 数组成员是参数对象自身的（不含继承的）所有可枚举（enumerable）属性的键值
• Object.entries()
  • 返回一个数组
  • 数组成员是参数对象自身的（不含继承的）所有可枚举（enumerable）属性的键值对数组。

语法

• Object.keys(obj)
• Object.values(obj)
• Object.entries(obj)

var data = { name: 'tim', age: 18, [Symbol()]: 123 };
console.log(Object.keys(data)); 
console.log(Object.values(data)); 
console.log(Object.entries(data)); 

console.log(Object.keys('foo')); 
console.log(Object.values('foo')); 
console.log(Object.entries('foo')); 

结合结合数组的方法遍历对象属性

• for...of

let obj = { a: 1, b: 2, c: 3 };

for (let key of Object.keys(obj)) {
  console.log(key); 
}

for (let value of Object.values(obj)) {
  console.log(value); 
}

for (let [key, value] of Object.entries(obj)) {
  console.log([key, value]); 
}

• forEach, filter, map, findIndex, every, some...

Object.keys(obj).forEach(key => {
  console.log(key   ':'   obj[key]); 
})
Object.values(obj).forEach((value) => {
  console.log(value); 
})
Object.entries(obj).forEach(([k, v]) => {
  console.log(k   ':'   v); 
})

Object.entries将对象转为真正的Map结构

const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); 

Object.getOwnPropertyNames(obj)

定义

• 返回一个数组
• 数组成员包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）的键名。

语法

Object.getOwnPropertyNames(obj)

代码解析

const obj = { foo: 'bar', baz: 42 };
console.log(Object.getOwnPropertyNames(obj)); 

const obj1 = { a: 1, b: 2, [Symbol()]: 123 };
console.log(Object.getOwnPropertyNames(obj1)); 

let obj2 = Object.create({}, {
  num: {
    value: 42,
    enumerable: false 
  }
})

console.log(Object.values(obj2)); 
console.log(Object.getOwnPropertyNames(obj2)); 

遍历

Object.getOwnPropertyNames(obj)返回的数组便可以用数组的方法进行遍历

var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val   " -> "   obj[val]); 
});

Object.getOwnPropertySymbols(obj)

定义

• 返回一个数组
• 数组成员包含对象自身的所有Symbol属性的键名。

语法

Object.getOwnPropertySymbols(obj)

代码解析

只返回对象的自身的symbol属性，不返回普通属性

const obj = { a: 'Hello' };
let b = Symbol('a');
obj[Symbol('b')] = 'World';

console.log(Object.getOwnPropertySymbols(obj)); 

与for...in循环、Object.getOwnPropertyNames比较

const obj1 = { [Symbol('foo')]: 'bar' };
const obj2 = { a: 1 }

for (let i in obj1) {
  console.log(i); 
}
console.log(Object.getOwnPropertyNames(obj1)); 
console.log(Object.getOwnPropertySymbols(obj1)); 
console.log(Object.getOwnPropertySymbols(obj2)); 

遍历对象

const obj = {
  [Symbol('a')]: '1',
  [Symbol('b')]: '2',
  [Symbol('c')]: '3',
}

Object.getOwnPropertySymbols(obj).forEach(key => {
  console.log(key, ':', obj[key]); 
})

Reflect.ownKeys(obj)

定义

• 返回一个数组
• 数组成员包含对象自身的（不含继承的）所有键名，不管键名是Symbol或字符串，也不管是否可枚举。
• 基本为 Object.getOwnPropertyNames 和 Object.getOwnPropertySymbols 之和。

语法

Reflect.ownKeys(obj)

代码解析

const obj = {
  a: 1,
  [Symbol('b')]: 2,
  [Symbol('c')]: 3,
}

Object.defineProperty(obj, 'd', {
  value: 4,
  enumerable: false
})

console.log(obj); 

console.log(Object.keys(obj));  
console.log(Object.getOwnPropertyNames(obj)); 
console.log(Object.getOwnPropertySymbols(obj)); 
console.log(Reflect.ownKeys(obj)); 

其他

对象属性遍历的次序规则

以上遍历对象的方法都遵循同一个规则：

• 首先遍历所有数值键，按照数值升序排列。
• 其次遍历所有字符串键，按照加入时间升序排列。
• 最后遍历所有 Symbol 键，按照加入时间升序排列。

Reflect.ownKeys({ [Symbol()]:0, b: 0, 10: 0, 2: 0, a:0 })

注意事项

• ES6 规定，所有 Class 的原型的方法都是不可枚举的。
• 操作中引入继承的属性会让问题复杂化，大多数时候，我们只关心对象自身的属性。所以，尽量不要用for...in循环，而用Object.keys()代替。