JavaScript 개체를 루프하거나 열거하려면 어떻게 해야 합니까?
다음과 같은 JavaScript 개체가 있습니다.
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
모든 를 할 수 요?p의 요소예:p1,p2,p3을 얻을 수 ?...) 키와 값을 수 있습니까?
루프는 다른 사람의 그림과 같이 사용할 수 있습니다.단, 취득한 키가 오브젝트의 실제 속성이며 프로토타입에서 나온 것이 아님을 확인해야 합니다.
다음은 스니펫입니다.
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (var key in p) {
if (p.hasOwnProperty(key)) {
console.log(key + " -> " + p[key]);
}
}Object.keys()를 대신 사용하는 경우:
var p = {
0: "value1",
"b": "value2",
key: "value3"
};
for (var key of Object.keys(p)) {
console.log(key + " -> " + p[key])
}대신 을 사용하는 것에 주의해 주세요.사용하지 않으면 이름 있는 속성에서 정의되지 않은 상태로 반환되며, 전체 프로토타입 체인 속성 없이 오브젝트 자신의 속성만 사용할 수 있습니다.
새로운 방법 사용:
메모: 이 방법은 Internet Explorer에서 기본적으로 지원되지 않습니다.오래된 브라우저에서는 Polyfill 사용을 고려할 수 있습니다.
const p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (let [key, value] of Object.entries(p)) {
console.log(`${key}: ${value}`);
}
ECMAScript 5에서와 를 조합할 수 있습니다.
var obj = { first: "John", last: "Doe" };
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});
ECMAScript 6은 다음을 추가합니다.
for (const key of Object.keys(obj)) {
console.log(key, obj[key]);
}
ECMAScript 8에서는 원래 오브젝트의 각 값을 검색할 필요가 없어집니다.
Object.entries(obj).forEach(
([key, value]) => console.log(key, value)
);
할 수 .for...of 및 , , " " "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 라이브러리는 어레이, 오브젝트 및 어레이와 같은 오브젝트 등의 컬렉션에 대해 반복하기 위한 고유한 방법을 제공합니다.이러한 방법은 사용이 편리하고 모든 브라우저와 완전히 호환됩니다.
jQuery를 사용하는 경우 메서드를 사용할 수 있습니다.오브젝트와 어레이 모두에서 심리스하게 반복할 수 있습니다.
$.each(obj, function(key, value) { console.log(key, value); });Underscore.js에서는 method를 찾을 수 있습니다.이 method는 요소 목록을 반복하여 지정된 함수를 차례로 제공합니다(반복 함수의 인수 순서에 유의하십시오).
_.each(obj, function(value, key) { console.log(key, value); });Lo-Dash는 객체 속성을 반복하는 몇 가지 방법을 제공합니다.기본(또는 별칭)
_.each()및 , (!) 에는 「」가 붙어 있습니다.length속성은 배열과 같이 취급되며, 이 동작을 피하기 위해 사용 및 메서드(이들 또한value인수가 우선입니다._.forIn(obj, function(value, key) { console.log(key, value); });_.forIn()는 개체의 자체 및 상속된 열거형 속성을 반복하는 반면,_.forOwn()오브젝트 자신의 속성에만 반복한다(반복 체크).hasOwnProperty한 는, .단순한 객체 및 객체 리터럴의 경우 다음 방법 중 하나가 올바르게 작동합니다.
일반적으로 설명된 모든 메서드는 제공된 개체와 동일한 동작을 가집니다.원어민 for..in루프는 보통 추상화보다 빠릅니다.jQuery.each()이러한 방법은 상당히 사용하기 쉽고 코딩이 덜 필요하며 오류 처리가 향상됩니다.
서문:
- 객체 속성은 소유할 수도 있고(개체 자체에 속성이 있음) 상속될 수도 있습니다(개체 자체가 아니라 프로토타입 중 하나).
- 개체 속성은 열거할 수도 있고 열거할 수도 없습니다.열거할 수 없는 속성은 많은 속성 열거/배열에서 제외됩니다.
- 속성 이름은 문자열 또는 기호일 수 있습니다.이름이 기호인 속성은 속성 열거/배열에서 제외됩니다.
2018년에 오브젝트의 속성을 루프하기 위한 옵션은 다음과 같습니다(일부 예는 목록에 따릅니다).
for-in[MDN, 사양] — 상속된 속성을 포함하여 개체의 열거형 속성(이름 문자열)의 이름을 루프하는 루프 구조입니다.Object.keys[MDN, spec] — 이름이 문자열인 개체 자체의 열거형 속성 이름 배열을 제공하는 함수입니다.Object.values[MDN, spec] : 객체 자체의 열거 가능한 속성 값 배열을 제공하는 함수입니다.Object.entries[MDN, 사양] - 객체 자체의 열거 가능한 속성의 이름 및 값 배열을 제공하는 함수입니다(배열 내의 각 엔트리는[name, value]★★★★★★★★★★★★★★★★★★」Object.getOwnPropertyNames[MDN, spec] — 이름이 문자열인 개체 자체의 속성(숫자가 불가능한 속성도 포함)의 이름 배열을 제공하는 함수입니다.Object.getOwnPropertySymbols[MDN, 사양] — 이름이 기호인 개체 자체의 속성(숫자가 불가능한 속성도 포함)의 이름 배열을 제공하는 함수입니다.Reflect.ownKeys[MDN, 사양] — 개체 자체의 속성(숫자가 불가능한 속성도 포함)의 이름 배열을 제공하는 함수입니다. 이름은 문자열이든 기호든 상관없습니다.- 열거할 수 없는 상속된 속성을 포함하여 개체의 모든 속성을 사용하려면 루프를 사용해야 합니다.
Object.getPrototypeOf[MDN, 사양] 및 사용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 (루프가 있는 경우는 있습니다만, 임의의 루프 구조를 사용할 수 있습니다).
// 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;
}다음과 같이 반복할 수 있습니다.
for (var key in p) {
alert(p[key]);
}
:key을 사용법
.ECMAScript 5 는, ECMAScript 5 는, ECMAScript 5 의 반복 필드입니다.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:
성능
현재 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)에서는 입니다. - 반복기(D,E) 기반 솔루션은 속도가 가장 느리므로 권장하지 않습니다.
- 솔루션 C는 큰 개체의 경우 느리고 작은 개체의 경우 중간 느림
세부 사항
퍼포먼스 테스트가 실행된 것은
- 3개의 필드가 있는 작은 오브젝트 - 여기서 머신에 대한 테스트를 수행할 수 있습니다.
- 1000개의 필드가 있는 'big' 객체 - 여기에서 머신에 대한 테스트를 수행할 수 있습니다.
다음 토막은 사용된 솔루션을 보여줍니다.
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다른 재산들도요
를 얻고 있기 때문에 es2015를 원활하게 및 . 여기에는 원활한 반복을 위해 발전기와 반복기를 사용하는 것을 포함합니다.[key, value]예를 들어 루비 같은 다른 언어에서도 가능합니다.
OK 코드는 다음과 같습니다.
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 페이지를 참조하십시오.
여기 있는 모든 답변을 살펴본 결과, json 오브젝트가 깨끗하기 때문에 hasOwnProperty는 내 자신의 사용에 필요하지 않습니다. javascript 처리를 추가하는 것은 의미가 없습니다.사용하고 있는 것은 이것뿐입니다.
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.entries(myObject).map(([key, value]) => console.log(key, value))
은 둘 다 Object.keys() ★★★★★★★★★★★★★★★★★」for...of결합은 하지 않았습니다.
var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
console.log(key + ':' + map[key]);
할 수 게 아니야.for...of한 사람Object 반복자가 아닙니다.for...index ★★★★★★★★★★★★★★★★★」.forEach()Object.keys()못생겼다/비능률적이다.
다행이다for...in).hasOwnProperty()그것 또한 조금 지저분하기 때문에, 상기의 답변 외에, 저는 여기에...
!!객!!!!!!!!!!!!!!!! 행동하다Map을 for...of
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;
}};
};
통사설탕이 들어가지 않은 실제 지도 객체를 만들지 않아도 됩니다.
var trueMap = new Map([['well', 'hello'], ['there', '!']]);
for (let pair of trueMap)
console.log(pair[0] + ':' + pair[1]);
사실, 이 심을 사용하면 맵의 다른 기능을 이용하고 싶지만(모두 샤밍하지 않고) 깔끔한 오브젝트 표기법을 사용하고 싶다면, 이제 오브젝트를 반복할 수 있기 때문에 맵을 만들 수 있습니다!
//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))
미래에 온 걸 환영해
Object.keys()를 사용하여 다음과 같은 오브젝트 키를 반복하여 값을 얻을 수도 있습니다.
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.keys(p).forEach((key)=> {
console.log(key +' -> '+ p[key]);
});「」의 for-ofObject.keys()
예를 들어 다음과 같습니다.
let object = {
"key1": "value1",
"key2": "value2",
"key3": "value3"
};
for (let key of Object.keys(object)) {
console.log(key + " : " + object[key])
}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(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.");파이어폭스에서는 다음과 같은 결과를 얻을 수 있습니다.
- Object.keys 접근법에는 40.21101451665163밀리초가 걸렸습니다.
- for...in/hasOwnProperty 접근법에 98.261635083651밀리초가 소요되었습니다.
추신. 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);
});최신 ES 스크립트에서는 다음과 같은 작업을 수행할 수 있습니다.
let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
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
}
Object.keys()method는 지정된 개체의 열거 가능한 속성 배열을 반환합니다.자세한 내용은 이쪽
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.keys(p).map((key)=> console.log(key + "->" + p[key]))오브젝트를 반복하는 또 다른 방법이 있습니다.
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
Object.keys(p).forEach(key => { console.log(key, p[key]) })javascript에서 개체를 반복하는 다중 방법
루프에서...에 사용
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (let key in p){
if(p.hasOwnProperty(key)){
console.log(`${key} : ${p[key]}`)
}
}루프의...에 사용
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};
for (let key of Object.keys(p)){
console.log(`key: ${key} & value: ${p[key]}`)
}개체와 함께 ForEach()를 사용합니다.키, Object.values, Object.entries
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}`)
})순수 JavaScript를 사용하면 루프가 매우 흥미로울 수 있습니다.루프는 ECMA6(New 2015 JavaScript Specification)만이 관리되고 있는 것 같습니다.유감스럽게도 이 글을 쓰고 있는 동안 브라우저와 인기 있는 통합 개발 환경(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;
}
}
이 5에서는, 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;
}
6월 크롬chrome://flags/#enable-javascript-harmony
이것이 새로운 표준이 될 때까지, 오래된 방법은 여전히 사용될 수 있지만, 인기 있는 도서관이나 심지어 이러한 도서관 중 어느 것도 사용하지 않는 사람들을 위한 가벼운 대안도 있다.
모든 오브젝트에 간단한 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);
});
각 방법에 대해 다른 방법과 충돌하지 않으려면 고유한 이름으로 이름을 지정할 수 있습니다.
위한 (ReactRespect의 경우)은 JavaScript의 경우 JS가 를 사용하고 있습니다.Object.keys ★★★★★★★★★★★★★★★★★」Object.entries「」를 사용하여map와 같은 것음음음같 뭇매하다
// assume items:
const items = {
first: { name: 'phone', price: 400 },
second: { name: 'tv', price: 300 },
third: { name: 'sofa', price: 250 },
};
" " " " UI "에서 ReactJS뭇매를 맞다
~~~
<div>
{Object.entries(items).map(([key, ({ name, price })]) => (
<div key={key}>
<span>name: {name}</span>
<span>price: {price}</span>
</div>
))}
</div>
두 번 한 번은 실, 괴, 괴, 괴, 난, 난, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually, actually actually, , actually,key, 1회 취득 시.」를 취득.name ★★★★★★★★★★★★★★★★★」price.
ES6에는 기존의 내부 메서드를 표시하기 위한 잘 알려진 기호가 있습니다.이 기호를 사용하여 이 오브젝트에 대한 반복기 동작 방식을 정의할 수 있습니다.
var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3",
*[Symbol.iterator]() {
yield *Object.keys(this);
}
};
[...p] //["p1", "p2", "p3"]
이것은...에 사용하는 것과 같은 결과가 된다.es6 루프에 있습니다.
for(var key in p) {
console.log(key);
}
그러나 현재 es6를 사용하는 기능을 아는 것이 중요합니다.
.obj.hasOwnerProperty 모 every withinfor ... inloopsyslog.syslog..syslog.
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) ;
오브젝트 값의 배열을 반환하고 프로토타입에서 값을 추출하지 않습니다!!
키(여기에서는 모든 준비가 완료되어 있습니다.
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]);
}
}
}언급URL : https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object
'programing' 카테고리의 다른 글
| for loop 끝에 있는 ";"의 목적은 무엇입니까? (0) | 2022.10.30 |
|---|---|
| MySQL과 PHP에서 계산하기 (0) | 2022.10.30 |
| PHP/PDO MariaDB Galera 클러스터 (0) | 2022.10.30 |
| Python에서는 argparse를 사용하여 양의 정수만 허용합니다. (0) | 2022.10.30 |
| Java에서 주문 세트를 구현한 적이 있습니까? (0) | 2022.10.30 |