programing

JavaScript 개체의 속성을 나열하려면 어떻게 해야 합니까?

sourcejob 2022. 12. 3. 00:32
반응형

JavaScript 개체의 속성을 나열하려면 어떻게 해야 합니까?

다음과 같이 오브젝트를 작성한다고 가정합니다.

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

속성 이름 목록을 검색하는 가장 좋은 방법은 무엇입니까? 즉, 다음과 같은 변수 '키'가 있어야 합니다.

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

최신 브라우저(IE9+, FF4+, Chrome5+, Opera12+, Safari5+)에서는 기본 제공 개체를 사용할 수 있습니다. 방식:

var keys = Object.keys(myObject);

위 제품에는 풀 폴리필이 있지만 간략화된 버전은 다음과 같습니다.

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

" "를 바꿉니다.var getKeysObject.prototype.keys를 걸 수 .keys()사용할 수 있습니다.시제품을 연장하는 것은 부작용이 있기 때문에 권장하지 않습니다.

slashnick이 지적한 바와 같이 "for in" 구성을 사용하여 객체의 속성 이름을 반복할 수 있습니다.그러나 개체의 프로토타입 체인에 있는 모든 속성 이름에 대해 반복됩니다.오브젝트 자체의 속성만으로 반복할 경우 Object #hasOwnProperty() 메서드를 사용할 수 있습니다.따라서 다음과 같은 것이 있습니다.

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

Sam Dutton: ECMAScript 제5판 Object.keys()는, 파이어폭스 4, 크롬 6, Safari 5, 및 IE 9 로 서포트되고 있습니다.

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

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

편집: 프로토타입의 유명한 기여자인 kangax와의 최근 논의에 따라 DontEnum 버그에 대한 회피책을 구현했습니다.Object.forIn()함수가 발견되었습니다.

그 오브젝트에 주의해 주세요.키 및 기타 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를 한 모든 몇 .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 alt 텍스트

다음과 같이 jQuery를 사용하여 수행할 수 있습니다.

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

만약 당신이 요소만 얻고 함수는 얻지 않으려 한다면, 이 코드는 당신을 도울 수 있습니다.

this.getKeys = function() {

    var keys = new Array();
    for(var key in this) {

        if( typeof this[key] !== 'function') {

            keys.push(key);
        }
    }
    return keys;
}

이것은 HashMap 구현의 일부이며 키만 필요합니다. "this"는 키를 포함하는 해시맵 객체입니다.

이 기능은 IE8에서도 대부분의 브라우저에서 사용할 수 있으며 어떤 종류의 라이브러리도 필요하지 않습니다.var i가 당신의 열쇠입니다.

var myJSONObject =  {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"}; 
var keys=[];
for (var i in myJSONObject ) { keys.push(i); }
alert(keys);

js 1.8을 지원하는 브라우저에서:

[i for(i in obj)]

Mozilla는 지원되지 않는 브라우저에서 수행하는 방법에 대한 자세한 구현 정보를 제공합니다.

if (!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 (obj) {
      if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object');

      var result = [];

      for (var prop in obj) {
        if (hasOwnProperty.call(obj, prop)) result.push(prop);
      }

      if (hasDontEnumBug) {
        for (var i=0; i < dontEnumsLength; i++) {
          if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
        }
      }
      return result;
    };
  })();
}

네가 원하는 대로 포함시킬 수도 있지만, 아마도 어떤 형태로든extensions.js파일을 스크립트스택의 맨 위에 배치합니다.

Reflect.ownKeys()

var obj = {a: 1, b: 2, c: 3};
Reflect.ownKeys(obj) // ["a", "b", "c"]

Object.keys 및 Object.getOwnPropertyNames열거할 수 없는 속성을 가져올 수 없습니다.헤아릴 수 없는 특성에도 효과가 있습니다.

var obj = {a: 1, b: 2, c: 3};
obj[Symbol()] = 4;
Reflect.ownKeys(obj) // ["a", "b", "c", Symbol()]

ES6 이상(ECMAScript 2015)에서는 다음과 같은 모든 속성을 얻을 수 있습니다.

let keys = Object.keys(myObject);

모든 값을 나열하는 경우:

let values = Object.keys(myObject).map(key => myObject[key]);

인정된 답변을 바탕으로 하고 있습니다.

오브젝트에 호출하는 속성이 있는 경우 .properties()라고 합니다.

var keys = Object.keys(myJSONObject);

for (var j=0; j < keys.length; j++) {
  Object[keys[j]].properties();
}

거의 모든 프로젝트에서 언더스코어.js를 사용하기 때문에 다음 기능을 사용합니다.

var obj = {name: 'gach', hello: 'world'};
console.log(_.keys(obj));

그 결과는 다음과 같습니다.

['name', 'hello']

IE는 네이티브 속성에 대해 (i in obj)를 지원하지 않습니다.여기 내가 찾을 수 있는 모든 소품들의 목록이 있다.

stack overflow가 몇 가지 어리석은 필터링을 하는 것 같습니다.

이 목록은 다음 구글 그룹 게시물 하단에 있습니다.- https://groups.google.com/group/hackvertor/browse_thread/thread/a9ba81ca642a63e0

여기 답이 많네...이건 내 2센트야.

서브오브젝트나 어레이(부모명 포함)를 포함한 모든 JSON Atribute를 인쇄하기 위해 필요한 것이 있었습니다.

이 JSON의 경우:

mylittleJson = {
  "one": "blah",
  "two": {
      "twoone": "",
      "twotwo": "",
      "twothree": ['blah', 'blah']
  },
  "three": ""
}

다음과 같이 인쇄됩니다.

.one
.two.twoone
.two.twotwo
.two.twothree
.three

여기 기능이 있습니다.

function listatts(parent, currentJson){
   var attList = []
   if (typeof currentJson !== 'object' || currentJson == undefined || currentJson.length > 0) {
      return
   }
   for(var attributename in currentJson){
       if (Object.prototype.hasOwnProperty.call(currentJson, attributename)) {
           childAtts = listatts(parent + "." + attributename, currentJson[attributename])
           if (childAtts != undefined && childAtts.length > 0)
               attList = [...attList, ...childAtts]
           else 
               attList.push(parent + "." + attributename)
       }
   }
   return attList
}

도움이 됐으면 좋겠다.

이 솔루션은 사례 및 크로스 브라우저에 적용됩니다.

var getKeys = function(obj) {
    var type = typeof  obj;
    var isObjectType = type === 'function' || type === 'object' || !!obj;

    // 1
    if(isObjectType) {
        return Object.keys(obj);
    }

    // 2
    var keys = [];
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {
            keys.push(i)
        }
    }
    if(keys.length) {
        return keys;
    }

    // 3 - bug for ie9 <
    var hasEnumbug = !{toString: null}.propertyIsEnumerable('toString');
    if(hasEnumbug) {
        var nonEnumerableProps = ['valueOf', 'isPrototypeOf', 'toString',
            'propertyIsEnumerable', 'hasOwnProperty', 'toLocaleString'];

        var nonEnumIdx = nonEnumerableProps.length;

        while (nonEnumIdx--) {
            var prop = nonEnumerableProps[nonEnumIdx];
            if (Object.prototype.hasOwnProperty.call(obj, prop)) {
                keys.push(prop);
            }
        }

    }

    return keys;
};

언급URL : https://stackoverflow.com/questions/208016/how-to-list-the-properties-of-a-javascript-object

반응형