이름을 모르는 경우 자바 스크립트 개체의 속성에 어떻게 액세스합니까?


124

다음과 같은 javascript 객체가 있다고 가정합니다.

var data = { foo: 'bar', baz: 'quux' };

속성 이름으로 속성에 액세스 할 수 있습니다.

var foo = data.foo;
var baz = data["baz"];

그러나 속성의 이름을 모르는 경우 이러한 값을 얻을 수 있습니까? 이러한 속성의 순서가 지정되지 않은 특성으로 인해 구분이 불가능합니까?

제 경우에는 함수가 일련의 이름-값 쌍을 받아 들여야하지만 속성의 이름이 변경 될 수있는 상황을 구체적으로 생각하고 있습니다.

지금까지이 작업을 수행하는 방법에 대한 내 생각은 데이터와 함께 속성의 이름을 함수에 전달하는 것이지만 이것은 해킹처럼 느껴집니다. 가능하면 내성으로 이것을하는 것을 선호합니다.

답변:


144

다음과 같이 키를 반복 할 수 있습니다.

for (var key in data) {
  console.log(key);
}

"이름"과 "값"을 기록합니다.

더 복잡한 객체 유형이있는 경우 (원래 질문에서와 같이 평범한 해시와 유사한 객체가 아니라) 객체의 프로토 타입 에있는 키가 아니라 객체 자체에 속한 키만 반복하고 싶을 것입니다 .

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    console.log(key);
  }
}

언급했듯이 키는 특정 순서로 보장되지 않습니다. 이것이 다음과 어떻게 다른지 확인하십시오.

for each (var value in data) {
  console.log(value);
}

이 예제는 값을 반복하므로 Property Name0. NB :for each 구문은 대부분 Firefox에서만 지원되지만 다른 브라우저에서는 지원되지 않습니다.

대상 브라우저가 ES5를 지원하거나 사이트에 es5-shim.js(권장)이 포함 된 경우 다음을 사용할 수도 있습니다 Object.keys.

var data = { Name: 'Property Name', Value: '0' };
console.log(Object.keys(data)); // => ["Name", "Value"]

및 루프 Array.prototype.forEach:

Object.keys(data).forEach(function (key) {
  console.log(data[key]);
});
// => Logs "Property Name", 0

마지막 하나를 만들어서 실제로 도망 쳤나요? 잘 했어 ... =)
nickl-

이것은 Firefox ( docs )에 존재 하지만 보편적이지 않다는 점을 지적합니다. 나는 이것을 언급하기 위해 답변을 업데이트 할 것입니다.
Ron DeVera 2012 년

28
BTW 경고는 디버그 것들 나쁜 방법은 CONSOLE.LOG, 시도이다
StackOverflowed

이것은 질문을 받았을 때 가장 좋은 대답 이었지만 이후의 JS 버전이 더 나은 도구를 제공했기 때문에 확인 표시를 제거하고 있습니다.
Adam Lassek

65

이전 버전의 JavaScript (<ES5)에는 for..in루프를 사용해야 합니다.

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    // do something with key
  }
}

ES5는 Object.keysArray # forEach 를 도입 하여이를 좀 더 쉽게 만듭니다.

var data = { foo: 'bar', baz: 'quux' };

Object.keys(data); // ['foo', 'baz']
Object.keys(data).map(function(key){ return data[key] }) // ['bar', 'quux']
Object.keys(data).forEach(function (key) {
  // do something with data[key]
});

ES2017Object.valuesObject.entries.

Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]

1
이제 이것은 실제로 @Adam Lassek의 질문에 대한 답입니다.
nickl-

'이름'과 '값'을 모두 개체 키로 사용하는 것은 오해의 소지가 있습니다. 이 함수는 값이 아닌 목록의 키만 반환합니다. {name1 : 'value1', name2 : 'value2'}는 초보자의 혼동을 방지합니다. Object.keys (데이터); // [ 'name1', 'name2']
James Nicholson

2
@JamesNicholson 동의합니다. 덜 혼란스럽게 편집되었습니다.
Adam Lassek


4

모든 공유 프로토 타입 메서드 및 속성없이 개체 인스턴스의 특정 속성 을 검사하는 경우가 많습니다 .

 Obj.prototype.toString= function(){
        var A= [];
        for(var p in this){
            if(this.hasOwnProperty(p)){
                A[A.length]= p+'='+this[p];
            }
        }

    return A.join(', ');
}

3
function getDetailedObject(inputObject) {
    var detailedObject = {}, properties;

    do {
        properties = Object.getOwnPropertyNames( inputObject );
        for (var o in properties) {
            detailedObject[properties[o]] = inputObject[properties[o]];
        }
    } while ( inputObject = Object.getPrototypeOf( inputObject ) );

    return detailedObject;
}

이렇게하면 새 개체에서 모든 속성과 해당 값 (상속 또는 소유, 열거 가능 여부)을 가져옵니다. 원래 개체는 건드리지 않습니다. 이제 새 개체는

var obj = { 'b': '4' }; //example object
var detailedObject = getDetailedObject(obj);
for(var o in detailedObject) {
    console.log('key: ' + o + '   value: ' + detailedObject[o]);
}

1
var obj = {
 a: [1, 3, 4],
 b: 2,
 c: ['hi', 'there']
 }
for(let r in obj){  //for in loop iterates all properties in an object
 console.log(r) ;  //print all properties in sequence
 console.log(obj[r]);//print all properties values
}

이 답변은 OP에 필요한 것을 제공하지만 수행하는 작업과 OP가 왜 그것을 사용 해야하는지에 대한 약간의 설명을 제공하며 .hasOwnProperty()for in을 사용하여 객체를 반복 할 때 잊지 마십시오 .
Muhammad Omer Aslam

감사합니다. .hasOwnProperty ()가 객체를 반복하지만 조건을 확인하기 위해 반복한다는 데 동의합니다. 그러나이를 사용하여 객체의 모든 속성을 인쇄 할 수는 없습니다. 틀렸다면 정정하십시오.
Mayank_VK

hasOwnProperty()메서드는 boolean객체에 지정된 속성 이 고유 한 속성 (상속하는 것과 반대)으로 있는지 여부를 나타내는를 반환합니다 . 이 참조
무하마드 오메르 빈 라덴

1

Object.keys ()를 사용할 수 있습니다. . "이는 일반 루프에서 얻은 것과 동일한 순서로 주어진 객체의 고유 한 열거 가능한 속성 이름 배열을 반환합니다."

다음 위치에 모든 개체를 사용할 수 있습니다 stats.

var stats = {
  a: 3,
  b: 6,
  d: 7,
  erijgolekngo: 35
}
/*  this is the answer here  */
for (var key in Object.keys(stats)) {
  var t = Object.keys(stats)[key];
  console.log(t + " value =: " + stats[t]);
}


더 많은 설명을 추가해 주시겠습니까?
Keith Pinson

Object.keys( stats )[key]의미가 없으며 항상 undefined.
Adam Lassek

-2
var attr, object_information='';

for(attr in object){

      //Get names and values of propertys with style (name : value)
      object_information += attr + ' : ' + object[attr] + '\n'; 

   }


alert(object_information); //Show all Object

이것은 허용되는 답변에 아무것도 추가하지 않으며 가능한 가장 유용한 방법으로 정보를 제공합니다. 그리고 상속 된 속성을 고려하지 않습니다.
Adam Lassek 2013
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.