질문자 :Tanmoy
다음과 같은 JavaScript 객체가 있습니다.
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; 이제 모든 p 요소( p1 , p2 , p3 ...)를 반복하고 키와 값을 가져오고 싶습니다. 어떻게 할 수 있습니까?
필요한 경우 JavaScript 개체를 수정할 수 있습니다. 내 궁극적인 목표는 일부 키 값 쌍을 반복하는 것이며 가능하면 eval 사용을 피하고 싶습니다.
다른 사람들이 보여주는 것처럼 for-in 루프를 사용할 수 있습니다. 그러나 얻은 키가 객체의 실제 속성이고 프로토타입에서 온 것이 아닌지도 확인해야 합니다.
다음은 스니펫입니다.
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (var key in p) { if (p.hasOwnProperty(key)) { console.log(key + " -> " + p[key]); } }For-of with Object.keys() 대안:
var p = { 0: "value1", "b": "value2", key: "value3" }; for (var key of Object.keys(p)) { console.log(key + " -> " + p[key]) } for-in 대신 for-of 를 사용하면 명명된 속성에 대해 정의되지 않은 값을 반환하고 Object.keys() 는 전체 프로토타입 체인 속성 없이 개체 자체 속성만 사용하도록 합니다.
새 Object.entries() 메서드 사용:
참고: 이 방법은 Internet Explorer에서 기본적으로 지원되지 않습니다. 이전 브라우저에 Polyfill 사용을 고려할 수 있습니다.
const p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (let [key, value] of Object.entries(p)) { console.log(`${key}: ${value}`); }Object.keys() 와 Array.prototype.forEach() 결합할 수 있습니다.
var obj = { first: "John", last: "Doe" }; Object.keys(obj).forEach(function(key) { console.log(key, obj[key]); }); ECMAScript 6 for...of 추가합니다.
for (const key of Object.keys(obj)) { console.log(key, obj[key]); } ECMAScript 8은 Object.entries() 를 추가하여 원본 객체의 각 값을 조회하지 않아도 됩니다.
Object.entries(obj).forEach( ([key, value]) => console.log(key, value) ); for...of , destructuring 및 Object.entries 결합할 수 있습니다.
for (const [key, value] of Object.entries(obj)) { console.log(key, value); } Object.keys() 및 Object.entries() 모두 for...in 루프와 동일한 순서로 속성을 반복 하지만 프로토타입 체인은 무시합니다 . 개체 자체의 열거 가능한 속성만 반복됩니다.
for-in 루프 를 사용해야 합니다.
그러나 이런 종류의 루프를 사용할 때는 매우 주의 해야 합니다. 프로토타입 체인을 따라 모든 속성을 루프 하기 때문입니다.
따라서 for-in 루프를 사용할 때 항상 hasOwnProperty 메서드를 사용하여 반복 중인 현재 속성이 실제로 확인 중인 객체의 속성인지 확인합니다.
for (var prop in p) { if (!p.hasOwnProperty(prop)) { //The current property is not a direct property of p continue; } //Do your logic with the property here }객체를 반복하는 대체 방법에 대해 언급하지 않으면 질문이 완전하지 않습니다.
오늘날 잘 알려진 많은 JavaScript 라이브러리는 컬렉션, 즉 arrays , objects 및 array-like objects에 대해 반복하기 위한 고유한 메서드를 제공합니다. 이러한 방법은 사용하기 편리하며 모든 브라우저와 완전히 호환됩니다.
jQuery로 작업하는 경우 jQuery.each() 메서드를 사용할 수 있습니다. 객체와 배열 모두를 원활하게 반복하는 데 사용할 수 있습니다.
$.each(obj, function(key, value) { console.log(key, value); }); Underscore.js에서 _.each() 메서드를 찾을 수 있습니다. 이 메서드는 요소 목록을 반복하여 각각을 차례로 제공된 함수로 생성합니다( 반복 함수의 인수 순서에 주의하세요!):
_.each(obj, function(value, key) { console.log(key, value); }); Lo-Dash 는 객체 속성을 반복하는 여러 방법을 제공합니다. 기본 _.forEach() (또는 별칭 _.each() )는 객체와 배열을 모두 반복하는 데 유용하지만 length 속성이 있는 (!) 객체는 배열처럼 처리되며 이 동작을 피하기 위해 _.forIn() 및 _.forOwn() 메서드(이것도 value 인수가 먼저 옵니다):
_.forIn(obj, function(value, key) { console.log(key, value); }); _.forIn() 은 객체의 소유 및 상속된 열거 가능한 속성에 대해 _.forOwn() 은 객체의 자체 속성에 대해서만 반복합니다(기본적으로 hasOwnProperty 함수에 대해 확인). 간단한 객체와 객체 리터럴의 경우 이러한 방법 중 어느 것이든 잘 작동합니다.
일반적으로 설명된 모든 메서드는 제공된 개체와 동일한 동작을 합니다. for..in 루프를 사용하는 것 외에도 jQuery.each() 와 같은 추상화보다 빠릅니다 . 이러한 메서드는 사용하기가 훨씬 쉽고 코딩이 덜 필요하며 더 나은 오류 처리를 제공합니다.
머리말:
2018년 여기에서 개체의 속성을 반복하는 옵션은 다음과 같습니다(일부 예제는 목록 뒤에 있음).
for-in [ MDN , spec ] — 이름이 문자열인 상속된 속성을 포함 하여 객체의 열거 가능한 속성 이름을 반복하는 루프 구조Object.keys [ MDN , spec ] — 이름이 문자열인 개체 자체 의 열거 가능한 속성 이름의 배열을 제공하는 함수입니다.Object.values [ MDN , spec ] — 객체 자체 의 열거 가능한 속성 값 의 배열을 제공하는 함수입니다.Object.entries [ MDN , spec ] — 객체 고유 의 열거 가능한 속성의 이름과 값 배열을 제공하는 함수입니다(배열의 각 항목은 [name, value] 배열임).Object.getOwnPropertyNames [ MDN , spec ] — 이름이 문자열인 객체 자체 속성(열거 불가능한 속성도 포함)의 이름 배열을 제공하는 함수입니다.Object.getOwnPropertySymbols [ MDN , spec ] — 이름이 Symbol인 객체 자체 속성(열거 불가능한 속성도 포함)의 이름 배열을 제공하는 함수입니다.Reflect.ownKeys [ MDN , spec ] — 이름이 문자열이든 기호이든 관계없이 객체 자체 속성(열거 불가능한 속성도 포함)의 이름 배열을 제공하는 함수입니다.Object.getPrototypeOf [ MDN , spec ]을 사용하고 각 개체에 대해 Object.getOwnPropertyNames , Object.getOwnPropertySymbols 또는 Reflect.ownKeys 프로토타입 체인(이 답변 하단의 예). for-in 제외한 모든 항목을 사용하면 배열에 일종의 루프 구조를 사용할 수 있습니다( for , for-of , forEach 등).
예:
for-in :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const name in o) { const value = o[name]; console.log(`${name} = ${value}`); } Object.keys ( for-of 루프를 사용하지만 모든 루프 구성을 사용할 수 있음) :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const name of Object.keys(o)) { const value = o[name]; console.log(`${name} = ${value}`); } Object.values :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const value of Object.values(o)) { console.log(`${value}`); } Object.entries :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const [name, value] of Object.entries(o)) { console.log(`${name} = ${value}`); } Object.getOwnPropertyNames :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const name of Object.getOwnPropertyNames(o)) { const value = o[name]; console.log(`${name} = ${value}`); } Object.getOwnPropertySymbols :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const name of Object.getOwnPropertySymbols(o)) { const value = o[name]; console.log(`${String(name)} = ${value}`); } Reflect.ownKeys :
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (const name of Reflect.ownKeys(o)) { const value = o[name]; console.log(`${String(name)} = ${value}`); }상속된 열거 불가능한 속성을 포함한 모든 속성:
// A prototype object to inherit from, with a string-named property const p = {answer: 42}; // The object we'll look at, which inherits from `p` const o = Object.create(p); // A string-named property o.question = "Life, the Universe, and Everything"; // A symbol-named property o[Symbol("author")] = "Douglas Adams"; for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) { for (const name of Reflect.ownKeys(current)) { const value = o[name]; console.log(`[${depth}] ${String(name)} = ${String(value)}`); } } .as-console-wrapper { max-height: 100% !important; }Object.keys 의 반복 필드에 새로운 접근 방식이 있습니다.
MDN에서 볼 수 있는 추가 정보
현재 버전의 브라우저(Chrome30, IE10, FF25)에서 더 빠른 솔루션을 선택했습니다.
var keys = Object.keys(p), len = keys.length, i = 0, prop, value; while (i < len) { prop = keys[i]; value = p[prop]; i += 1; }이 접근 방식의 성능을 jsperf.com 에서 다른 구현과 비교할 수 있습니다.
Kangax의 호환성 표에서 볼 수 있는 브라우저 지원
이전 브라우저의 경우 간단 하고 완전한 폴리필이 있습니다.
상향:
perfjs.info 대한 이 질문에서 가장 많이 사용되는 모든 경우에 대한 성능 비교:
다음과 같이 반복할 수 있습니다.
for (var key in p) { alert(p[key]); } key 는 속성 값을 취하지 않으며 인덱스 값일 뿐입니다.
[key, value] 쌍을 원활하게 반복하기 위해 생성기와 반복기의 사용을 포함하는 이 답변을 게시하고 있습니다. Ruby와 같은 다른 언어에서도 가능합니다.
여기 코드가 있습니다.
const MyObject = { 'a': 'Hello', 'b': 'it\'s', 'c': 'me', 'd': 'you', 'e': 'looking', 'f': 'for', [Symbol.iterator]: function*() { for (const i of Object.keys(this)) { yield [i, this[i]]; } } }; for (const [k, v] of MyObject) { console.log(`Here is key ${k} and here is value ${v}`); }반복자 및 생성기를 수행하는 방법에 대한 모든 정보는 개발자 Mozilla 페이지에서 찾을 수 있습니다.
희망이 누군가를 도왔습니다.
편집하다:
ES2017에는 Object.entries [key, value] 쌍을 훨씬 더 쉽게 반복할 수 있습니다. 이제 ts39 단계 정보에 따라 표준의 일부가 될 것으로 알려졌습니다.
지금보다 더 신선해지도록 내 답변을 업데이트해야 할 때라고 생각합니다.
const MyObject = { 'a': 'Hello', 'b': 'it\'s', 'c': 'me', 'd': 'you', 'e': 'looking', 'f': 'for', }; for (const [k, v] of Object.entries(MyObject)) { console.log(`Here is key ${k} and here is value ${v}`); }사용에 대한 자세한 내용은 MDN 페이지에서 확인할 수 있습니다.
오늘 2020.03.06 MacOs High Sierra v10.13.6의 Chrome v80.0, Safari v13.0.5 및 Firefox 73.0.1에서 선택한 솔루션의 테스트를 수행합니다.
for-in (A,B) 기반 솔루션은 크고 작은 개체에 대한 모든 브라우저에서 빠릅니다(또는 가장 빠름).for-of (H) 솔루션은 크고 작은 물체에 대해 크롬에서 빠릅니다.i (J,K)를 기반으로 하는 솔루션은 작은 개체의 경우 모든 브라우저에서 매우 빠릅니다(firefox의 경우 큰 개체의 경우에도 빠르지만 다른 브라우저의 경우 중간 속도). 
에 대한 성능 테스트가 수행되었습니다.
아래 스니펫은 사용된 솔루션을 보여줍니다.
function A(obj,s='') { for (let key in obj) if (obj.hasOwnProperty(key)) s+=key+'->'+obj[key] + ' '; return s; } function B(obj,s='') { for (let key in obj) s+=key+'->'+obj[key] + ' '; return s; } function C(obj,s='') { const map = new Map(Object.entries(obj)); for (let [key,value] of map) s+=key+'->'+value + ' '; return s; } function D(obj,s='') { let o = { ...obj, *[Symbol.iterator]() { for (const i of Object.keys(this)) yield [i, this[i]]; } } for (let [key,value] of o) s+=key+'->'+value + ' '; return s; } function E(obj,s='') { let o = { ...obj, *[Symbol.iterator]() {yield *Object.keys(this)} } for (let key of o) s+=key+'->'+o[key] + ' '; return s; } function F(obj,s='') { for (let key of Object.keys(obj)) s+=key+'->'+obj[key]+' '; return s; } function G(obj,s='') { for (let [key, value] of Object.entries(obj)) s+=key+'->'+value+' '; return s; } function H(obj,s='') { for (let key of Object.getOwnPropertyNames(obj)) s+=key+'->'+obj[key]+' '; return s; } function I(obj,s='') { for (const key of Reflect.ownKeys(obj)) s+=key+'->'+obj[key]+' '; return s; } function J(obj,s='') { let keys = Object.keys(obj); for(let i = 0; i < keys.length; i++){ let key = keys[i]; s+=key+'->'+obj[key]+' '; } return s; } function K(obj,s='') { var keys = Object.keys(obj), len = keys.length, i = 0; while (i < len) { let key = keys[i]; s+=key+'->'+obj[key]+' '; i += 1; } return s; } function L(obj,s='') { Object.keys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' ); return s; } function M(obj,s='') { Object.entries(obj).forEach(([key, value]) => s+=key+'->'+value+' '); return s; } function N(obj,s='') { Object.getOwnPropertyNames(obj).forEach(key => s+=key+'->'+obj[key]+' '); return s; } function O(obj,s='') { Reflect.ownKeys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' ); return s; } // TEST var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; let log = (name,f) => console.log(`${name} ${f(p)}`) log('A',A); log('B',B); log('C',C); log('D',D); log('E',E); log('F',F); log('G',G); log('H',H); log('I',I); log('J',J); log('K',K); log('L',L); log('M',M); log('N',N); log('O',O); This snippet only presents choosen solutions다음은 크롬의 작은 개체에 대한 결과입니다.
for(key in p) { alert( p[key] ); } 참고: 배열에 대해 이 작업을 수행할 수 있지만 length 및 기타 속성에 대해서도 반복합니다.
여기에 있는 모든 답변을 살펴본 후 내 json 객체가 깨끗하기 때문에 hasOwnProperty는 내 사용에 필요하지 않습니다. 추가 자바 스크립트 처리를 추가하는 것은 의미가 없습니다. 이것이 내가 사용하는 전부입니다.
for (var key in p) { console.log(key + ' => ' + p[key]); // key is key // value is p[key] }프로토타입 체인 속성을 건너뛰어야 하는 forEach()가 있는 프로토타입 을 통해:
Object.prototype.each = function(f) { var obj = this Object.keys(obj).forEach( function(key) { f( key , obj[key] ) }); } //print all keys and values var obj = {a:1,b:2,c:3} obj.each(function(key,value) { console.log(key + " " + value) }); // a 1 // b 2 // c 3이 답변의 흥미로운 사람들은 Object.keys() 와 for...of 를 모두 다루었지만 결코 결합하지 않았습니다.
var map = {well:'hello', there:'!'}; for (let key of Object.keys(map)) console.log(key + ':' + map[key]); for...of Object 는 iterator가 아니기 때문에 할 수 없으며 Object.keys() 를 사용하는 for...index 또는 .forEach() ()는 추하고/비효율적입니다.
나는 대부분의 사람들이 for...in .hasOwnProperty() 확인 여부에 관계없이 )을 삼가고 있어 기쁩니다. 그 역시 약간 지저분하기 때문에 위의 답변과 달리 말하려고 합니다...
일반 개체 연결을 반복할 수 있습니다! for...of 의 팬시를 직접 사용하여 Map 처럼 행동합니다.
Chrome 및 FF에서 작동하는 데모(ES6만 가정)
var ordinaryObject = {well:'hello', there:'!'}; for (let pair of ordinaryObject) //key:value console.log(pair[0] + ':' + pair[1]); //or for (let [key, value] of ordinaryObject) console.log(key + ':' + value);아래에 내 심을 포함하는 한:
//makes all objects iterable just like Maps!!! YAY //iterates over Object.keys() (which already ignores prototype chain for us) Object.prototype[Symbol.iterator] = function() { var keys = Object.keys(this)[Symbol.iterator](); var obj = this; var output; return {next:function() { if (!(output = keys.next()).done) output.value = [output.value, obj[output.value]]; return output; }}; };좋은 구문 설탕이없는 실제 Map 개체를 만들 필요가 없습니다.
var trueMap = new Map([['well', 'hello'], ['there', '!']]); for (let pair of trueMap) console.log(pair[0] + ':' + pair[1]);사실, 이 shim을 사용하여 여전히 Map의 다른 기능을 활용하고 싶지만 여전히 깔끔한 객체 표기법을 사용하고 싶다면 객체가 이제 반복 가능하므로 이제 Map을 만들 수 있습니다!
//shown in demo var realMap = new Map({well:'hello', there:'!'}); prototype 을 엉망으로 만드는 것을 좋아하지 않는 사람들을 위해 대신 창에서 함수를 만들고 getObjIterator() 와 같이 호출하십시오.
//no prototype manipulation function getObjIterator(obj) { //create a dummy object instead of adding functionality to all objects var iterator = new Object(); //give it what the shim does but as its own local property iterator[Symbol.iterator] = function() { var keys = Object.keys(obj)[Symbol.iterator](); var output; return {next:function() { if (!(output = keys.next()).done) output.value = [output.value, obj[output.value]]; return output; }}; }; return iterator; }이제 일반 함수로 호출할 수 있으며 다른 것은 영향을 받지 않습니다.
var realMap = new Map(getObjIterator({well:'hello', there:'!'}))또는
for (let pair of getObjIterator(ordinaryObject))미래에 오신 것을 환영합니다.
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (var key in p) { if (p.hasOwnProperty(key)) { console.log(key + " = " + p[key]); } } <p> Output:<br> p1 = values1<br> p2 = values2<br> p3 = values3 </p>Object.keys()를 사용하고 아래와 같이 객체 키를 반복하여 값을 얻을 수도 있습니다.
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Object.keys(p).forEach((key)=> { console.log(key +' -> '+ p[key]); });Object.keys(obj) : 배열
모든 열거 가능한 고유(비상속) 속성의 모든 문자열 값 키를 검색합니다.
따라서 hasOwnProperty로 각 개체 키를 테스트하여 의도한 것과 동일한 키 목록을 제공합니다. 추가 테스트 작업이 필요하지 않으며 Object.keys( obj ).forEach(function( key ){}) 가 더 빠를 것으로 예상됩니다. 그것을 증명하자:
var uniqid = function(){ var text = "", i = 0, possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; for( ; i < 32; i++ ) { text += possible.charAt( Math.floor( Math.random() * possible.length ) ); } return text; }, CYCLES = 100000, obj = {}, p1, p2, p3, key; // Populate object with random properties Array.apply( null, Array( CYCLES ) ).forEach(function(){ obj[ uniqid() ] = new Date() }); // Approach #1 p1 = performance.now(); Object.keys( obj ).forEach(function( key ){ var waste = obj[ key ]; }); p2 = performance.now(); console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds."); // Approach #2 for( key in obj ) { if ( obj.hasOwnProperty( key ) ) { var waste = obj[ key ]; } } p3 = performance.now(); console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds.");내 Firefox에는 다음과 같은 결과가 있습니다.
추신. Chrome에서 더 큰 차이 http://codepen.io/dsheiko/pen/JdrqXa
PS2: ES6(EcmaScript 2015)에서는 반복 가능한 객체를 더 멋지게 반복할 수 있습니다.
let map = new Map().set('a', 1).set('b', 2); for (let pair of map) { console.log(pair); } // OR let map = new Map([ [false, 'no'], [true, 'yes'], ]); map.forEach((value, key) => { console.log(key, value); });종속성이 없는 JavaScript 코드만:
var p = {"p1": "value1", "p2": "value2", "p3": "value3"}; keys = Object.keys(p); // ["p1", "p2", "p3"] for(i = 0; i < keys.length; i++){ console.log(keys[i] + "=" + p[keys[i]]); // p1=value1, p2=value2, p3=value3 }최신 ES 스크립트에서 다음과 같이 할 수 있습니다.
let p = {foo: "bar"}; for (let [key, value] of Object.entries(p)) { console.log(key, value); }다음은 객체를 반복하는 또 다른 방법입니다.
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Object.keys(p).forEach(key => { console.log(key, p[key]) })Object.keys() 에서 for-of 사용
좋다:
let object = { "key1": "value1", "key2": "value2", "key3": "value3" }; for (let key of Object.keys(object)) { console.log(key + " : " + object[key]) }Object.keys() 메서드는 주어진 개체의 고유한 열거 가능한 속성의 배열을 반환합니다. 여기에서 자세히 알아보기
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Object.keys(p).map((key)=> console.log(key + "->" + p[key]))자바 스크립트에서 객체를 반복하는 여러 가지 방법
for...in 루프 사용
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (let key in p){ if(p.hasOwnProperty(key)){ console.log(`${key} : ${p[key]}`) } }for...of 루프 사용
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; for (let key of Object.keys(p)){ console.log(`key: ${key} & value: ${p[key]}`) }Object.keys , Object.values , Object.entries 와 함께 forEach() 사용
var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Object.keys(p).forEach(key=>{ console.log(`${key} : ${p[key]}`); }); Object.values(p).forEach(value=>{ console.log(value); }); Object.entries(p).forEach(([key,value])=>{ console.log(`${key}:${value}`) })모든 객체에 간단한 forEach 함수를 추가하면 모든 객체를 자동으로 반복할 수 있습니다.
Object.defineProperty(Object.prototype, 'forEach', { value: function (func) { for (var key in this) { if (!this.hasOwnProperty(key)) { // skip loop if the property is from prototype continue; } var value = this[key]; func(key, value); } }, enumerable: false });for ... in "-메소드를 좋아하지 않는 사람들을 위해:
Object.defineProperty(Object.prototype, 'forEach', { value: function (func) { var arr = Object.keys(this); for (var i = 0; i < arr.length; i++) { var key = arr[i]; func(key, this[key]); } }, enumerable: false });이제 다음과 같이 간단하게 호출할 수 있습니다.
p.forEach (function(key, value){ console.log ("Key: " + key); console.log ("Value: " + value); });다른 forEach-Methods와 충돌하지 않으려면 고유한 이름으로 이름을 지정할 수 있습니다.
루프는 순수 JavaScript를 사용할 때 꽤 흥미로울 수 있습니다. ECMA6(New 2015 JavaScript 사양)만이 루프를 제어하는 것으로 보입니다. 불행하게도 이 글을 쓰고 있는 지금까지도 브라우저와 인기 있는 통합 개발 환경(IDE)은 여전히 새로운 기능을 완전히 지원하기 위해 고군분투하고 있습니다.
ECMA6 이전에 JavaScript 객체 루프가 어떻게 생겼는지 한 눈에 볼 수 있습니다.
for (var key in object) { if (p.hasOwnProperty(key)) { var value = object[key]; console.log(key); // This is the key; console.log(value); // This is the value; } } 또한,이이 질문의 범위를 벗어하지만 2011 년, ECMAScript를 5.1 추가 알고 forEach 배열에 대한 방법 만 여전히 이전 자세한 정보와 함께 비 반복 가능한 객체를 떠나 혼란 동안 기본적으로 배열을 통해 루프에 새로운 개선 방법을 만든 for 루프 . 그러나 이상한 부분은 이 새로운 forEach 메서드가 모든 종류의 다른 문제로 이어지는 break 를 지원하지 않는다는 것입니다.
기본적으로 2011년에는 많은 인기 라이브러리(jQuery, Underscore 등)가 다시 구현하기로 결정한 것 외에 JavaScript에서 루프를 실행하는 확실한 방법이 없습니다.
2015년 현재 우리는 이제 모든 객체 유형(배열 및 문자열 포함)을 루프(및 중단)할 수 있는 더 나은 기본 방식을 갖게 되었습니다. 다음은 권장 사항이 주류가 될 때 JavaScript의 루프가 어떻게 보이는지 보여줍니다.
for (let [key, value] of Object.entries(object)) { console.log(key); // This is the key; console.log(value); // This is the value; } 대부분의 브라우저는 2016년 6월 18일부터 위의 코드를 지원하지 않습니다. Chrome에서도 작동하려면 다음 특수 플래그를 활성화해야 합니다. chrome://flags/#enable-javascript-harmony
이것이 새로운 표준이 될 때까지 이전 방법을 계속 사용할 수 있지만 인기 있는 라이브러리에 대안이 있거나 이러한 라이브러리를 사용하지 않는 사람들을 위한 경량 대안도 있습니다.
ReactJS에 대해 훌륭하고 일반적일 수 있는 열거 가능한 JavaScript 객체를 반복하는 좋은 방법은 map Object.keys 또는 Object.entries 를 사용하는 것입니다. 아래와 같이:
// assume items: const items = { first: { name: 'phone', price: 400 }, second: { name: 'tv', price: 300 }, third: { name: 'sofa', price: 250 }, }; ReactJS 일부 UI를 루핑하고 표시하려면 다음과 같이 작동합니다.
~~~ <div> {Object.entries(items).map(([key, ({ name, price })]) => ( <div key={key}> <span>name: {name}</span> <span>price: {price}</span> </div> ))} </div> 실제로, 나는 구조화 할당을 두 번 사용합니다. 한 번은 key name 과 price 를 얻기 위해 한 번입니다.
ES6에는 이전에 내부 메서드를 노출하는 잘 알려진 기호가 있습니다. 이 기호를 사용하여 이 객체에 대해 반복자가 작동하는 방식을 정의할 수 있습니다.
var p = { "p1": "value1", "p2": "value2", "p3": "value3", *[Symbol.iterator]() { yield *Object.keys(this); } }; [...p] //["p1", "p2", "p3"]이것은 for...in es6 루프를 사용하는 것과 동일한 결과를 제공합니다.
for(var key in p) { console.log(key); }그러나 현재 es6을 사용하는 기능을 아는 것이 중요합니다!
for ... in 루프 내에서 obj.hasOwnerProperty 확인하는 대신 이 작업을 수행합니다.
var obj = {a : 1}; for(var key in obj){ //obj.hasOwnProperty(key) is not needed. console.log(key); } //then check if anybody has messed the native object. Put this code at the end of the page. for(var key in Object){ throw new Error("Please don't extend the native object"); }ES06 이후로 객체의 값을 배열로 얻을 수 있습니다.
let arrValues = Object.values( yourObject) ;객체 값의 배열을 반환하고 Prototype에서 값을 추출하지 않습니다!!
그리고 열쇠를 위해 (이미 여기에서 나보다 먼저 대답했다)
let arrKeys = Object.keys(yourObject); var p =[{"username":"ordermanageadmin","user_id":"2","resource_id":"Magento_Sales::actions"}, {"username":"ordermanageadmin_1","user_id":"3","resource_id":"Magento_Sales::actions"}] for(var value in p) { for (var key in value) { if (p.hasOwnProperty(key)) { console.log(key + " -> " + p[key]); } } }열거할 수 없는 속성 에 대해서도 반복하려는 경우 Object.getOwnPropertyNames(obj) 를 사용하여 주어진 객체에서 직접 찾은 모든 속성(열거 가능 여부)의 배열을 반환할 수 있습니다.
var obj = Object.create({}, { // non-enumerable property getFoo: { value: function() { return this.foo; }, enumerable: false } }); obj.foo = 1; // enumerable property Object.getOwnPropertyNames(obj).forEach(function (name) { document.write(name + ': ' + obj[name] + '<br/>'); });출처 : http:www.stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object
| JavaScript에서 여러 줄 문자열 만들기 (0) | 2021.10.26 |
|---|---|
| event.preventDefault() 대 false 반환 (0) | 2021.10.26 |
| Git에서 파일의 일부만 커밋 (0) | 2021.10.26 |
| Bash에서 문자열 변수를 연결하는 방법 (0) | 2021.10.26 |
| Java에서 String을 int로 어떻게 변환합니까? (0) | 2021.10.26 |