[javascript] 객체 속성을 반복

JAVASCRIPT / 글쓴이 
var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

스 니펫 확장

변수 propt는 객체의 속성을 어떻게 나타 냅니까? 내장 메서드 나 속성이 아닙니다. 객체의 모든 속성이 나타나는 이유는 무엇입니까?

답변

속성을 반복하려면 다음 추가 hasOwnProperty확인 이 필요합니다 .

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

객체의 프로토 타입에는 기술적으로 객체의 일부인 객체에 대한 추가 속성이 포함되어 있어야합니다. 이러한 추가 속성은 기본 개체 클래스에서 상속되지만 여전히의 속성입니다 obj.

hasOwnProperty 단순히 이것이 기본 클래스에서 상속 된 것이 아니라이 클래스에 특정한 속성인지 확인합니다.

hasOwnProperty객체 자체를 통해 호출 할 수도 있습니다 .

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

그러나 객체에 같은 이름의 관련이없는 필드가 있으면 실패합니다.

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

따라서 Object.prototype대신 호출하는 것이 더 안전한 이유입니다 .

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

답변

JavaScript 1.8.5부터는 Object.keys(obj)객체 자체에 정의 된 속성 배열 (에 대해 true를 반환하는 속성)을 가져 오는 데 사용할 수 있습니다 obj.hasOwnProperty(key).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

이것은 for-in 루프를 사용하는 것보다 낫고 읽기 쉽습니다.

다음 브라우저에서 지원됩니다.

  • Firefox (Gecko) : 4 (2.0)
  • 크롬 : 5
  • 인터넷 익스플로러 : 9

참조 모질라 개발자 네트워크 Object.keys () 의 참조 학습과 정보를.

답변

우리는 2019 년에 우리가 타이핑 할 시간이별로 없습니다 … 그래서 멋진 새롭고 멋진 ECMAScript 2016을 해보십시오.

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

답변

그것은이다 for...in statement( MDN , ECMAScript를 사양 ).

“로 당신은 그것을 읽을 수 있습니다 위한 모든 재산 INobj 객체의 각 속성을 할당 PROPT의 차례로 변수”.

답변

최신 ES 구현에서는 다음을 사용할 수 있습니다 Object.entries.

for (const [key, value] of Object.entries(obj)) { }

또는

Object.entries(obj).forEach(([key, value]) => ...)

값을 반복하려면 Object.values를 사용하십시오.

for (const value of Object.values(obj)) { }

또는

Object.values(obj).forEach(value => ...)

답변

그냥 for...in루프입니다. Mozilla에서 문서를 확인하십시오 .

답변

환경이 ES2017 을 지원하는 경우 Object.entries를 권장합니다 .

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

Mozillas Object.entries () 문서에 표시된대로 :

Object.entries () 메소드에 의해 제공되는 것과 동일한 순서로, 지정된 객체 자체 열거 속성 [키 값] 쌍 배열을 반환 용 루프 (차이가 존재한다는-용의 루프를 열거 프로토 타입 체인의 속성).

기본적으로 Object.entries를 사용하면 이전 for … in 루프에 필요한 다음 추가 단계를 무시할 수 있습니다 .

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}