如何列出 JavaScript 对象的属性？

Question

假设我这样创建了一个对象：

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

检索属性名称列表的最佳方法是什么？即我想最终得到一些可变的“键”：

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

Answer 1

在现代浏览器（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 getKeys 替换为Object.prototype.keys 以允许您在任何对象上调用.keys()。扩展原型有一些副作用，我不建议这样做。

Answer 2

正如slashnick 所指出的，您可以使用“for in”构造来遍历对象以获取其属性名称。但是，您将遍历对象原型链中的所有属性名称。如果您想仅迭代对象自身的属性，您可以使用Object#hasOwnProperty() 方法。因此具有以下内容。

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

Answer 3

IE 不支持原生属性的 for(i in obj)。这是我能找到的所有道具的列表。

似乎 stackoverflow 做了一些愚蠢的过滤。

该列表位于此 google 群组帖子的底部：- https://groups.google.com/group/hackvertor/browse_thread/thread/a9ba81ca642a63e0

Answer 4

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

http://ajaxian.com/archives/javascript-variable-dump-in-coldfusion

Answer 5

请注意，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/

Answer 6

正如 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 错误的解决方法here .

Answer 7

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

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 对象

Answer 8

这适用于大多数浏览器，甚至在 IE8 中，并且不需要任何类型的库。 var i 是您的密钥。

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

Answer 9

在支持js 1.8的浏览器下：

[i for(i in obj)]

Answer 10

可以用 jQuery 做如下：

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

Answer 11

Mozilla 有 full implementation details 说明如何在不支持的浏览器中执行此操作，如果有帮助的话：

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 文件中。

Answer 12

基于已接受的答案。

如果对象有你想调用的属性说 .properties() 试试！

var keys = Object.keys(myJSONObject);

for (var j=0; j < keys.length; j++) {
  Object[keys[j]].properties();
}

Answer 13

由于我几乎在每个项目中都使用 underscore.js，所以我会使用 keys 函数：

var obj = {name: 'gach', hello: 'world'};
console.log(_.keys(obj));

输出将是：

['name', 'hello']

Answer 14

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

Answer 15

该解决方案适用于我的案例和跨浏览器：

var getKeys = function(obj) {
    var type = typeof  obj;
    var isObjectType = type === 'function' || type === 'object' || !!obj;

    // 1
    if(isObjectType) {
        return Object.keys(obj);
    }

    // 2
    var keys = [];
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {
            keys.push(i)
        }
    }
    if(keys.length) {
        return keys;
    }

    // 3 - bug for ie9 <
    var hasEnumbug = !{toString: null}.propertyIsEnumerable('toString');
    if(hasEnumbug) {
        var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',
            'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];

        var nonEnumIdx = nonEnumerableProps.length;

        while (nonEnumIdx--) {
            var prop = nonEnumerableProps[nonEnumIdx];
            if (Object.prototype.hasOwnProperty.call(obj, prop)) {
                keys.push(prop);
            }
        }

    }

    return keys;
};

Answer 16

使用Reflect.ownKeys()

var obj = {a: 1, b: 2, c: 3};
Reflect.ownKeys(obj) // ["a", "b", "c"]

Object.keys 和 Object.getOwnPropertyNames 无法获得 non-enumerable 属性。它甚至适用于不可枚举的属性。

var obj = {a: 1, b: 2, c: 3};
obj[Symbol()] = 4;
Reflect.ownKeys(obj) // ["a", "b", "c", Symbol()]

Answer 17

使用 ES6 及更高版本（ECMAScript 2015），您可以像这样获取所有属性：

let keys = Object.keys(myObject);

如果你想列出所有值：

let values = Object.keys(myObject).map(key => myObject[key]);

Answer 18

这里有很多答案...这是我的 2 美分。

我需要一些东西来打印出所有 JSON 属性，即使是带有子对象或数组（包括父名称）的那些。

所以 - 对于这个 JSON：

mylittleJson = {
  "one": "blah",
  "two": {
      "twoone": "",
      "twotwo": "",
      "twothree": ['blah', 'blah']
  },
  "three": ""
}

它会打印这个：

.one
.two.twoone
.two.twotwo
.two.twothree
.three

这里是函数

function listatts(parent, currentJson){
   var attList = []
   if (typeof currentJson !== 'object' || currentJson == undefined || currentJson.length > 0) {
      return
   }
   for(var attributename in currentJson){
       if (Object.prototype.hasOwnProperty.call(currentJson, attributename)) {
           childAtts = listatts(parent + "." + attributename, currentJson[attributename])
           if (childAtts != undefined && childAtts.length > 0)
               attList = [...attList, ...childAtts]
           else 
               attList.push(parent + "." + attributename)
       }
   }
   return attList
}

希望它也有帮助。