it-swarm.com.de

Wie kann ich ein JavaScript-Objekt durchlaufen oder auflisten?

Ich habe ein JavaScript-Objekt wie das folgende:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Jetzt möchte ich alle p-Elemente durchlaufen (p1, p2, p3_...) und ihre Schlüssel und Werte abrufen. Wie kann ich das machen?

Ich kann das JavaScript-Objekt bei Bedarf ändern. Mein ultimatives Ziel ist es, einige Schlüsselwertpaare durchzugehen, und wenn möglich, möchte ich die Verwendung von eval vermeiden.

2386
Tanmoy

Sie können die for-in-Schleife wie von anderen gezeigt verwenden. Sie müssen jedoch auch sicherstellen, dass der Schlüssel, den Sie erhalten, eine tatsächliche Eigenschaft eines Objekts ist und nicht vom Prototyp stammt.

Hier ist der Ausschnitt:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

3835
levik

Unter ECMAScript 5 können Sie Object.keys() und Array.prototype.forEach() kombinieren:

var obj = { first: "John", last: "Doe" };

Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ECMAScript 6 fügt for...of hinzu:

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ECMAScript 8 fügt Object.entries() hinzu, um zu vermeiden, dass Sie jeden Wert im Originalobjekt nachschlagen müssen:

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

Sowohl Object.keys() als auch Object.entries() durchlaufen die Eigenschaften in derselben Reihenfolge wie eine for...in-Schleife , ignorieren jedoch die Prototypkette. Nur die eigenen aufzählbaren Eigenschaften des Objekts werden iteriert.

781

Sie müssen die for-in-Schleife verwenden

Seien Sie jedoch vorsichtig, wenn Sie diese Art von Schleife verwenden, da dies alle Eigenschaften entlang der Prototypkette schleifen wird.

Verwenden Sie daher bei Verwendung von for-in-Schleifen immer die hasOwnProperty-Methode, um festzustellen, ob die aktuelle Eigenschaft in der Iteration tatsächlich eine Eigenschaft des Objekts ist, das Sie überprüfen:

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
}
315
Andreas Grech

Die Frage ist nicht vollständig, wenn nicht alternative Methoden zum Durchlaufen von Objekten erwähnt werden.

Heutzutage bieten viele bekannte JavaScript-Bibliotheken ihre eigenen Methoden zum Durchlaufen von Auflistungen, d. H. Über Arrays, Objekte und Array-ähnliche Objekte. Diese Methoden sind praktisch und mit jedem Browser kompatibel.

  1. Wenn Sie mit jQuery arbeiten, können Sie die jQuery.each() -Methode verwenden. Es kann verwendet werden, um Objekte und Arrays nahtlos zu durchlaufen:

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. In Underscore.js können Sie die Methode _.each() finden, die eine Liste von Elementen durchläuft und jeweils eine übergebene Funktion liefert (achten Sie auf die Reihenfolge der Argumente in Iteratee Funktion!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash bietet mehrere Methoden zum Durchlaufen von Objekteigenschaften. Basic _.forEach() (oder sein Alias ​​_.each()) ist nützlich, um sowohl Objekte als auch Arrays zu durchlaufen. (!) Objekte mit der Eigenschaft length werden jedoch wie Arrays behandelt. Um dieses Verhalten zu vermeiden, wird empfohlen, _.forIn() und _.forOwn() methoden (diese haben auch das value-Argument zuerst):

    _.forIn(obj, function(value, key) {
        console.log(key, value);
    });
    

    _.forIn() durchläuft eigene und geerbte Aufzählungsmerkmale eines Objekts, während _.forOwn() nur über own -Eigenschaften eines Objekts durchläuft (im Wesentlichen gegen die hasOwnProperty-Funktion geprüft). Für einfache Objekte und Objektliterale funktioniert jede dieser Methoden gut.

Im Allgemeinen verhalten sich alle beschriebenen Methoden bei allen gelieferten Objekten gleich. Außerdem ist die Verwendung der nativen for..in-Schleife normalerweise schneller als bei jeder Abstraktion, z. B. jQuery.each(), und diese Methoden sind wesentlich einfacher zu verwenden, erfordern weniger Codierung und bieten eine bessere Fehlerbehandlung.

239
VisioN

In ECMAScript 5 haben Sie einen neuen Ansatz in Iterationsfeldern von Literalen - Object.keys

Weitere Informationen finden Sie auf MDN

Meine Wahl ist unten als eine schnellere Lösung in aktuellen Browser-Versionen (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;
}

Sie können die Leistung dieses Ansatzes mit verschiedenen Implementierungen auf jsperf.com vergleichen:

Browser-Unterstützung, die Sie auf Kangax 's kompatible Tabelle sehen können

Für alte Browser haben Sie simple und full polyfill

UPD:

leistungsvergleich für alle gängigen Fälle in dieser Frage zu perfjs.info:

Objekt-Literal-Iteration

48
Pencroff

Sie können es einfach wie folgt durchlaufen:

for (var key in p) {
  alert(p[key]);
}

Beachten Sie, dass key den Wert der Eigenschaft nicht annimmt, es handelt sich lediglich um einen Indexwert.

39
Bryan

Vorwort:

Im Jahr 2018 stehen Ihnen folgende Optionen zum Durchlaufen der Eigenschaften eines Objekts zur Verfügung:

  1. for-in [/ - _ mdn _ , spec ] - Eine Schleifenstruktur, die die Namen der Enumerable- Eigenschaften eines Objekts durchläuft, einschließlich geerbter Eigenschaften, deren Namen Zeichenfolgen sind
  2. Object.keys [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen der own, enumerableEigenschaften eines Objekts bereitstellt, deren Namen sind Saiten.
  3. Object.values [ MDN , spec ] - Eine Funktion, die ein Array der Werte der Objekte own, Aufzählbar) bereitstellt Eigenschaften.
  4. Object.entries [ MDN , spec ] - Eine Funktion, die ein Array der Namen und -Werte von owneines Objekts bereitstellt _, aufzählbar Eigenschaften.
  5. Object.getOwnPropertyNames [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen der own -Eigenschaften eines Objekts bereitstellt (auch nicht auflösbare), deren Namen sind Streicher.
  6. Object.getOwnPropertySymbols [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen der own -Eigenschaften eines Objekts bereitstellt (auch nicht auflösbare), deren Namen sind Symbole.
  7. Reflect.ownKeys [ MDN , spec ] - Eine Funktion, die ein Array mit den Namen der own -Eigenschaften eines Objekts (auch nicht auflösbaren) bereitstellt Namen sind Zeichenfolgen oder Symbole.
  8. Wenn Sie all der Eigenschaften eines Objekts, einschließlich nicht aufgezählter vererbter Eigenschaften, möchten, müssen Sie eine Schleife und Object.getPrototypeOf [ MDN , spec ] verwenden und Object.getOwnPropertyNames, Object.getOwnPropertySymbols oder verwenden Reflect.ownKeys für jedes Objekt in der Prototypkette (Beispiel unten in dieser Antwort).

Bei allen, mit Ausnahme von for-in, würden Sie eine Art Schleifenkonstrukt für das Array verwenden (for, for-of, forEach usw.).

Beispiele:

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 _ ​​(mit einer for-of-Schleife, aber Sie können ein beliebiges Schleifenkonstrukt verwenden):

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

Alle Eigenschaften, einschließlich geerbter nicht aufzuzählender Eigenschaften:

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

27
T.J. Crowder

Da es2015 immer beliebter wird, poste ich diese Antwort, die die Verwendung von Generator und Iterator umfasst, um [key, value]-Paare reibungslos zu durchlaufen. Wie es in anderen Sprachen möglich ist, zum Beispiel Ruby.

Ok hier ist ein Code:

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

Alle Informationen dazu, wie Sie einen Iterator und einen Generator ausführen können, finden Sie auf der Mozilla-Entwickler-Seite.

Hoffe es hat jemandem geholfen.

EDIT:

ES2017 enthält Object.entries, wodurch das Durchlaufen von [key, value]-Paaren in Objekten noch einfacher wird. Es ist jetzt bekannt, dass es gemäß den Informationen der ts39 - Stufe Teil eines Standards sein wird.

Ich denke, es ist an der Zeit, meine Antwort zu aktualisieren, damit sie noch frischer wird als jetzt.

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

Weitere Informationen zur Verwendung finden Sie auf der Seite __. MDN

24
FieryCod

via prototyp mit forEach () die Prototypkette überspringen soll Eigenschaften:

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
19
bitstrider

Nachdem ich alle Antworten durchgesehen habe, ist hasOwnProperty für meine eigene Verwendung nicht erforderlich, da mein Json-Objekt sauber ist. Es macht wirklich keinen Sinn, zusätzliche Javascript-Verarbeitung hinzuzufügen. Das ist alles was ich benutze:

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}
18
Francis Lewis
for(key in p) {
  alert( p[key] );
}

Hinweis: Sie können dies über Arrays tun, Sie werden jedoch auch die length-Eigenschaft und andere Eigenschaften durchlaufen.

17

Es ist interessant, dass die Leute in diesen Antworten sowohl auf Object.keys() als auch auf for...of eingegangen sind, sie jedoch nie kombiniert haben:

var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
    console.log(key + ':' + map[key]);

Sie können nicht einfach for...of eine Object, weil es kein Iterator ist, und for...index oder .forEach()ing die Object.keys() hässlich/ineffizient ist.
Ich bin froh, dass die meisten Leute auf for...in verzichten (mit oder ohne .hasOwnProperty() zu überprüfen), da dies auch etwas unordentlich ist, also abgesehen von meiner Antwort oben, ich bin hier, um zu sagen ...


Sie können normale Objektzuordnungen iterieren lassen! Verhalten wie Maps mit direkter Verwendung des ausgefallenen for...of
DEMO funktioniert in Chrome und FF (ich gehe davon aus, dass nur ES6 verwendet wird)

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

So lange Sie mein Shim unten angeben:

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

Ohne ein echtes Map-Objekt erstellen zu müssen, das nicht den Nice-Zucker enthält.

var trueMap = new Map([['well', 'hello'], ['there', '!']]);
for (let pair of trueMap)
    console.log(pair[0] + ':' + pair[1]);

Wenn Sie mit diesem Shim dennoch die andere Funktionalität von Map nutzen möchten (ohne sie alle einzubeziehen), aber dennoch die ordentliche Objektnotation verwenden möchten, da Objekte jetzt iterierbar sind, können Sie jetzt einfach eine Map daraus erstellen!

//shown in demo
var realMap = new Map({well:'hello', there:'!'});

Für diejenigen, die nicht gerne Shim machen oder mit prototype im Allgemeinen herumspielen, können Sie stattdessen die Funktion unter Windows machen, indem Sie sie etwas wie getObjIterator() nennen;

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

Jetzt können Sie es einfach als gewöhnliche Funktion aufrufen, nichts anderes ist davon betroffen

var realMap = new Map(getObjIterator({well:'hello', there:'!'}))

oder

for (let pair of getObjIterator(ordinaryObject))

Es gibt keinen Grund, warum das nicht funktionieren würde.

Willkommen in der Zukunft.

15
Hashbrown

Object.keys (obj): Array

ruft alle Stringwertschlüssel aller aufzählbaren eigenen (nicht geerbten) Eigenschaften ab.

Es gibt also dieselbe Liste von Schlüsseln, die Sie beabsichtigen, indem Sie jeden Objektschlüssel mit hasOwnProperty testen. Sie brauchen diese zusätzliche Testoperation nicht als und Object.keys( obj ).forEach(function( key ){}) soll schneller sein. Lass es uns beweisen:

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

In meinem Firefox habe ich folgende Ergebnisse

  • Der Ansatz von Object.keys dauerte 40.21101451665163 Millisekunden.
  • für ... in/hasOwnProperty-Ansatz dauerte 98,26163508463651 Millisekunden.

PS. auf Chrome ist der Unterschied noch größer http://codepen.io/dsheiko/pen/JdrqXa

PS2: In ES6 (EcmaScript 2015) können Sie iterierbare Objekte besser durchlaufen: 

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

12
Dmitry Sheiko

Hier ist eine weitere Methode zum Durchlaufen eines Objekts.

   var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};


Object.keys(p).forEach(key => { console.log(key, p[key]) })

11
Harsh Patel

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>

10
ParaMeterz

Die Object.keys()-Methode gibt ein Array der eigenen Aufzählereigenschaften eines Objekts zurück. Lesen Sie mehr darüber hier

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).map((key)=> console.log(key + "->" + p[key]))

8
George Bailey

Sie können allen Objekten eine einfache forEach - Funktion hinzufügen, sodass Sie jedes Objekt automatisch durchlaufen können:

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

Für diejenigen, die die " für ... in " - Methode nicht mögen:

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

Nun können Sie einfach anrufen:

p.forEach (function(key, value){
    console.log ("Key: " + key);
    console.log ("Value: " + value);
});

Wenn Sie keine Konflikte mit anderen forEach-Methods erhalten möchten, können Sie sie mit Ihrem eindeutigen Namen benennen.

7
Biber

Bei Verwendung von reinem JavaScript können Loops sehr interessant sein. Es scheint, dass nur ECMA6 (New 2015 JavaScript-Spezifikation) die Schleifen unter Kontrolle gebracht hat. Während ich dies schreibe, haben leider sowohl Browser als auch die beliebte Integrated Development Environment (IDE) immer noch Schwierigkeiten, das neue Schnickschnack vollständig zu unterstützen.

Auf einen Blick sieht eine JavaScript-Objektschleife vor der ECMA6 so aus:

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

Ich weiß auch, dass dies mit dieser Frage nicht in Frage kommt, aber im Jahr 2011 fügte ECMAScript 5.1 die forEach-Methode nur für Arrays hinzu, die im Grunde eine neue, verbesserte Methode zum Durchlaufen von Arrays geschaffen hat, während nicht wiederholbare Objekte in der alten verbose und verwirrenden for-Schleife verbleiben . Der seltsame Teil ist jedoch, dass diese neue forEach-Methode break nicht unterstützt, was zu allen möglichen anderen Problemen führte.

Grundsätzlich gibt es 2011 keine wirklich solide Methode, um in JavaScript eine Schleife zu erstellen, die von vielen beliebten Bibliotheken (jQuery, Underscore usw.) zur erneuten Implementierung beschlossen wird.

Ab 2015 haben wir jetzt eine bessere Möglichkeit, jeden Objekttyp (einschließlich Arrays und Strings) zu schleifen (und zu unterbrechen). So sieht eine Schleife in JavaScript aus, wenn die Empfehlung zum Mainstream wird:

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

Beachten Sie, dass die meisten Browser den oben genannten Code ab dem 18. Juni 2016 nicht unterstützen. Selbst in Chrome müssen Sie dieses spezielle Flag aktivieren, damit es funktioniert: chrome://flags/#enable-javascript-harmony

Bis dies zum neuen Standard wird, kann die alte Methode noch verwendet werden, aber es gibt auch Alternativen in gängigen Bibliotheken oder sogar leichte Alternativen für diejenigen, die keine dieser Bibliotheken verwenden.

5

Nur JavaScript-Code ohne Abhängigkeiten:

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
}
5
mohamed-ibrahim

In Anbetracht von ES6 möchte ich meinen eigenen Löffel Zucker hinzufügen und einen weiteren Ansatz zum Durchlaufen der Objekteigenschaften angeben.

Da einfaches JS-Objekt nicht iterable ist, können wir die for..of - Schleife nicht zum Durchlaufen des Inhalts verwenden. Aber niemand kann uns aufhalten , um es iterabel zu machen .

Lassen Sie uns das Objekt book haben.

let book = {
  title: "Amazing book",
  author: "Me",
  pages: 3
}

book[Symbol.iterator] = function(){

  let properties = Object.keys(this); // returns an array with property names
  let counter = 0;
  let isDone = false;

  let next = () => {
    if(counter >= properties.length){
      isDone = true;
    }
    return { done: isDone, value: this[properties[counter++]] }
  }

  return { next };
}

Da wir es geschafft haben, können wir es folgendermaßen verwenden:

for(let pValue of book){
  console.log(pValue);
}
------------------------
Amazing book
Me
3

Oder wenn Sie die Leistung von ES6 kennen Generatoren , können Sie den obigen Code sicherlich viel kürzer machen.

book[Symbol.iterator] = function *(){

  let properties = Object.keys(this);
  for (let p of properties){
    yield this[p];
  }

}

Natürlich können Sie dieses Verhalten für alle Objekte anwenden, indem Sie Object auf prototype -Ebene iterieren.

Object.prototype[Symbol.iterator] = function() {...}

Außerdem können Objekte, die dem iterierbaren Protokoll entsprechen, mit dem neuen Operator ES2015 spread verwendet werden, sodass Objekteigenschaftswerte als Array gelesen werden können.

let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]

Oder Sie können destructuring zuweisen:

let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3

Sie können JSFiddle mit dem Code auschecken, den ich oben angegeben habe.

4

Ich würde dies tun, anstatt obj.hasOwnerProperty in jeder for ... in-Schleife zu überprüfen.

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

Sie können auch Object.keys () verwenden und die folgenden Objektschlüssel durchlaufen, um den Wert zu erhalten:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).forEach((key)=> {
 console.log(key +' -> '+ p[key]);
});
3
Onera

Wenn jemand durch arrayObjects mit der Bedingung durchlaufen muss:

var arrayObjects = [{"building":"A", "status":"good"},{"building":"B","status":"horrible"}];

for (var i=0; i< arrayObjects.length; i++) {
  console.log(arrayObjects[i]);
  
  for(key in arrayObjects[i]) {      
    
      if (key == "status" && arrayObjects[i][key] == "good") {
        
          console.log(key + "->" + arrayObjects[i][key]);
      }else{
          console.log("nothing found");
      }
   }
}

3
Tadas V.

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

3
senthil

In dem neuesten ES-Skript können Sie Folgendes tun:

Object.entries(p);
3
Ankit

Wenn Sie auch über nicht aufzählbare Eigenschaften iterieren möchten, können Sie Object.getOwnPropertyNames(obj) verwenden, um ein Array aller Eigenschaften (aufzählbar oder nicht) eines Objekts zurückzugeben.

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

3
Dheeraj V.S.

seit ES06 können Sie die Werte eines Objekts als Array mit abrufen

let arrValues = Object.values( yourObject) ;

es gibt ein Array der Objektwerte zurück und extrahiert keine Werte aus Prototype !!

MDN DOCS Object.values ​​()

und für Schlüssel (hier schon vor mir geantwortet) 

let arrKeys   = Object.keys(yourObject);
2

In ES6 haben wir bekannte Symbole, um einige zuvor interne Methoden verfügbar zu machen. Sie können damit definieren, wie Iteratoren für dieses Objekt arbeiten:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3",
    *[Symbol.iterator]() {
        yield *Object.keys(this);
    }
};

[...p] //["p1", "p2", "p3"]

dies führt zum gleichen Ergebnis wie bei der Verwendung von for ... in der es6-Schleife.

for(var key in p) {
    console.log(key);
}

Aber es ist wichtig zu wissen, welche Fähigkeiten Sie jetzt mit es6 verwenden!

2
Bamieh

Ein Objekt wird zu einem Iterator, wenn es die .next () -Methode implementiert

const james = {
name: 'James',
height: `5'10"`,
weight: 185,

[Symbol.iterator]() {
let properties = []
for (let key of Object.keys(james)){
     properties.Push(key);
 }

index = 0;
return {
        next: () => {
            let key = properties[index];
            let value = this[key];
            let done = index >= properties.length - 1 ;
            index++;
            return { key, value, done };
        }
    };
  }

};


const iterator = james[Symbol.iterator]();

console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // `5'10`
console.log(iterator.next().value); // 185
2
Dan Alboteanu

Object.entries() Funktion:

var p = {
	    "p1": "value1",
	    "p2": "value2",
	    "p3": "value3"
	};

for (var i in Object.entries(p)){
	var key = Object.entries(p)[i][0];
	var value = Object.entries(p)[i][1];
	console.log('key['+i+']='+key+' '+'value['+i+']='+value);
}

1
nrb

Wenn Sie nur über Eigenschaften iterieren möchten, verwenden Sie eine der obigen Antworten. Wenn Sie jedoch alles einschließlich der Funktionen durchlaufen möchten, möchten Sie möglicherweise Object.getOwnPropertyNames (obj) verwenden.

for (let o of Object.getOwnPropertyNames(Math)) {
  console.log(o);
}

Manchmal verwende ich dies, um alle Funktionen an Objekten mit einfachen Ein- und Ausgängen schnell zu testen.

1

Bei der Verwendung von Angular hatte ich ein ähnliches Problem. Hier ist die Lösung, die ich gefunden habe.

Schritt 1. Holen Sie sich alle Objektschlüssel. mit Object.keys. Diese Methode gibt ein Array der eigenen Aufzählungsmerkmale eines Objekts zurück.

Schritt 2. Erstellen Sie ein leeres Array. Hier werden alle Eigenschaften leben, da Ihre neue ngFor-Schleife auf dieses Array zeigen wird. Wir müssen sie alle fangenSchritt 3. Iterate, alle Tasten werfen und jeweils drücken in das von Ihnen erstellte Array ..__ So sieht das im Code aus.

    // Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.Push(evilResponseProps[prop]);
}

Hier ist ein Link zum ursprünglichen Beitrag. https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc

0
Jaime Rios

Wenn sich Ihre Anwendung in der Zeichenfolgenerstellung befindet, besteht eine gute Kombination aus Object.keys, implode und der Array-Methode .map. Zum Beispiel, wenn wir ein json Objekt wie haben

var data = {
    key1: 10,
    key2: 'someString',
    key3: 3000
}

.. und wir möchten generieren "Die Werte sind key1 = 10, key2 = someString, key3 = 3000."

Dies können wir in einer einzigen Codezeile erreichen:

var str = `The values are ${implode(', ', Object.keys(data).map(function(key){return `${key} = ${data[key]}`}))}.`;

Implode reduziert ein Array auf einen String, wobei ein Trennzeichen (erstes Argument) zwischen den Elementen eingefügt wird. .map durchläuft ein Array, das ein Array zurückgibt, und Object.keys wurde von den anderen Antworten recht gut ausgearbeitet.

0

So durchlaufen Sie ein Javascript-Objekt und geben die Daten in eine Tabelle ein.

<body>
<script>
function createTable(objectArray, fields, fieldTitles) {
  let body = document.getElementsByTagName('body')[0];
  let tbl = document.createElement('table');
  let thead = document.createElement('thead');
  let thr = document.createElement('tr');

  for (p in objectArray[0]){
    let th = document.createElement('th');
    th.appendChild(document.createTextNode(p));
    thr.appendChild(th);
    
  }
 
  thead.appendChild(thr);
  tbl.appendChild(thead);

  let tbdy = document.createElement('tbody');
  let tr = document.createElement('tr');
  objectArray.forEach((object) => {
    let n = 0;
    let tr = document.createElement('tr');
    for (p in objectArray[0]){
      var td = document.createElement('td');
      td.appendChild(document.createTextNode(object[p]));
      tr.appendChild(td);
      n++;
    };
    tbdy.appendChild(tr);    
  });
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
  return tbl;
}

createTable([
              {name: 'Banana', price: '3.04'}, // k[0]
              {name: 'Orange', price: '2.56'},  // k[1]
              {name: 'Apple', price: '1.45'}
           ])
</script>

0
Giovanni Gianni