javascript对象遍历的几种方式对比

1 Object.keys(), Object.values(), Object.entries()系列 可遍历对象自身可枚举属性(不含以Symbol类型为key的属性，以下简称symbol属性), 适合搭配forEach, for of等数组遍历方法使用

eg1：可遍历自身属性，不可遍历原型链上属性，不可遍历非枚举属性，不可遍历symbol属性

let obj = Object.create({ inheritProp: 1 }, { noneEnumbleProp: { value: 2 }});
obj.selfProp = 3;
const symbol = Symbol('prop');
obj[symbol] = 4;
Object.keys(obj); // ["selfProp"]

eg2：搭配数组遍历方法使用

let obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(key => {
    obj[key] = obj[key] + 1;
});

const newObj = {};
for (let [key, value] of Object.entries(obj)) {
    if (value % 2 === 0) {
        newObj[key] = value;
    }
}

2 Object.getOwnPropertyNames() 可遍历自身属性，不包括symbol属性 用法和Object.keys()一样，区别是比Object.keys()多遍历了自身非枚举属性

eg: 可遍历自身属性（枚举+非枚举），不可遍历原型链上属性，不可遍历symbol属性

let obj = Object.create({ inheritProp: 1 }, { noneEnumbleProp: { value: 2 }});
obj.selfProp = 3;
const symbol = Symbol('prop');
obj[symbol] = 4;
Object.getOwnPropertyNames(obj); // ["noneEnumbleProp", "selfProp"]

3 for in 可遍历原型链和自身的可枚举属性，不包括symbol属性，不可遍历非枚举属性

eg: 不可遍历symbol属性，不可遍历非枚举属性

let obj = Object.create({ inheritProp: 1 }, { noneEnumbleProp: { value: 2 }});
obj.selfProp = 3;
const symbol = Symbol('prop');
obj[symbol] = 4;
for (let prop in obj) {
    console.log(prop);
}
// selfProp
// inheritProp

4 Object.getOwnPropertySymbols() 可遍历自身symbol属性（枚举+非枚举）

eg:

let obj = Object.create({ inheritProp: 1 }, { noneEnumbleProp: { value: 2 }});
obj.selfProp = 3;
const symbol1 = Symbol('prop1');
const symbol2 = Symbol('prop2');
obj[symbol1] = 4;
Object.defineProperty(obj, symbol2, { value:5 });
Object.getOwnPropertySymbols(obj); // [Symbol(prop1), Symbol(prop2)]

5 图解以上几种遍历方法的区别