多种获取对象的属性的方法以及他们的区别

51次阅读

共计 1686 个字符,预计需要花费 5 分钟才能阅读完成。

一个对象的属性本身,也有不同类型:是否是来自继承的属性,是否是可枚举的属性。JS 也提供了多种不同的接口函数来支持开发者得到某些特定类型的属性。下面就来看一下都有哪些接口函数以及他们之间的区别:
integer indices in ascending numeric, then strings in property creation order, then symbols in property creation order
一:for…in
for…in 是返回对象的包含 自身的 && 继承 的所有 可迭代属性(不包含 Symbol 类型)。

二:Object.keys(obj)

1: 返回的是一个 数组
2: 数组里面的元素是 obj 的属性的 字符串 格式
3: 返回对象的 自身的,不包含继承 的所有 可迭代属性(Symbol 除外)

let DOG = function () {};
DOG.prototype.color = 'black';
dog = new DOG();
Object.defineProperty(dog, 'age', {value: function () {return 2;},
    enumerable: false
});
Object.defineProperty(dog, 'name', {value: function () {return 'wangwang';},
    enumerable: true
});
let keys = Object.keys(dog);
console.log(keys); //["name"]

上面 console 的结果,不会得到 color 属性,因为它是继承的;不会得到 age 属性,因为它不可迭代。

三:Object.getOwnPropertyNames(obj)

1: 返回的是一个 数组
2: 数组里面的元素是 obj 的属性的 字符串 格式
3: 返回对象的 自身,不包含继承 不可迭代,可迭代(Symbol 除外)的所有属性

四:Object.getOwnPropertySymbols(obj)

1: 返回一个Array
2: Array 的元素是对象上的Symbol 属性

let dog = {};
dog['he'] = 'he';
let ageSymbol =  Symbol('age');
let nameSymbol =  Symbol('name');
dog[ageSymbol] = 'ageSymbol';
dog[nameSymbol] = 'nameSymbol';
let keys = Object.getOwnPropertySymbols(dog);
console.log(keys); //  [Symbol(age), Symbol(name)]

五:Reflect.ownKeys(obj)

1: 返回一个 Array
2: Array 的元素是 自身 的所有属性,包括 可迭代 不可迭代Symbol

let DOG = function () {};
DOG.prototype.color = 'black';
dog = new DOG();
Object.defineProperty(dog, 'name', {enumerable: false});
dog['he'] = 'he';
let ageSymbol =  Symbol('age');
let nameSymbol =  Symbol('name');
dog[ageSymbol] = 'ageSymbol';
dog[nameSymbol] = 'nameSymbol';
let keys = Reflect.ownKeys(dog);
console.log(keys); //["name", "he", Symbol(age), Symbol(name)]

总结就是:

1: 只有 for…in 会得到 继承 的属性,其他 API 都是自身的属性
2: Symbol 类型的属性很特别,有 专门 的 API 获取
3: Reflect.ownKeys(obj) 得到的属性最多,得到对象自身的 所有类型 的属性
4: Object.keys(obj) 返回的属性最少,只得到自身的 可迭代 属性,Symbol 除外
5: Object.getOwnPropertyNames(obj) 返回的属性 最普遍,最常用;就是自身的所有类型属性(Symbol 除外)

正文完
 0