객체 속성을 통해 반복

질문자 :Rafay

 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

user2417527

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

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

• 파이어폭스(도마뱀붙이): 4(2.0)
• 크롬: 5
• 인터넷 익스플로러: 9

자세한 내용 은 Mozilla Developer Network Object.keys() 의 참조 를 참조하세요.

Danny R

우리는 2019년에 살고 있고 타이핑할 시간이 많지 않습니다... 자, 이 멋진 새로운 멋진 ECMAScript 2016을 해보겠습니다.

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

Frank Roth

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

"는 모든 속성과 같이 읽을 수 obj 개체를 차례로 PROPT 변수에 각 속성을 지정합니다."

Marc B

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 => ...)

user663031

그것은 단지 for...in 루프입니다. Mozilla에서 설명서를 확인하십시오.

Matt Ball

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

Fouad Boukredine

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

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

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

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

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

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

JSON C11

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

 for (var property in obj) { if (!obj.hasOwnProperty(property)) continue; // Do stuff... }

Cyril N.

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

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

Rob Sedgwick

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

이게 도움이 되길 바란다.

Vappor Washmade

위의 답변은 객체인지 확인한 후 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 버전에서도 작동합니다.)

dylanh724

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

예를 들어:

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

에 의해 반복될 수 있습니다.

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

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

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를 제외한 다른 모든 브라우저 Symbol.iterator 를 통한 반복 for...of

Dimitar Nikovski

let obj = {"a": 3, "b": 2, "6": "a"} Object.keys(obj).forEach((item) => {console.log("item", obj[item])}) // a // 3 // 2

Philll_t

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

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

viktarpunko

for...in 및 forEach 루프를 사용하여 객체의 중첩 속성에 액세스할 수 있습니다.

...에서:

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

Sunny

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

Fellow Stranger

요즘에는 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);

Redu

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

arb

JavaScript의 개체는 속성 모음이므로 for 각 문에서 반복될 수 있습니다.

obj 를 키 값 컬렉션으로 생각해야 합니다.

user920041

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

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

Justin

최고 등급의 대답은 정확하지만 여기에 대체 사용 사례가 있습니다. 즉, 객체를 반복하고 결국 배열을 생성하려는 경우입니다. forEach 대신 .map

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

iRohitBhatia

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

prop1 및 prop2 및 prop3_1 의 속성을 반복할 때 0 , 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]); } } }

Jadiel de Armas

또한 재귀적 방법을 추가합니다.

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

Ondrej Svejdar

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

Raman Sohi

여기에서 각 노드를 반복하고 의미 있는 노드 이름을 만듭니다. 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의 답변에서 영감을 받았습니다. 그러나 이 솔루션은 성능이 더 좋고 모호하지 않습니다.

Faiz Mohamed Haneef

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

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

HovyTech

허용된 답변을 더 구체화하려면 var object = Object.create(null) 로 object.hasOwnProperty(property) 가 TypeError를 트리거한다는 점에 주목할 가치가 있습니다. 따라서 안전을 위해 프로토타입에서 다음과 같이 호출해야 합니다.

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

Konrad Kiss

유형 확인

propt가 객체 속성을 나타내는 방법을 확인할 수 있습니다.

 typeof propt

그것이 단지 문자열(속성의 이름)이라는 것을 발견하기 위해. for-in js "build-in" 루프가 작동하는 방식으로 인해 개체의 모든 속성이 나타납니다.

 var obj = { name: "Simon", age: "20", clothing: { style: "simple", hipster: false } } for(var propt in obj){ console.log(typeof propt, propt + ': ' + obj[propt]); }

Kamil Kiełczewski

속성 값을 매핑하기 위해 반복하려는 경우 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>

danday74

출처 : http:www.stackoverflow.com/questions/8312459/iterate-through-object-properties