How to get an object's properties in JavaScript / jQuery?

In JavaScript / jQuery, if I alert some object, I get either [object] or [object Object]

Is there any way to know:

?

You can lookup an objects keys + values by invoking either Javascripts native for in loop:

var obj = {
    foo:    'bar',
    base:   'ball'
};

for(var key in obj) {
    alert('key: ' + key + 'n' + 'value: ' + obj[key]);
}

or use jQuerys .each() method:

$.each(obj, function(key, element) {
    alert('key: ' + key + 'n' + 'value: ' + element);
});

With the exception of six primitive types, everything in ECMA-/Javascript is an object. Arrays, Functions, everything is an object. Most of those primitives, are actually also objects with a limited selection of methods respectively, they are casted into objects when required under the hood. To know the base classname you may invoke the Object.prototype.toString method on an object, like

alert(Object.prototype.toString.call([]));

will output [object Array] .

There are several other classnames like [object Object] , [object Function] , [object Date] , [object String] , [object Number] , [object Array] , [object Regex]

To get listing of object properties/values:

console.dir(<object>);

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

// Example to call it:

   var arrKeys = fGetKeys(document);

   for (var i=0, n=arrKeys.length; i<n; i++){
      console.log(i+1 + " - " + arrKeys[i] + document[arrKeys[i]] + "n");
   }

Edits:

i) what is the difference between these two objects

The simple answer is that [object] indicates a host object that has no internal class. A host object is an object that is not part of the ECMAScript implementation you're working with, but is provided by the host as an extension. The DOM is a common example of host objects, although in most newer implementations DOM objects inherit from the native Object and have internal class names (such as HTMLElement, Window, etc). IE's proprietary ActiveXObject is another example of a host object.

[object] is most commonly seen when alerting DOM objects in Internet Explorer 7 and lower, since they are host objects that have no internal class name.

ii) what type of Object is this

You can get the "type" (internal class) of object using Object.prototype.toString . The specification requires that it always returns a string in the format [object [[Class]]] , where [[Class]] is the internal class name such as Object, Array, Date, RegExp, etc. You can apply this method to any object (including host objects), using

Object.prototype.toString.apply(obj);

Many isArray implementations use this technique to discover whether an object is actually an array (although it's not as robust in IE as it is in other browsers).

iii) what all properties does this object contains and values of each property

In ECMAScript 3, you can iterate over enumerable properties using a for...in loop. Note that most built-in properties are non-enumerable. The same is true of some host objects. In ECMAScript 5, you can get an array containing the names of all non-inherited properties using Object.getOwnPropertyNames(obj) . This array will contain non-enumerable and enumerable property names.

上一篇: 获取JavaScript对象的所有键

下一篇: 如何在JavaScript / jQuery中获取对象的属性？