객체 속성을 반복

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
}

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

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

Dominik의 대답은 완벽합니다. 읽는 것이 더 깨끗하기 때문에 그렇게하는 것을 선호합니다.

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

    // Do stuff...
}

위의 답변은 for 루프 내부에서 객체가 무엇인지 확인한 후에 설명하지 않기 때문에 약간 성가시다. 직접 액세스하지 마십시오! 실제로 OBJ에 적용해야하는 키만 제공됩니다.

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 버전에서도 작동합니다.)

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

예를 들면 다음과 같습니다.

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

에 의해 반복 될 수있다

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

객체의 키 값을 직접 반복하려면 iterator 문자열, 배열, 유형 배열, Map 및 Set에 대한 JavaScipts의 기본 반복자와 마찬가지로을 .

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

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

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를 제외한 다른 모든 브라우저는 생성기 for...of를 통해 반복을 지원합니다.Symbol.iterator

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// it's bigger than 0 which evaluates to true and the bellow 
// code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

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 루프는 반대입니다.

이게 도움이 되길 바란다.

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

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

// a
// 3
// 2

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

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

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

귀하의 for루프는 객체의 모든 속성 반복한다 obj. proptfor 루프의 첫 번째 줄에 정의되어 있습니다. obj객체 의 속성 이름 인 문자열입니다 . 루프의 첫 번째 반복에서 propt"name"이됩니다.

JavaScript의 객체는 속성의 모음이므로 각 명령문마다 반복 될 수 있습니다.

obj핵심 가치 수집으로 생각해야합니다 .

요즘 Symbol.iterator 메소드를 추가하여 표준 JS 객체를 반복 가능한 객체로 변환 할 수 있습니다. 그런 다음 for of루프 를 사용하여 해당 값에 직접 액세스하거나 객체에서 스프레드 연산자를 사용할 수도 있습니다. 멋있는. 우리가 어떻게 만들 수 있는지 보자.

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

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

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

최상위 답변이 정확하지만 대체 사용 사례는 다음과 같습니다. 즉 객체를 반복하고 결국 배열을 만들려는 경우입니다. .map대신에 사용forEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

또한 재귀 적 방법을 추가하십시오.

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

용법:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

for..in 루프가하는 것은 새로운 변수 (var someVariable)를 생성 한 다음 주어진 객체의 각 속성을이 새로운 변수 (someVariable)에 하나씩 저장한다는 것입니다. 따라서 {} 블록을 사용하면 반복 할 수 있습니다. 다음 예를 고려하십시오.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

여기서 나는 각 노드를 반복하고 의미있는 노드 이름을 만들고 있습니다. 당신이 알면 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의 답변에서 영감을 얻었습니다. 그러나이 솔루션은 성능이 우수하고 모호하지 않습니다.

기본적으로 객체의 각 속성을 반복하려고합니다.

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '',
      make: ''
    },
    sense: ''
  },
  of: {
    the: {
      sentence: {
        it: '',
        worked: ''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + ': ' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

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]);
    }
}

당신이 콘솔 로깅 보는 놀랄 수도 0, 1등을 반복 할 때을의 속성을 통해 prop1와 prop2와의prop3_1 . 이러한 객체는 시퀀스이며 시퀀스의 인덱스는 Javascript에서 해당 객체의 속성입니다.

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]);

            }

     }
}

허용 된 답변을 더 세분화하려면 객체를 a var object = Object.create(null)로 인스턴스화하면 object.hasOwnProperty(property)TypeError가 트리거됩니다. 따라서 안전을 위해 다음과 같이 프로토 타입에서 호출해야합니다.

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

이 링크를 확인하면 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin에 도움이됩니다.

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);