阅读 437
javascript对象遍历的几种方式对比

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 图解以上几种遍历方法的区别

图片 1.png

文章分类
前端
文章标签