Как получить свойства объекта в JavaScript/jQuery?

В JavaScript/jQuery, если я alert некоторый объект, я получаю либо [object], либо [object Object]

Есть ли способ узнать:

  • какая разница между этими двумя объектами

  • какой тип объекта это

  • что все свойства содержит этот объект и значения каждого свойства

?

Ответ 1

Вы можете искать ключи объектов + значения, вызывая собственный цикл javascripts for in:

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

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

или использовать метод jQuerys .each():

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

За исключением шести примитивных типов, все в ECMA-/Javascript является объектом. Массивы, функции, все - объект. Большинство из этих примитивов, на самом деле также являются объектами с ограниченным выбором методов соответственно, они забрасываются в объекты, когда это требуется под капотом. Чтобы узнать base classname, вы можете вызвать метод Object.prototype.toString для объекта, например

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

выводит [object Array].

Существует несколько других таких классов: [object Object], [object Function], [object Date], [object String], [object Number], [object Array], [object Regex]

Ответ 2

Чтобы получить список свойств/значений объекта:

  • В Firefox - Firebug:

    console.dir(<object>);
    
  • Стандартный JS для получения ключей объектов, заимствованных из Slashnick:

       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");
       }
    

редактирует:

  • <object> в приведенном выше случае нужно заменить ссылкой на объект.
  • console.log() должен использоваться в консоли, если вы не знаете, что это такое, вы можете заменить его на alert()

Ответ 3

i) какая разница между этими двумя объектами

Простой ответ: [object] указывает объект-хост, у которого нет внутреннего класса. Объект-хост - это объект, который не является частью реализации ECMAScript, с которой вы работаете, но предоставляется хостом как расширение. DOM является распространенным примером объектов хоста, хотя в большинстве новых реализаций объекты DOM наследуются от собственного объекта и имеют внутренние имена классов (такие как HTMLElement, Window и т.д.). Проприетарный ActiveXObject IE - еще один пример объекта-хоста.

[object] чаще всего встречается при предупреждении объектов DOM в Internet Explorer 7 и ниже, поскольку они являются объектами хоста, которые не имеют внутреннего имени класса.

ii) какой тип объекта это

Вы можете получить "тип" (внутренний класс) объекта с помощью Object.prototype.toString. Спецификация требует, чтобы она всегда возвращала строку в формате [object [[Class]]], где [[Class]] - это внутреннее имя класса, такое как Object, Array, Date, RegExp и т.д. Вы можете применить этот метод к любому объекту (включая объекты хоста), используя

Object.prototype.toString.apply(obj);

Многие реализации isArray используют эту технику, чтобы определить, действительно ли объект является массивом (хотя он не столь прочен в IE, как в других браузерах).


iii) все свойства, которые содержит этот объект, и значения каждого свойства

В ECMAScript 3 вы можете перебирать перечислимые свойства с помощью цикла for...in. Обратите внимание, что большинство встроенных свойств не перечислимы. То же самое относится к некоторым объектам хоста. В ECMAScript 5 вы можете получить массив, содержащий имена всех ненаследуемых свойств, используя Object.getOwnPropertyNames(obj). Этот массив будет содержать неперечислимые и перечислимые имена свойств.

Ответ 4

Надеюсь, это не считается спамом. Я смиренно закончил писать функцию после бесконечных сессий отладки: http://github.com/halilim/Javascript-Simple-Object-Inspect

function simpleObjInspect(oObj, key, tabLvl)
{
    key = key || "";
    tabLvl = tabLvl || 1;
    var tabs = "";
    for(var i = 1; i < tabLvl; i++){
        tabs += "\t";
    }
    var keyTypeStr = " (" + typeof key + ")";
    if (tabLvl == 1) {
        keyTypeStr = "(self)";
    }
    var s = tabs + key + keyTypeStr + " : ";
    if (typeof oObj == "object" && oObj !== null) {
        s += typeof oObj + "\n";
        for (var k in oObj) {
            if (oObj.hasOwnProperty(k)) {
                s += simpleObjInspect(oObj[k], k, tabLvl + 1);
            }
        }
    } else {
        s += "" + oObj + " (" + typeof oObj + ") \n";
    }
    return s;
}

Использование

alert(simpleObjInspect(anyObject));

или

console.log(simpleObjInspect(anyObject));

Ответ 5

Получить FireBug для Mozilla Firefox.

использовать console.log(obj);

Ответ 6

Spotlight.js - отличная библиотека для итерации над объектом окна и другими объектами хоста, которые ищут определенные вещи.

// find all "length" properties
spotlight.byName('length');

// or find all "map" properties on jQuery
spotlight.byName('map', { 'object': jQuery, 'path': '$' });

// or all properties with `RegExp` values
spotlight.byKind('RegExp');

// or all properties containing "oo" in their name
spotlight.custom(function(value, key) { return key.indexOf('oo') > -1; });

Вам понравится это.

Ответ 7

Сканирующий объект для первого запуска определенной опоры:

var obj = {a:'Saludos',
            b:{b_1:{b_1_1:'Como estas?',b_1_2:'Un gusto conocerte'}},
           d:'Hasta luego'
            }
function scan (element,list){
    var res;
    if (typeof(list) != 'undefined'){
        if (typeof(list) == 'object'){
            for(key in list){
               if (typeof(res) == 'undefined'){
                res = (key == element)?list[key]:scan(element,list[key]);
               }
            });
        }
    }
    return res;
}
console.log(scan('a',obj));