오브젝트 속성을 반복합니다.

오브젝트 속성을 반복합니다.

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 루프를 사용하는 것보다 더 낫고 읽기 쉽습니다.

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

• 파이어폭스(Gecko): 4 (2.0)
• 크롬: 5
• Internet Explorer: 9

자세한 내용은 Mozilla Developer Network Object.keys()의 레퍼런스를 참조하십시오.

여러분 저희는 2019년인데타자를 칠 시간이 별로 없어서이 멋진 새로운 ECMAScript 2016을 실행해 봅시다.

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

ES 의 최신 실장에서는, 다음을 사용할 수 있습니다.

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 statement(MDN, ECMAScript 사양).

"For every properties in the first in the first of the.objobject, 각 속성을 PROPT 변수에 차례로 할당합니다."

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

if (typeof obj === 'object' && obj !== null) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

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

// Explaining the bellow line
// It checks if obj is neither null nor undefined, which means it's safe to get its keys. 
// Otherwise it will give you a "TypeError: Cannot convert undefined or null to object" if obj is null or undefined.
// NOTE 1: You can use Object.hasOwnProperty() instead of Object.keys(obj).length
// NOTE 2: No need to check if obj is an array because it will work just fine.
// NOTE 3: No need to check if obj is a string because it will not pass the 'if typeof obj is Object' statement.
// NOTE 4: No need to check if Obj is undefined because it will not pass the 'if type obj is Object' statement either.
if (typeof obj === 'object' && obj !== null) {

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

사용 환경이 ES2017을 지원하는 경우 Object.entries:

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

Mozillas Object.entries() 문서에 나타나 있듯이 다음과 같습니다.

Object.entries() 메서드는 특정 오브젝트의 열거 가능한 속성 [key, value]쌍의 배열을 for...in 루프에 의해 제공되는 것과 같은 순서로 반환합니다(for-in 루프가 프로토타입 체인의 속성을 열거하는 차이).

기본적으로 Object.entries에서는 오래된 루프에서 필요한 다음 추가 절차를 생략할 수 있습니다.

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

Dominik의 답변은 완벽합니다.저는 그냥 그렇게 하는 것이 더 좋습니다.읽기 더 쉬우니까요.

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

    // Do stuff...
}

jquery를 사용하면 다음 작업을 수행할 수 있습니다.

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

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 loop은 그 반대입니다.

이게 도움이 됐으면 좋겠어요.

의 ES2015Reflect.ownKeys(obj)이치노

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

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

에 의해 반복될 수 있다

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

는, 「 」를 할 수 .iterator문자열, 어레이, 유형 배열, 맵 및 세트에 대한 JavaScipts의 기본 반복기와 동일합니다.

합니다. 이은 JS로 .Symbol.iterator.

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

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

이를 통해 다음과 같이 for...of loop을 가진 객체의 값을 반복할 수 있습니다.

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

주의:이 답변(2018년 6월)을 작성하는 시점에서는 기타 모든 브라우저, IE, 지원 생성기 및for...of 통해 반복하다Symbol.iterator

위의 답변은 오브젝트임을 확인한 후 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 버전에서도 사용할 수 있습니다.

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

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

// a
// 3
// 2

, 「」를 합니다.for...in ★★★★★★★★★★★★★★★★★」forEachloopsyslog.syslog..syslog.

대상:

for (const key in info) {
    console.log(info[key]);
}

각각:

Object.keys(info).forEach(function(prop) {
    console.log(info[prop]);
    // cities: Array[3], continent: "North America", images: Array[3], name: "Canada"
    // "prop" is the property name
    // "data[prop]" is the property value
});

Lodash를 이용하실 수 있습니다.문서

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

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

현재는 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);

의 ★★★★★★★★★★★★★★★★★.for됩니다.objpropt는 for 루프의 첫 번째 행에 정의되어 있습니다. of of of of of it it that it it it it it 。obj에서는, 「 」를 참조해당 루프의 첫 번째 반복은, 「 」입니다.propt"이름"이 됩니다.

JavaScript 내의 오브젝트는 속성 집합이므로 각 스테이트먼트에 대해 루프할 수 있습니다.

는 ㅇㅇㅇㅇㅇ를 생각해야 .obj주요 값 집합으로 사용합니다.

노드를 실행하는 경우 권장되는 항목:

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

최상위 등급의 답변은 맞지만, 다음은 대체 사용 사례입니다. 즉, 개체를 반복하여 최종적으로 어레이를 생성하려는 경우입니다..mapforEach

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

왜?in loop은 새로운 변수(var someVariable)를 생성하여 지정된 객체의 각 속성을 이 새로운 변수(someVariable)에 하나씩 저장합니다.따라서 블록 {}을(를) 사용하면 반복할 수 있습니다.다음 예를 생각해 보겠습니다.

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

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

console.log(someVariable); // outputs planet

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

            }

     }
}

또한 재귀적 방법 추가:

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

여기에서는 각 노드를 반복하여 의미 있는 노드 이름을 만듭니다.instance Of Array 와 instance Of 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);

를 ' var object = Object.create(null)object.hasOwnProperty(property)Type Error type type 。따라서 안전을 위해 프로토타입에서 다음과 같이 호출해야 합니다.

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

조회유형

propt가 오브젝트 속성을 나타내는 방법을 확인할 수 있습니다.

typeof propt

문자열(속성의 이름)이라는 것을 알게 됩니다.js "built-in" 루프가 작동하는 방식에 따라 오브젝트 내의 모든 속성이 나타납니다.

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

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

에는 Lodash가 있습니다._.mapValues

const obj = {
  a: 2,
  b: 3
}
const res = _.mapValues(obj, v => v * 2)
console.log(res)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

언급URL : https://stackoverflow.com/questions/8312459/iterate-through-object-properties