当前位置:  开发笔记 > 编程语言 > 正文

如何列出JavaScript对象的属性?

如何解决《如何列出JavaScript对象的属性?》经验,为你挑选了11个好方法。

假设我创建了一个对象:

var myObject =
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

检索属性名称列表的最佳方法是什么?即我想最终得到一些变量'键',这样:

keys == ["ircEvent", "method", "regex"]

slashnick.. 1026

在现代浏览器(IE9 +,FF4 +,Chrome5 +,Opera12 +,Safari5 +)中,您可以使用内置的Object.keys方法:

var keys = Object.keys(myObject);

上面有一个完整的polyfill,但简化版本是:

var getKeys = function(obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}

或者替换var getKeysObject.prototype.keys让你调用.keys()任何对象.扩展原型有一些副作用,我不建议这样做.



1> slashnick..:

在现代浏览器(IE9 +,FF4 +,Chrome5 +,Opera12 +,Safari5 +)中,您可以使用内置的Object.keys方法:

var keys = Object.keys(myObject);

上面有一个完整的polyfill,但简化版本是:

var getKeys = function(obj){
   var keys = [];
   for(var key in obj){
      keys.push(key);
   }
   return keys;
}

或者替换var getKeysObject.prototype.keys让你调用.keys()任何对象.扩展原型有一些副作用,我不建议这样做.


@slashnick你的"简化版本"返回对象原型链中的所有属性(因为它使用"for ... in"),而(ECMAScript 5.1)`Object.keys`方法只返回对象自己的属性.我认为这是一个重要的区别.
我会再次更新效果'你可能想要这样做来对象原型......但是不要!'
有人想点亮,为什么不建议在Object的原型中添加函数?
`for(myObject中的var键){...}`技术对于浏览器和V8之外的javascript运行时非常有用.例如,当将javascript map-reduce查询传递给Riak时,`Object`对象不存在,因此`Object.keys`方法不可用.
这是一个完全不同的问题,在stackoverflow或谷歌上的快速搜索将给你足够的阅读

2> Pablo Cabrer..:

正如slashnick指出的那样,您可以使用"for in"构造来迭代对象的属性名称.但是,您将迭代对象原型链中的所有属性名称.如果你想迭代只是在对象自己的属性,你可以利用的对象#hasOwnProperty()方法.因此具有以下内容.

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        /* useful code here */
    }
}


我希望在上面的slashnic的答案之前我已经读过这个.我只需花15分钟按住`esc`键,因为该对象有大约一百万个属性,其中大多数没有使用,我有一个警报.
大声笑@MarkHenderson - 但下一次,只是杀死浏览器的进程并重新启动它而不是浪费15分钟:)

3> Andy E..:

正如Sam Dutton回答的那样,ECMAScript第5版中引入了一种用于此目的的新方法. Object.keys()将做你想要的,并在Firefox 4,Chrome 6,Safari 5和IE 9中得到支持.

您也可以在不支持它的浏览器中轻松实现该方法.但是,其中一些实现与Internet Explorer不完全兼容.这是一个更兼容的解决方案:

Object.keys = Object.keys || (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !{toString:null}.propertyIsEnumerable("toString"),
        DontEnums = [ 
            'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty',
            'isPrototypeOf', 'propertyIsEnumerable', 'constructor'
        ],
        DontEnumsLength = DontEnums.length;

    return function (o) {
        if (typeof o != "object" && typeof o != "function" || o === null)
            throw new TypeError("Object.keys called on a non-object");

        var result = [];
        for (var name in o) {
            if (hasOwnProperty.call(o, name))
                result.push(name);
        }

        if (hasDontEnumBug) {
            for (var i = 0; i < DontEnumsLength; i++) {
                if (hasOwnProperty.call(o, DontEnums[i]))
                    result.push(DontEnums[i]);
            }   
        }

        return result;
    };
})();

请注意,当前接受的答案不包括对hasOwnProperty()的检查,并将返回通过原型链继承的属性.它也没有考虑Internet Explorer中着名的DontEnum错误,其中原型链上的非可枚举属性导致具有相同名称的本地声明的属性继承其DontEnum属性.

实现Object.keys()将为您提供更强大的解决方案.

编辑:在最近与Prototype的着名贡献者kangax的讨论之后,我基于他Object.forIn()在这里找到的函数的代码实现了DontEnum bug的变通方法.


非常好,安迪:)我想提醒一下 - 在这个帖子中似乎没有人提到 - ES5`Object.keys`只返回一个对应于对象的**可枚举**属性的字符串数组.在使用本机(用户定义的)对象时,这可能并不重要,但对于主机对象应该非常明显(尽管未指定的主机对象行为是一个单独的 - 痛苦的故事).为了枚举所有(包括不可枚举的)属性,ES5提供了`Object.getOwnPropertyNames`(请参阅我的compat中的支持.表 - http://kangax.github.com/es5-compat-table/)
我已将此解决方案集成到es5-shim http://github.com/kriskowal/es5-shim/blob/master/es5-shim.js#L390

4> Sam Dutton..:

请注意,Firefox 4,Chrome 6,Safari 5,IE 9及更高版本支持Object.keys和其他ECMAScript 5方法.

例如:

var o = {"foo": 1, "bar": 2}; 
alert(Object.keys(o));

ECMAScript 5兼容性表:http://kangax.github.com/es5-compat-table/

新方法的描述:http://markcaudill.com/index.php/2009/04/javascript-new-features-ecma5/



5> Ciro Santill..:

Object.getOwnPropertyNames(obj)

除了显示的属性外,此函数还显示不可枚举的属性Object.keys(obj).

在JS中,每个属性都有一些属性,包括布尔值enumerable.

一般来说,不可枚举的属性更"内部化"并且不经常使用,但是有时候深入研究它们才能看到真正发生的事情.

例:

var o = Object.create({base:0})
Object.defineProperty(o, 'yes', {enumerable: true})
Object.defineProperty(o, 'not', {enumerable: false})

console.log(Object.getOwnPropertyNames(o))
// [ 'yes', 'not' ]

console.log(Object.keys(o))
// [ 'yes' ]

for (var x in o)
    console.log(x)
// yes, base

另请注意:

Object.getOwnPropertyNames并且Object.keys 不要上原型链找到base

for in

有关原型链的更多信息,请访问:https://stackoverflow.com/a/23877420/895245



6> Matt..:

我是转储功能的忠实粉丝.

http://ajaxian.com/archives/javascript-variable-dump-in-coldfusion 替代文字



7> sbonami..:

可以用jQuery做到如下:

var objectKeys = $.map(object, function(value, key) {
  return key;
});



8> zeacuss..:

如果您只是尝试获取元素而不是函数,那么此代码可以帮助您

this.getKeys = function() {

    var keys = new Array();
    for(var key in this) {

        if( typeof this[key] !== 'function') {

            keys.push(key);
        }
    }
    return keys;
}

这是我实现HashMap的一部分,我只想要键,"this"是包含键的hashmap对象



9> 小智..:

这适用于大多数浏览器,即使在IE8中也是如此,并且不需要任何类型的库.var i是你的关键.

var myJSONObject =  {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; 
var keys=[];
for (var i in myJSONObject ) { keys.push(i); }
alert(keys);


您的答案似乎与已经发布的答案相似,还有其他补充吗?

10> Rix Beck..:

在支持js 1.8的浏览器下:

[i for(i in obj)]



11> Kristofer So..:

Mozilla有关于如何在不支持的浏览器中执行此操作的完整实现详细信息,如果有帮助:

if (!Object.keys) {
  Object.keys = (function () {
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
        dontEnums = [
          'toString',
          'toLocaleString',
          'valueOf',
          'hasOwnProperty',
          'isPrototypeOf',
          'propertyIsEnumerable',
          'constructor'
        ],
        dontEnumsLength = dontEnums.length;

    return function (obj) {
      if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object');

      var result = [];

      for (var prop in obj) {
        if (hasOwnProperty.call(obj, prop)) result.push(prop);
      }

      if (hasDontEnumBug) {
        for (var i=0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
        }
      }
      return result;
    };
  })();
}

您可以根据需要包含它,但可能extensions.js包含在脚本堆栈顶部的某种文件中.

推荐阅读
依然-狠幸福
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有