协慌网

登录 贡献 社区

如何枚举 JavaScript 对象的属性?

如何枚举 JavaScript 对象的属性?

我实际上想列出所有已定义的变量及其值,但是我了解到定义一个变量实际上会创建 window 对象的属性。

答案

很简单:

for(var propertyName in myObject) {
   // propertyName is what you want
   // you can get the value like this: myObject[propertyName]
}

现在,您将无法以这种方式获取私有变量,因为它们不可用。


编辑: @bitwiseplatypus是正确的,除非您使用hasOwnProperty()方法,否则您将获得继承的属性 - 但是,我不知道为什么任何熟悉面向对象编程的人都期望得到更少的东西!通常,提起此问题的人会受到道格拉斯 · 克罗克福德(Douglas Crockford)的警告,这仍然让我感到困惑。同样,继承是 OO 语言的正常组成部分,因此是 JavaScript 的一部分,尽管它是典型的。

现在,这一说, hasOwnProperty()用于过滤是有用的,但我们并不需要发出警告声,好像有什么东西在得到继承属性危险。

编辑 2: @bitwiseplatypus提出了这样的情况:如果有人在比您最初编写对象时(通过其原型)晚的某个时间向您的对象添加属性 / 方法 - 的确如此,这可能会导致意外行为,我个人并不完全认为这是我的问题。只是一个问题。此外,如果我以某种方式设计事物,以便在构造对象的过程中使用原型,但又具有对对象的属性进行迭代的代码,而我想要所有继承的属性,该怎么办?我不会使用hasOwnProperty() 。然后,假设有人稍后添加了新属性。那时候如果表现不好,那是我的错吗?我不这么认为。我认为这就是为什么 jQuery 作为示例,指定了扩展其工作方式的方式(通过jQuery.extendjQuery.fn.extend )。

使用for..in循环枚举对象的属性,但要小心。枚举不仅将返回被枚举对象的属性,还将返回任何父对象的原型的属性。

var myObject = {foo: 'bar'};

for (var name in myObject) {
  alert(name);
}

// results in a single alert of 'foo'

Object.prototype.baz = 'quux';

for (var name in myObject) {
  alert(name);
}

// results in two alerts, one for 'foo' and one for 'baz'

为了避免在枚举中包括继承的属性,请检查hasOwnProperty()

for (var name in myObject) {
  if (myObject.hasOwnProperty(name)) {
    alert(name);
  }
}

编辑:我不同意 JasonBunting 的声明,我们无需担心枚举继承的属性。有一个在枚举,你是不是希望在继承属性,因为它可以改变你的代码的行为危险。

其他语言是否存在此问题无关紧要;事实是存在的,而且 JavaScript 特别容易受到攻击,因为对对象原型的修改会影响子对象,即使修改是在实例化之后进行的。

这就是 JavaScript 提供hasOwnProperty() ,这就是为什么要使用它以确保第三方代码(或可能修改原型的任何其他代码)不会破坏您的原因。除了添加一些额外的代码字节之外,使用hasOwnProperty()也没有任何缺点。

已经多次提出的标准方法是:

for (var name in myObject) {
  alert(name);
}

但是,Internet Explorer 6、7 和 8 在 JavaScript 解释器中有一个错误,该错误导致未枚举某些键。如果运行此代码:

var obj = { toString: 12};
for (var name in obj) {
  alert(name);
}

如果将在除 IE 之外的所有浏览器中警告 “12”。 IE 只会忽略此键。受影响的键值为:

  • isPrototypeOf
  • hasOwnProperty
  • toLocaleString
  • toString
  • valueOf

为了在 IE 中真正安全,您必须使用以下方法:

for (var key in myObject) {
  alert(key);
}

var shadowedKeys = [
  "isPrototypeOf",
  "hasOwnProperty",
  "toLocaleString",
  "toString",
  "valueOf"
];
for (var i=0, a=shadowedKeys, l=a.length; i<l; i++) {
  if map.hasOwnProperty(a[i])) {
    alert(a[i]);
  }
}

好消息是 EcmaScript 5 定义了Object.keys(myObject)函数,该函数以数组形式返回对象的键,并且某些浏览器(例如 Safari 4)已经实现了它。