[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)
답변
나는 덤프 기능을 좋아합니다.
http://ajaxian.com/archives/javascript-variable-dump-in-coldfusion
답변
다음과 같이 jQuery로 수행 할 수 있습니다.
var objectKeys = $.map(object, function(value, key) {
return key;
});