300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > JavaScript中遍历对象属性方法详解

JavaScript中遍历对象属性方法详解

时间:2023-08-07 06:47:48

相关推荐

JavaScript中遍历对象属性方法详解

目录

for...inObject.keys()Reflect.ownKeys()Object.getOwnPropertyNames()Object.getOwnPropertySymbols()总结

JavaScript中有多种方式遍历对象中的属性,本文中所说的对象都是普通的Object对象,不包括Array、Map、Set等实现了Iterator接口的对象。

对象属性的遍历主要受几方面的影响: 能否遍历原型链上的属性、能否遍历不可枚举属性、能否遍历Symbol属性。

遍历对象属性的方式包括:for...inObject.keys()Reflect.ownKeys()Object.getOwnPropertyNames()Object.getOwnPropertySymbols()

为了测试以上几种方式的区别,我们首先构造一组包含自身属性及原型链属性、可枚举属性及不可枚举属性、普通非Symbol属性及Symbol属性。

const c = Symbol('c');const father = {a: 1,b: 2,[c]: 3,getA() {return this.a;},getB() {return this.b;}};Object.defineProperty(father, 'd', {value: 4,enumerable: false});function Child() {this.e = 5;this.f = 6;const g = Symbol('g');this[g] = 7;};Child.prototype = father;const obj = new Child();Object.defineProperty(obj, 'h', {value: 8,enumerable: false});const i = Symbol('i');Object.defineProperty(obj, i, {value: 9,enumerable: false});

以上属性按照不同维度可以划分如下

根据是否是自身属性划分: obj自身属性: e、f、Symbol(g)、h、Symbol(i)obj原型链上的属性: a、b、Symbol©、getA、getB、d 根据是否是可枚举属性划分: 可枚举属性: a、b、Symbol©、getA、getB、e、f、Symbol(g)不可枚举属性: d、h、Symbol(i) 根据是否是Symbol属性划分: 非Symbol属性: a、b、d、e、f、hSymbol属性: Symbol©、Symbol(g)、Symbol(i)

下面使用不同的方式对上述对象进行属性遍历。

for…in

for (var key in obj) {console.log(key);}// 输出:// e// f// a// b// getA// getB

以上示例说明for-in具有以下性质:

会同时遍历自身以及原型链上的属性只遍历可枚举属性,不遍历不可枚举属性不遍历Symbol

结论:for...in遍历自身及原型链上的可枚举的非Symbol属性,其遍历原型链上的属性,其他方法都不遍历原型链上的属性

Object.keys()

console.log(Object.keys(obj));// 输出:// ['e', 'f']

以上示例说明Object.keys()具有以下性质:

只遍历自身属性,不遍历原型链上的属性只遍历可枚举属性,不遍历不可枚举属性不遍历Symbol

结论:Object.keys()遍历自身的可枚举的非Symbol属性,所以Object.keys()是遍历最严格的

Reflect.ownKeys()

// console.log(Reflect.ownKeys(obj));// 输出:// ['e', 'f', 'h', Symbol(g), Symbol(i)]

以上示例说明Reflect.ownKeys()具有以下性质:

只遍历自身属性,不遍历原型链上的属性可枚举属性与不可枚举属性都可遍历可遍历Symbol

结论:Reflect.ownKeys()遍历自身的所有属性不考虑是否可枚举以及是否是Symbol,方法名ownKeys中的own表示遍历自身属性,Keys表示可以同时遍历普通属性以及Symbol。

Object.getOwnPropertyNames()

console.log(Object.getOwnPropertyNames(obj));// 输出:// ['e', 'f', 'h']

以上示例说明Object.getOwnPropertyNames()具有以下性质:

只遍历自身属性,不遍历原型链上的属性可枚举属性与不可枚举属性都可遍历不可遍历Symbol

结论:Object.getOwnPropertyNames()遍历自身的非Symbol属性,不考虑是否可枚举,getOwnPropertyNames中的Own表示遍历自身属性,PropertyNames表示只遍历普通属性,不遍历Symbol。

Object.getOwnPropertySymbols()

// console.log(Object.getOwnPropertySymbols(obj));// 输出:// [Symbol(g), Symbol(i)]

以上示例说明Object.getOwnPropertySymbols()具有以下性质:

只遍历自身属性,不遍历原型链上的属性可枚举与属性与不可枚举属性都可遍历只能遍历Symbol,不遍历非Symbo属性

结论:Object.getOwnPropertySymbols()只遍历自身的Symbol,更强调own和symbol,不考虑是否可枚举,方法名getOwnPropertySymbols中的Own表示只遍历自身属性,PropertySymbols表示只遍历Symbol。

总结

从方法的方法名就能看出该方法能遍历哪些属性

own: 方法名中的own决定能否遍历原型链上的属性 如果方法名中包含own, 则说明该方法只能遍历自身对象自身的属性,不能遍历原型链上的属性,由于own更强调属性是不是自身的,不强调能否枚举,所以只要方法名中包含own,则自身对象上的可枚举以及不可枚举属性都可以遍历如果方法名中不包含own,也不能因此说明该方法可以遍历原型链上的属性 key: 方法名中的Key = PropertyName(普通非Symbol属性) + PropertySymbol(Symbol属性)如果方法名中包含key,则说明该方法同时遍历普通非Symbol属性以及Symbol属性如果方法名中包含PropertyNames,则说明该方法只遍历普通非Symbol属性,不遍历Symbol属性如果方法名中包含PropertySymbols,则说明该方法只遍历Symbol属性,不遍历非Symbol属性for...in遍历自身及原型链上的可枚举的非Symbol属性,其遍历原型链上的属性,其他方法都不遍历原型链上的属性Object.keys()遍历自身的可枚举的非Symbol属性,所以Object.keys()是遍历最严格的Reflect.ownKeys()遍历自身的所有属性不考虑是否可枚举以及是否是Symbol,方法名ownKeys中的own表示遍历自身属性,Keys表示可以同时遍历普通属性以及Symbol。它的返回值等同于Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))Object.getOwnPropertyNames()遍历自身的非Symbol属性,不考虑是否可枚举,getOwnPropertyNames中的Own表示遍历自身属性,PropertyNames表示只遍历普通属性,不遍历Symbol。Object.getOwnPropertySymbols()只遍历自身的Symbol,不考虑是否可枚举,更强调own和symbol,方法名getOwnPropertySymbols中的Own表示只遍历自身属性,PropertySymbols表示只遍历Symbol。

参考:

for…in

Object.keys()

Reflect.ownKeys()

Object.getOwnPropertyNames()

Object.getOwnPropertySymbols()

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。