JavaScript / jQuery에서 객체의 속성을 얻는 방법은 무엇입니까?

97

JavaScript / jQuery에서 alert객체가 있으면 [object]또는 [object Object]

알 수있는 방법이 있습니까?

  1. 이 두 물체의 차이점은 무엇입니까

  2. 이것은 어떤 유형의 객체입니까

  3. 이 개체에 포함 된 모든 속성과 각 속성의 값

?

javascript  jquery 
— Saiful
소스
자바 스크립트 개체를 어떻게 인쇄 할 수 있습니까? stackoverflow.com/questions/957537/…
— zod 2011
유용한 문서도 찾았
— Saiful

답변:

141

JavaScript의 기본 for in루프를 호출하여 객체의 키와 값을 조회 할 수 있습니다 .

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

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

또는 jQuery의 .each()방법 사용 :

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

여섯 개 기본 유형을 제외하고 , 모든 ECMA-/ 자바 스크립트 객체입니다. 어레이; 기능; 모든 것이 객체입니다. 이러한 프리미티브의 대부분도 실제로는 제한된 메서드 선택을 가진 객체이기도합니다. 필요한 경우 후드 아래의 물체로 주조됩니다. 기본 클래스 이름을 알기 위해 다음 Object.prototype.toString과 같이 객체 에서 메서드를 호출 할 수 있습니다 .

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

위의 출력이 [object Array].

이 몇 가지 다른 클래스 이름은 같은 [object Object], [object Function], [object Date], [object String], [object Number], [object Array], 및[object Regex] .

— jAndy
소스
31
"모든 것이 하나의 대상"이라는 것은 사실이 아니며 언어의 큰 오해 중 하나입니다. 기본 유형이라고 부르는 것은 숫자, 문자열, 부울, 정의되지 않음 및 널입니다. 그것들은 종종 내장 된 생성자로 생성 된 객체 인 원시 래퍼와 혼동 될 수 있습니다. 예를 들어, typeof new String("foo");"객체"를 typeof "foo";생성하고, "문자열" 을 생성 하는 동안 래핑 된 원시 값 입니다. 참조
— Christian C. Salvadó 2010
저는 CMS에 동의하며 기본 문자열과 String 개체의 차이를 발견하면 특히 코드를 최소화하려고 할 때 자신의 능력을 깨닫게 될 것입니다.
— vol7ron 2010
7
@CMS 그것도 사실이 아닙니다. "기본"문자열 은 그 자체로 객체입니다. 다른 방법을 선택할 수 있습니다. 숫자와 부울도 마찬가지입니다. 그러나 Undefined 및 Null은 메서드가없는 기본 요소입니다.
— Izkata
@Izkata 사실이 아닙니다. var str = 'primitive'; str.foo = 'bar'; /*wouldn't work*/반면에 var oStr = new String('string object'); oStr.foo = 'bar'; /*works*/ 그것을 추상화하고 모든 객체를 호출하려면 원시 객체를 원시 객체로 생각할 수는 있지만 진정한 JavaScript 객체의 수퍼 클래스와 동일하지는 않습니다.
— vol7ron
간단하게 사용하는 console.log개체를 검사
— 존 스미스
13

개체 속성 / 값 목록을 가져 오려면 :

  1. Firefox-Firebug :

    console.dir(<object>);

  2. Slashnick 에서 빌린 객체 키를 얻기위한 표준 JS :

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

편집 :

  1. <object> 위의 개체에 대한 변수 참조로 대체됩니다.
  2. console.log() 콘솔에서 사용할 수 있습니다. 이것이 무엇인지 확실하지 않은 경우 alert()
— Vol7ron
소스
7

i)이 두 개체의 차이점은 무엇입니까

간단한 대답은 [object]내부 클래스가없는 호스트 개체를 나타내는 것입니다. 호스트 개체는 작업중인 ECMAScript 구현의 일부가 아니지만 호스트에서 확장으로 제공하는 개체입니다. 대부분의 최신 구현에서 DOM 개체는 기본 개체에서 상속되고 내부 클래스 이름 (예 : HTMLElement , Window 등)을 갖지만 DOM은 호스트 개체의 일반적인 예입니다 . IE의 독점 ActiveXObject는 호스트 개체의 또 다른 예입니다.

[object] 내부 클래스 이름이없는 호스트 개체이기 때문에 Internet Explorer 7 이하에서 DOM 개체를 경고 할 때 가장 일반적으로 표시됩니다.

ii) 이것은 어떤 유형의 객체입니까

를 사용하여 객체의 "유형"(내부 클래스)을 가져올 수 있습니다 Object.prototype.toString. 사양에서는 항상 형식의 문자열을 반환해야합니다 [object [[Class]]]. 여기서는 Object , Array , Date , RegExp[[Class]] 등과 같은 내부 클래스 이름입니다 .이 메서드는 다음을 사용하여 모든 개체 (호스트 개체 포함)에 적용 할 수 있습니다.

Object.prototype.toString.apply(obj);

많은 isArray구현에서이 기술을 사용하여 객체가 실제로 배열인지 여부를 확인합니다 ( IE에서는 다른 브라우저만큼 강력 하지는 않지만 ).


iii)이 개체가 포함하는 모든 속성과 각 속성의 값

ECMAScript 3에서는 for...in루프를 사용하여 열거 가능한 속성을 반복 할 수 있습니다 . 대부분의 기본 제공 속성은 열거 할 수 없습니다. 일부 호스트 개체도 마찬가지입니다. ECMAScript 5에서는를 사용하여 상속되지 않은 모든 속성의 이름이 포함 된 배열을 가져올 수 있습니다 Object.getOwnPropertyNames(obj). 이 배열에는 열거 할 수없고 열거 할 수없는 속성 이름이 포함됩니다.

— 앤디 E
소스
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));
— 할릴 외즈 구르
소스
2

FireBug 받기Mozilla Firefox 용 를 .

사용하다 console.log(obj);

— Z. 즐라 테프
소스
1
나는 당신의 방화범이 내 것과 어떻게 다른지 보지 못했지만 나는 로그 대신 dir을 사용하여 객체를 나열합니다
— vol7ron
console.log로그의 개체를 클릭하여 "dir"을 얻을 수 있습니다.
— gnarf
1

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

당신은 이것을 좋아할 것입니다.

— 폴 아이리쉬
소스
0

결정된 소품의 첫 번째 인텐스에 대한 개체 스캔 :

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));
— J 예수 로에 라 V
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.