属性的遍历

ES6一共有7种方法可以遍历对象的属性

1. for…in

for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
// for-in  遍历，只能遍历对象
// eslint-disable-next-line no-restricted-syntax
console.log('// for...in')
for (const item in obj) {
  console.log(item);
}

// for...in
firstProp
secondProp
lastProp

2. Object.getOwnPropertyNames(obj)

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

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
console.log('// Object.getOwnPropertyNames(obj)');
console.log(Object.getOwnPropertyNames(obj))
console.log('// keyName, obj[keyName]');
Object.getOwnPropertyNames(obj).forEach(function(keyName){
    console.log(keyName, obj[keyName]);
});

// Object.getOwnPropertyNames(obj)
['firstProp', 'secondProp', 'lastProp']
// keyName, obj[keyName]
firstProp 1
secondProp 2
lastProp true

3. Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有 Symbol 属性的键名。

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
console.log('// Object.getOwnPropertySymbols(obj)');
console.log(Object.getOwnPropertySymbols(obj))
console.log('// symbolName, obj[symbolName]');
Object.getOwnPropertySymbols(obj).forEach(function(symbolName){
    console.log(symbolName, obj[symbolName]);
});

// Object.getOwnPropertySymbols(obj)
[Symbol(length)]
// symbolName,obj[symbolName]
Symbol(length) 3

4. Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。

const obj = {
 firstProp: '1',
 secondProp: 2,
 lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
console.log('// Reflect.ownKeys(obj)')
console.log(Reflect.ownKeys(obj));

// Reflect.ownKeys(obj)
['firstProp', 'secondProp', 'lastProp', Symbol(length)]

5. Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承）所有可枚举属性（不含Symbol属性）的键名

const obj = {
  firstProp: '1',
  secondProp: 2,
  lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
const keys = Object.keys(obj);
console.log('// Object.keys');
console.log(keys);

// Object.keys
[ 'firstProp', 'secondProp', 'lastProp' ]

6. Object.values(obj)

Object.values(obj)返回对象属性值组成的数组

const obj = {
firstProp: '1',
secondProp: 2,
lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
const values= Object.values(obj);
console.log('// Object.values');
console.log(values);

// Object.values
['1', 2, true]

7. Object.entries(obj)

Object.entries(obj)返回对象键值对组成的数组

const obj = {
firstProp: '1',
secondProp: 2,
lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
const entries= Object.entries(obj);
console.log('// Object.entries');
console.log(entries);
console.log('// foreach output Object.entries');
entries.forEach(function(entry){
    console.log(entry);
})
console.log('// for...of output Object.entries');
for (const [key, value] of entries) {
  console.log(key, value);
}

// Object.entries
[ [ 'firstProp', '1' ], [ 'secondProp', 2 ], [ 'lastProp', true ] ]
// foreach output Object.entries
[ 'firstProp', '1' ]
[ 'secondProp', 2 ]
[ 'lastProp', true ]
// for...of output Object.entries
firstProp 1
secondProp 2
lastProp true

汇总

代码

const obj = {
    firstProp: '1',
    secondProp: 2,
    lastProp: true,
};
const len = Symbol('length');
obj[len] = 3;
// for-in  遍历，只能遍历对象
// eslint-disable-next-line no-restricted-syntax
console.log('// for...in')
for (const item in obj) {
    console.log(item);
}
console.log('// Object.getOwnPropertyNames(obj)');
console.log(Object.getOwnPropertyNames(obj))
console.log('// keyName, obj[keyName]');
Object.getOwnPropertyNames(obj).forEach(function (keyName) {
    console.log(keyName, obj[keyName]);
});
console.log('// Object.getOwnPropertySymbols(obj)');
console.log(Object.getOwnPropertySymbols(obj))
console.log('// symbolName, obj[symbolName]');
Object.getOwnPropertySymbols(obj).forEach(function (symbolName) {
    console.log(symbolName, obj[symbolName]);
});
console.log('// Reflect.ownKeys(obj)')
console.log(Reflect.ownKeys(obj));
const keys = Object.keys(obj);
console.log('// Object.keys');
console.log(keys);
const values = Object.values(obj);
console.log('// Object.values');
console.log(values);
const entries = Object.entries(obj);
console.log('// Object.entries');
console.log(entries);
console.log('// foreach output Object.entries');
entries.forEach(function (entry) {
    console.log(entry);
})
console.log('// for...of output Object.entries');
for (const [key, value] of entries) {
    console.log(key, value);
}

预期输出

// for...in
firstProp
secondProp
lastProp
// Object.getOwnPropertyNames(obj)
[ 'firstProp', 'secondProp', 'lastProp' ]
// keyName, obj[keyName]
firstProp 1
secondProp 2
lastProp true
// Object.getOwnPropertySymbols(obj)
[ Symbol(length) ]
// symbolName, obj[symbolName]
Symbol(length) 3
// Reflect.ownKeys(obj)
[ 'firstProp', 'secondProp', 'lastProp', Symbol(length) ]
// Object.keys
[ 'firstProp', 'secondProp', 'lastProp' ]
// Object.values
[ '1', 2, true ]
// Object.entries
[ [ 'firstProp', '1' ], [ 'secondProp', 2 ], [ 'lastProp', true ] ]
// foreach output Object.entries
[ 'firstProp', '1' ]
[ 'secondProp', 2 ]
[ 'lastProp', true ]
// for...of output Object.entries
firstProp 1
secondProp 2
lastProp true