예제 - javascript 향상된 for문




객체 속성을 반복합니다. (17)

 var obj = {
		name: "Simon",
		age: "20",
		clothing: {
			style: "simple",
			hipster: false
		}
	}

	for(var propt in obj){
		alert(propt + ': ' + obj[propt]);
	}

변수 propt 는 객체의 속성을 어떻게 표현합니까? 그것은 내장 된 방법이나 속성이 아닙니다. 그런데 왜 객체의 모든 속성이 생깁니 까?


ES2015의 Reflect.ownKeys(obj) 사용법을 추가하고 iterator를 통해 속성을 반복합니다.

예 :

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };

끝까지 반복 될 수있다.

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

객체의 키 값을 직접 반복하고 싶다면 문자열, 배열, 형식화 된 배열, Map 및 Set에 대한 JavaScipts의 기본 반복자와 마찬가지로 iterator 정의 할 수 있습니다.

JS는 Symbol.iterator 로 정의해야하는 기본 iterator 속성을 통해 반복을 시도합니다.

모든 객체를 반복 할 수 있도록하려면 객체의 프로토 타입으로 추가 할 수 있습니다.

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

이렇게하면 for ... of 루프를 사용하여 객체의 값을 반복 할 수 있습니다. 예를 들면 다음과 같습니다.

for(val of obj) { console.log('Value is:' + val ) }

주의 :이 답변을 작성하는 시점에서 (2018 년 6 월) IE 이외의 다른 모든 브라우저는 Generator를 지원하고 Symbol.iterator 를 통해 반복을 Symbol.iterator


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

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 (도마뱀) : 4 (2.0)
  • 크롬 : 5
  • Internet Explorer : 9

자세한 정보 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 하십시오.


Javascript와는 다른 의도가있을 수 있으므로 위의 답변에 추가하고 싶습니다. JSON 객체와 Javascript 객체는 서로 다른 점이 있습니다. 위에서 제안한 솔루션을 사용하여 JSON 객체의 속성을 반복하고 놀라게 할 수 있습니다.

다음과 같은 JSON 객체가 있다고 가정 해보십시오.

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

'속성'을 반복하는 잘못된 방법 :

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

prop1prop2prop3_1 의 속성을 반복 할 때 콘솔 로깅 0 , 1 등을 보는 것이 놀랄 것입니다. 이러한 객체는 시퀀스이며 시퀀스의 색인은 자바 스크립트에서 객체의 속성입니다.

재귀 적으로 JSON 객체 속성을 반복하는 더 좋은 방법은 먼저 해당 객체가 시퀀스인지 아닌지를 확인하는 것입니다.

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

for ... in 루프는 for 루프와 같기 때문에 객체의 각 속성을 나타냅니다. for ... in 루프에서 propt를 다음과 같이 정의했습니다.

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

for ... in 루프는 객체의 열거 가능한 속성을 반복합니다. 어떤 변수를 정의하거나 for ... in 루프에 넣으면 반복 할 다음 속성으로 갈 때마다 변경됩니다. for ... in 루프의 변수는 키를 반복하지만 값은 키의 값입니다. 예 :

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

변수가 변수의 값과 어떻게 다른지 알 수 있습니다. 대조적으로 for ... of 루프는 그 반대입니다.

이게 도움이 되길 바란다.


jquery를 사용하면 다음과 같이 할 수 있습니다.

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});


다음 버전의 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 => ...)

당신은 Lodash를 사용할 수 있습니다. 문서

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

속성을 반복 처리하려면이 추가 hasOwnProperty 검사가 필요합니다.

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

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

hasOwnProperty 는 이것이 hasOwnProperty 클래스에 고유 한 속성인지 아닌지를 단순히 확인하고, 기본 클래스에서 상속받은 것은 아닙니다.


여기서는 각 노드를 반복하고 의미있는 노드 이름을 만듭니다. 예를 들어, instanceOf Array와 instanceOf Object가 거의 동일합니다 (내 응용 프로그램에서는 다른 논리를 제공합니다)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

참고 - 나는 Ondrej Svejdar의 대답에 영감을 받았다. 그러나이 솔루션은 성능이 우수하고 모호하지 않습니다.


우리는 2017 년에있는 소녀들과 우리는 타이핑을위한 많은 시간을 가지고 있지 않습니다 ... 그래서이 멋진 새로운 멋진 ECMAScript 2016을 할 수 있습니다 :

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

위의 답변은 객체를 보장 한 후 for 루프 내부에서 수행하는 작업을 설명하지 않기 때문에 약간 짜증나게됩니다. 직접 액세스하지 마십시오! 실제로 OBJ에 신청해야하는 KEY 만 배달됩니다.

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

이것은 모두 ECMA5 안전합니다. Rhino와 같은 절름발이 JS 버전에서도 작동합니다.


환경이 ES2017 을 지원한다면 Object.entries를 추천합니다.

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

Mozillas Object.entries () 문서에 표시된 것처럼

Object.entries () 메서드는 for ... in 루프에 의해 제공된 순서와 동일한 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다 (for-in 루프가 열거한다는 차이점 프로토 타입 체인의 속성도 마찬가지입니다.)

기본적으로 Object.entries를 사용하면 이전 for for ... 루프 에서 다음과 같은 추가 단계를 수행하지 않아도됩니다.

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

for...in statement ( MDN , ECMAScript 사양 )입니다.

" obj 객체의 모든 속성에 대해 차례대로 각 속성을 PROPT 변수에 할당하십시오"라고 읽을 수 있습니다.


노드를 실행하는 경우 다음을 권합니다.

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

Dominik's 대답은 완벽합니다. 나는 그 방법을 선호합니다. 읽는 것이 더 깨끗합니다.

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2




object