Wie kann ich ein JavaScript-Objekt in einer Schleife durchlaufen oder aufzählen?

Question

Ich habe ein JavaScript-Objekt wie das folgende:

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

Jetzt möchte ich eine Schleife durch alle p Elemente ( p1 , p2 , p3 ...) und ihre Schlüssel und Werte erhalten. Wie kann ich das tun?

Ich kann das JavaScript-Objekt bei Bedarf ändern. Mein ultimatives Ziel ist es, eine Schleife durch einige Schlüssel-Wert-Paare zu ziehen, und wenn möglich, möchte ich die Verwendung von eval .

Answer 1

Mit einer for-of en Object.keys()

Wie:

let object = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

for (let key of Object.keys(object)) {
  console.log(key + " : " + object[key])
}

Answer 2

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

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

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

Answer 3

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>

Answer 4

Object.keys(obj) : Array

ruft alle string-bewerteten Schlüssel aller aufzählbaren eigenen (nicht vererbten) Eigenschaften ab.

Es ergibt sich also die gleiche Liste von Schlüsseln, wie Sie 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. Beweisen wir es:

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

• Object.keys brauchte 40,21101451665163 Millisekunden.
• for...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) kann man iterierbare Objekte besser iterieren:

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

Answer 5

Im neuesten ES-Skript können Sie etwa so vorgehen:

let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
  console.log(key, value);
}