玩转JS对象：探索各种遍历方法

对象属性划分

• 原型属性
• 对象自身可枚举属性
• 对象自身不可枚举属性
• Symbol 属性

// 原型属性
const obj = Object.create({ bar: 'bar',[Symbol('s1')]: 's1' });

// 对象自身可枚举属性
obj.foo = 'foo';

// 对象自身不可枚举属性
Object.defineProperty(obj, 'name', {
    enumerable: false,
    value: 'king'
});

// Symbol 属性
obj[Symbol('age')] = 'age';

for … in

获取对象自身可枚举属性+原型链上的可枚举属性, 不包含 Sysbol 属性

for (let k in obj) {
    console.log(k);
}
/*
 foo
 bar
 */

配合 hasOwnProperty() 方法使用, 过滤原型链上的属性

for (let k in obj) {
    if (obj.hasOwnProperty(k)) {
      console.log(k);
    }
}
/*
 foo
 */

补充: class 的 function

类内部定义的所有方法都是不可枚举的

class Person {
    constructor(name) {
            this.name = name;
        }
        // getName 是类的原型上的方法
    getName() {
        return this.name;
    }
}
const p = new Person('wcy');
for (let k in p) {
    console.log(k);
}
// name

for … in 属性顺序

1. 对于大于等于0的整数, 会按照大小进行排序, 对于小数和负数会当作字符串处理
2. 对于String类型, 按照定义顺序输出
3. Symbol 属性会过滤, 不会输出

Object.keys()

获取对象自身的可枚举属性, 不包含原型链上的可枚举属性和Symbo属性

ES5 新增

Object.keys(obj).forEach(item => {
    console.log(item);
});
// foo

Object.keys() 属性顺序

1. 对于大于等于0的整数, 会按照大小进行排序, 对于小数和负数会当作字符串处理
2. 对于String类型, 按照定义顺序输出
3. Symbol 属性会过滤, 不会输出

Object.getOwnPropertyNames()

获取对象自身的所有属性名, 包括不可枚举属性

不包含原型链上的属性和Symbol 属性

ES5 新增

Object.getOwnPropertyNames(obj).forEach(item => {
    console.log(item);
});
/*
foo
name
*/

如何判断属性是否可枚举

Object.getOwnPropertyDescriptor

Object.prototype.propertyIsEnumerable

Object.getOwnPropertySymbols()

获取对象自身的所有 Symbol 属性

不包含原型链上的 Symbol 属性

ES6 新增

Object.getOwnPropertySymbols(obj).forEach(item => {
    console.log(item);
})
// Symbol(age)

Reflect.ownKeys()

获取对象自身所有属性名, 包括不可枚举+Symbol 属性

ES6 新增

Reflect.ownKeys(obj).forEach(item => {
    console.log(item);
});
/*
foo
name
Symbol(age)
*/