[javascript] JavaScript 객체의 속성을 나열하는 방법은 무엇입니까?

따라서 객체를 생성한다고 가정 해보십시오.

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

속성 이름 목록을 검색하는 가장 좋은 방법은 무엇입니까? 즉, 다음과 같은 변수 ‘키’로 끝나고 싶습니다.

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



답변

최신 브라우저 (IE9 +, FF4 +, Chrome5 +, Opera12 +, Safari5 +)에서는 내장 Object.keys 메소드를 사용할 수 있습니다 .

var keys = Object.keys(myObject);

위는 완전한 폴리 필을 가지고 있지만 단순화 된 버전은 다음과 같습니다.

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

또는로 교체 var getKeys하여 객체 Object.prototype.keys를 호출 할 수 있습니다 .keys(). 프로토 타입을 확장하면 부작용이 생길 수 있으므로 권장하지 않습니다.


답변

으로 slashnick는 지적, 당신은 그 속성 이름에 대한 개체를 반복하는 구조 “에 대한”를 사용할 수 있습니다. 그러나 객체의 프로토 타입 체인에서 모든 속성 이름을 반복하게됩니다. 객체 자체의 속성에 대해서만 반복 하려면 Object # hasOwnProperty () 메서드를 사용할 수 있습니다 . 따라서 다음과 같은 것이 있습니다.

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


답변

Sam Dutton이 대답하자마자이 목적을위한 새로운 방법이 ECMAScript 5th Edition에 도입되었습니다. Firefox 4 , Chrome 6, Safari 5 및 IE 9Object.keys() 에서 원하는 작업을 수행합니다 .

메소드를 지원하지 않는 브라우저에서 메소드를 매우 쉽게 구현할 수도 있습니다. 그러나 일부 구현은 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 ()에 대한 검사가 포함되어 있지 않으며 프로토 타입 체인을 통해 상속 된 속성을 반환합니다. 또한 프로토 타입 체인에서 열거 할 수없는 속성으로 인해 같은 이름을 가진 로컬로 선언 된 속성이 DontEnum 속성을 상속하는 Internet Explorer의 유명한 DontEnum 버그를 설명하지 않습니다.

Object.keys () 를 구현 하면 보다 강력한 솔루션을 얻을 수 있습니다.

편집 : 프로토 타입에 잘 알려진 kangax 와의 최근 토론에 이어 , 여기 에있는 그의 Object.forIn()기능 코드를 기반으로 DontEnum 버그에 대한 해결 방법을 구현했습니다 .


답변

Object.keys 및 기타 ECMAScript 5 방법은 Firefox 4, Chrome 6, Safari 5, IE 9 이상에서 지원됩니다.

예를 들면 다음과 같습니다.

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/


답변

Object.getOwnPropertyNames(obj)

이 함수는로 표시되는 속성 외에 열거 할 수없는 속성도 표시합니다 Object.keys(obj).

JS에서 모든 속성에는 boolean을 포함하여 몇 가지 속성이 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)


답변


답변

다음과 같이 jQuery로 수행 할 수 있습니다.

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