ECMAScript 之取得 Object 所有 Property 的 Key
栏目: JavaScript · 发布时间: 6年前
内容简介:ECMAScript Object 的 Property 基本上是由 Key / Value 構成,連 Method 也是指向 Function 的 Property,我們該如何取得 Object 所有 Property 的 Key 做進一步的運用呢 ?ECMAScript 3ECMAScript 5.1
ECMAScript Object 的 Property 基本上是由 Key / Value 構成,連 Method 也是指向 Function 的 Property,我們該如何取得 Object 所有 Property 的 Key 做進一步的運用呢 ?
Version
ECMAScript 3
ECMAScript 5.1
ECMAScript 2015
Object.keys()
將 Object 所有 Enumerable Property 的 Key 以 array 傳回,但不包含 Prototype 的 Property
ECMAScript 5.1
至於什麼是 Enumerable Property
呢 ? 稍後會介紹。
var person = { firstName: 'Sam', lastName: 'Xiao', fullName: function() { return this.firstName + ' ' + this.lastName; } }; Object.keys(person) .forEach(key => console.log(key)); // firstName // lastName // fullName
以 Object Literal 定義 person
,在 Object Literal 的 property 都是 enumerable,所以 Object.keys()
都能顯示。
- 因為
Object.keys()
回傳為 array,因此能直接使用forEach()
- Object Literal 皆為 Enumerable Property,因此所有 key 都能顯示
function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } Person.prototype.fullName = function() { return this.firstName + ' ' + this.lastName; }; var person = new Person('Sam', 'Xiao'); Object.keys(person) .forEach(key => console.log(key)); // firstName // lastName
ECMAScript 的 OOP 正統寫法,是將 method 定義在 Prototype,但 Object.keys()
無法抓到 Prototype 的 property。
Object.keys()
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } fullName() { return this.firstName + ' ' + this.lastName; } } var person = new Person('Sam', 'Xiao'); Object.keys(person) .forEach(key => console.log(key)); // firstName // lastName
若使用 ECMAScript 2015 的 class 寫法, Object.keys()
也只能抓到 firstName
與 lastName
,別忘了 class
本質仍是 Constructor Function,其 method 也是定義在 Prototype,因此 Object.keys()
抓不到很合理。
Q : 若要也顯示 Prototype 的 Enumerable Property 呢 ?
要使用 for...in
,稍後會介紹。
Object.getOwnPropertyNames()
將 Object 所有 Property 的 Key 以 array 傳回,包含 Enumerable 與 Non Enumerable Property,但不包含 Prototype 的 Property
ECMAScript 5.1
Object Literal 的 property 都是 Enumerable,所以 Object.keys()
都能使用,但要如何產生 Non Enumerable 的 property 呢 ?
var property = { firstName: { value: 'Sam', writable: true, configurable: true, enumerable: true, }, lastName: { value: 'Xiao', writable: true, configurable: true, enumerable: false, }, fullName: { value: function() { return this.firstName + ' ' + this.lastName; }, writable: true, configurable: true, enumerable: true, }, }; var person = Object.create({}, property); Object.keys(person) .forEach(key => console.log(key)); // firstName // fullName
若要特別建立 Non Enumerable Property,就必須使用 Object.create()
,並特別在 Property Object 設定是否為 Enumerable。
第 8 行
lastName: { value: 'Xiao', writable: true, configurable: true, enumerable: false, },
特別設定 lastName
property 的 enumerable
為 false
,則 Object.keys()
將無法顯示 lastName
。
- 將
lastName
的Enumerable
設定為false
- 使用
Object.keys()
- 只顯示
Enumerable
為true
的firstName
與fullName
var property = { firstName: { value: 'Sam', writable: true, configurable: true, enumerable: true, }, lastName: { value: 'Xiao', writable: true, configurable: true, enumerable: false, }, fullName: { value: function() { return this.firstName + ' ' + this.lastName; }, writable: true, configurable: true, enumerable: true, }, }; var person = Object.create({}, property); Object.getOwnPropertyNames(person) .forEach(key => console.log(key)); // firstName // lastName // fullName
若改用 Object.getOwnPropertyNames()
,則僅管 lastName
的 Enumerable
為 false
,但 Object.getOwnPropertyNames()
仍然會顯示。
- 將
lastName
的Enumerable
設定為false
- 使用
Object.getOwnPropertyNames()
- 無論
Enumerable
為true
或false
都會顯示
var prototype = { fullName: function() { return this.firstName + ' ' + this.lastName; }, }; var property = { firstName: { value: 'Sam', writable: true, configurable: true, enumerable: true, }, lastName: { value: 'Xiao', writable: true, configurable: true, enumerable: false, }, }; var person = Object.create(prototype, property); Object.getOwnPropertyNames(person) .forEach(key => console.log(key)); // firstName // lastName
將 fullName()
移到 Prototype,而 Object Literal 都是 Enumerable Property。
但因為 Object.getOwnPropertyNames()
不會顯示 Prototype 的 property,因此只能顯示 firstName
與 lastName
。
fullName() Object.getOwnPropertyNames()
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } fullName() { return this.firstName + ' ' + this.lastName; } } var person = new Person(); Object.getOwnPropertyNames(person) .forEach(key => console.log(key)); // firstName // lastName
若使用 ECMAScript 2015 的 class 寫法, Object.getOwnPropertyNames()
也只能抓到 firstName
與 lastName
,別忘了 class
本質仍是 Constructor Function,其 method 也是定義在 Prototype,因此 Object.getOwnPropertyNames()
抓不到很合理。
for…in
如同 Object.keys()
將 Object 所有 Enumerable Property 的 Key 以 array 傳回,但包含 Prototype 的 Property
ECMAScript 3
我們發現無論 Object.keys()
或 Object.getOwnPropertyNames()
,都無法顯示 Prototype 的 property,若要連 Prototype 的 property 也一起顯示,則要使用 for...in
。
function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } Person.prototype.fullName = function() { return this.firstName + ' ' + this.lastName; }; var person = new Person('Sam', 'Xiao'); for(let key in person) console.log(key); // firstName // lastName // fullName
將 fullName()
定義在 Prototype,之前使用 Object.keys()
或 Object.getOwnPropertyNames()
都無法顯示,但使用 for...in
就可完全顯示了。
fullName() for...in
class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } fullName() { return this.firstName + ' ' + this.lastName; } } var person = new Person('Sam', 'Xiao'); for(let key in person) console.log(key); // firstName // lastName
但 for...in
搭配 ECMAScript 2015 的 class
時,卻不會顯示 fullName
。
理論上 class
的 fullName()
是在 Prototype 上, for...in
應該會顯示卻沒顯示,也就是若搭配 class
, for...in
相當於 Object.keys()
,結果比較令人訝異。
簡單來說,能被 Object.keys()
或 for in
顯示的 property 就稱為 Enumerable Property,一般 Object Literal、Constructor Function 或 class 寫法的 property,都是 Enumerable Property,若要特別設定為 Non Enumerable Property,則要使用 Object.create()
建立 object
Summary
Object.keys() | Object.getOwnPropertyNames() | for in | |
---|---|---|---|
Non Enumerable | No | Yes | No |
Prototype | No | No | Yes |
Object.keys() Object.getOwnPropertyNames() for in
Conclusion
- 三種方式都各有其限制,要視需求選擇合適的方式
-
Object.keys()
與for..in
搭配class
時,竟然結果一樣,比較出乎意外,因為篇幅限制,將令開專文討論之
Reference
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- JS如何取得URL里的参数?
- ECMAScript 之取得 Object 的 Property Key
- 计算机如何在图像识别领域取得惊人突破
- 取得又深又多的子目錄路徑
- 如何取得服务器上的用户组列表?
- 长春市数字服务发现近年来取得优异成绩
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
我看电商2(双色)
黄若 / 电子工业出版社 / 2016-6 / 39.00元
《我看电商2》是行业畅销书《我看电商》的续集。 《我看电商》自出版以来,连续印刷14 次,受到业界人士和广大读者的高度好评。《我看电商2》承续作者一贯的风格,以行业观察、经验分享为出发点,重点分析了过去一年中国电商界的最新动态与趋势,包括双11点评、京东关闭拍拍、上市公司私有化等。 电子商务是我国近年来发展最快的新兴行业之一,作者作为这个行业的长老级领军人物,善于思考,长于实操。《我看......一起来看看 《我看电商2(双色)》 这本书的介绍吧!