ECMAScript 之取得 Object 的 Property Key

栏目: JavaScript · 发布时间: 5年前

内容简介：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() 都能顯示。

ECMAScript 之取得 Object 的 Property Key

  1. 因為 Object.keys() 回傳為 array，因此能直接使用 forEach()
  2. 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。

ECMAScript 之取得 Object 的 Property Key 

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 。

ECMAScript 之取得 Object 的 Property Key

  1. 將 lastName 的 Enumerable 設定為 false
  2. 使用 Object.keys()
  3. 只顯示 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() 仍然會顯示。

ECMAScript 之取得 Object 的 Property Key

  1. 將 lastName 的 Enumerable 設定為 false
  2. 使用 Object.getOwnPropertyNames()
  3. 無論 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 。

ECMAScript 之取得 Object 的 Property Key 

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 就可完全顯示了。

ECMAScript 之取得 Object 的 Property Key 

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

MDN , Object.keys()

MDN , Object.getOwnPropertyNames()

MDN , for in


以上所述就是小编给大家介绍的《ECMAScript 之取得 Object 的 Property Key》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
IT大败局

IT大败局

Merrill R.Chapman、周良忠 / 周良忠 / 电子工业出版社 / 2004-8-1 / 35.00

这是一本由作者亲身经历写就的MBA式教案。通过作者那专业人士的敏锐、活泼流畅的文笔和美国人特有的幽默，本书为我们剖析了IT界十个有代表性且影响深远的愚蠢败局。这十个败局涉及企业经营的十个主要方面，它们是：产业标准的魔力，“缩水”产品的阴霾，产品定位的泥潭，市场关系的教训，巨型企业的困惑，企业并购的陷阱，品牌战略的迷茫，技术导向的失衡，企业公关的真谛和科技虚幻的诱惑。 书中有许多鲜为人......一起来看看 《IT大败局》 这本书的介绍吧!

码农工具
JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3