Come faccio a scorrere in ciclo o enumerare un oggetto JavaScript?

Question

Ho un oggetto JavaScript come il seguente:

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

Ora voglio un ciclo attraverso tutti i p elementi (p1, p2, p3...) E di ottenere le chiavi e valori.Come posso fare?

Sono in grado di modificare l'oggetto JavaScript, se necessario.Il mio obiettivo finale è quello di un ciclo attraverso alcune coppie chiave-valore e, se possibile, vorrei evitare di usare eval.

Answer 1

È possibile utilizzare il ciclo for-in come mostrato da altri. Tuttavia, si hanno anche per fare in modo che la chiave che si ottiene è una effettiva proprietà di un oggetto, e non viene da prototipo.

Ecco il frammento:

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

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

Answer 2

In base ECMAScript 5, è possibile combinare Object.keys() e Array.prototype.forEach() :

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

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

for...of :

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

Object.entries() che evita di dover cercare ogni valore nell'oggetto originale:

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

È possibile combinare for...of, destrutturazione e Object.entries:

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

Entrambe le proprietà Object.keys() e Object.entries() iterazione nello stesso ordine come un ciclo for...in ma ignorare la catena di prototipi . sono iterate Solo proprie proprietà enumerabili dell'oggetto.

Answer 3

È necessario utilizzare il per-in loop

Ma essere molto attenti quando si utilizza questo tipo di circuito, perché questa sarà ciclo tutte le proprietà lungo la catena di prototipi .

Di conseguenza, quando si utilizza per-in loop, sempre fare uso del metodo hasOwnProperty per determinare se la proprietà attuale iterazione è in realtà una proprietà dell'oggetto si sta controllando il:

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
}

Answer 4

La domanda non sarà completa se non menzionare di metodi alternativi per il ciclo attraverso gli oggetti.

Al giorno d'oggi molte librerie JavaScript ben noti fornire i propri metodi per iterare su collezioni, vale a dire più di array , oggetti e oggetti array-come . Questi metodi sono comodi da usare e sono completamente compatibili con qualsiasi browser.

1. Se si lavora con jQuery , è possibile utilizzare jQuery.each() metodo. Può essere utilizzato per scorrere senza problemi su entrambi gli oggetti e gli array:

   $.each(obj, function(key, value) {
       console.log(key, value);
   });
   

2. Nel Underscore.js è possibile trovare il metodo _.each() , che itera su un elenco di elementi, ottenendo uno alla volta a una funzione in dotazione (prestare attenzione all'ordine degli argomenti in iteratee funzione !):

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

3. Lo-Dash fornisce diversi metodi per iterare su proprietà dell'oggetto. Base _.forEach() (o è alias _.each()) è utile per il collegamento in cascata entrambi gli oggetti e gli array, tuttavia (!) Oggetti con la proprietà length sono trattati come gli array, e per evitare questo comportamento si suggerisce di utilizzare _.forIn() e metodi _.forOwn() (anche questi sono argomento value venire prima):

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

   itera _.forIn() oltre proprio e ereditato proprietà enumerabili di un oggetto, mentre itera _.forOwn() solo su proprio proprietà di un oggetto (fondamentalmente controllo contro la funzione hasOwnProperty). Per gli oggetti semplici e letterali oggetto uno di questi metodi funzionerà bene.

In generale tutti i metodi descritti hanno lo stesso comportamento con oggetti forniti. Oltre a utilizzare ciclo for..in nativo di solito è più veloce di qualsiasi astrazione, come ad esempio jQuery.each(), questi metodi sono molto più facili da usare, richiedono meno di codifica e fornire una migliore gestione degli errori.

Answer 5

In ECMAScript 5 avete nuovo approccio nei campi iterazione letterale - Object.keys

Maggiori informazioni si può vedere sulla MDN

La mia scelta è sotto come una soluzione più veloce nelle attuali versioni di browser (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;
}

È possibile confrontare le prestazioni di questo approccio con diverse implementazioni su jsperf.com :

• Estendere Implementazioni
• chiavi oggetto iterazione
• oggetto iterazione letterale

il supporto del browser si può vedere sulla tavolo compat di Kangax

Per browser vecchio di avere semplice e < a href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel = "noreferrer"> pieno polyfill

UPD:

confronto delle prestazioni per tutti i casi più popolari questa domanda perfjs.info:

oggetto iterazione letterale

Answer 6

Si può solo scorrere su di esso come:

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

Si noti che key non assumerà il valore della proprietà, è solo un valore di indice.

Answer 7

Premessa:

• Proprietà dell'oggetto può essere proprio (la proprietà è sull'oggetto stesso) o ereditato (non sull'oggetto stesso, su uno dei suoi prototipi).
proprietà
• oggetto può essere enumerabile o non enumerabile . immobili non enumerabili sono lasciati fuori di un sacco di enumerazioni di proprietà / array.
• I nomi di proprietà possono essere stringhe o simboli. Proprietà i cui nomi sono simboli sono lasciati fuori di un sacco di proprietà enumerazioni / matrici.

Qui nel 2018, le opzioni per il collegamento in cascata le proprietà di un oggetto sono (alcuni esempi seguono la lista):

1. for-in [ MDN , spec ] - una struttura ad anello che scorre i nomi dei enumerabili proprietà di un oggetto, compresi quelli ereditati, i cui nomi sono stringhe
2. Object.keys [ MDN , spec ] - una funzione che fornisce un array di nomi di una oggetto di proprio , enumerabili proprietà i cui nomi sono stringhe.
3. Object.values [ MDN , spec ] - una funzione che fornisce un array di I valori di un oggetto di proprio , enumerabile proprietà.
4. Object.entries [ MDN , spec ] - una funzione che fornisce un allineamento dei nomi e valori di un oggetto proprio , enumerable proprietà (ogni voce nella matrice è una matrice [name, value]).
5. Object.getOwnPropertyNames [ MDN , spec ] - una funzione che fornisce un array di nomi di una oggetto di proprio proprietà (anche non enumerabili) i cui nomi sono stringhe.
6. Object.getOwnPropertySymbols [ MDN , spec ] - una funzione che fornisce un array di nomi di una oggetto di proprio proprietà (anche non enumerabili) i cui nomi sono simboli.
7. Reflect.ownKeys [ MDN , spec ] - una funzione che fornisce un array di nomi di una oggetto di proprio proprietà (anche non enumerabili), se tali nomi sono stringhe o simboli.
8. Se si desidera tutti di proprietà di un oggetto, inclusi quelli ereditati non enumerabili, è necessario utilizzare un ciclo e Object.getPrototypeOf [ MDN , spec ] e utilizzare Object.getOwnPropertyNames, Object.getOwnPropertySymbols o Reflect.ownKeys su ogni oggetto nella catena di prototipi (esempio in fondo a questa risposta).

Con tutti loro, tranne for-in, utilizza una sorta di loop costruire sulla matrice (for, for-of, forEach, ecc.).

Esempi:

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 (con un ciclo for-of, ma è possibile utilizzare qualsiasi costrutto iterativo) :

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

Tutte le proprietà , anche non enumerabili ereditati:

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

Answer 8

Dal es2015 sta diventando sempre più popolare sto postando questa risposta che includono l'utilizzo di generatore e iteratore per scorrere agevolmente attraverso coppie [key, value]. Come è possibile in altre lingue, per esempio Ruby.

L'approvazione qui è un codice:

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

Tutte le informazioni su come si può fare un iteratore e generatore potete trovare a pagina sviluppatore di Mozilla.

Speranza ha aiutato qualcuno.

Modifica

ES2017 includerà Object.entries che renderà l'iterazione su coppie [key, value] in oggetti ancora più facile. È ormai noto che sarà una parte di un principio secondo il TS39 informazioni palco.

Credo che sia il momento di aggiornare la mia risposta a lasciare è diventato ancora più fresco di quello che è ora.

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

È possibile trovare maggiori informazioni su utilizzo su pagina MDN

Answer 9

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

. Nota: è possibile farlo su array, ma potrai scorrere i length e altre proprietà, anche

Answer 10

Dopo aver guardato attraverso tutte le risposte a qui, hasOwnProperty non è necessaria per il mio utilizzo perché il mio oggetto JSON è pulito; non c'è davvero alcun senso aggiungere qualsiasi elaborazione JavaScript aggiuntivo. Questo è tutto quello che sto utilizzando:

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

Answer 11

via prototipo forEach () che deve saltare la catena di prototipi Proprietà:

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

Answer 12

E 'gente interessante in queste risposte hanno toccato sia Object.keys() e for...of ma mai combinato:

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

_{Non si può semplicemente for...of un Object perché non è un iteratore e for...index o .forEach()ing la Object.keys() è brutto / inefficiente.
Sono contento che la maggior parte delle persone sono astenersi dal for...in (con o senza il controllo .hasOwnProperty()) in quanto questo è anche un po 'disordinato, così diversa dalla mia risposta sopra, io sono qui per dire ...}

---

È possibile effettuare le associazioni degli oggetti ordinari iterare! Comportarsi come Maps con uso diretto del for...of fantasia
DEMO lavorare in Chrome e FF (presumo ES6 solo)

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

Fino a quando si include il mio spessore di seguito:

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

Senza dover creare un oggetto mappa reale che non ha la bella zucchero sintattico.

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

In realtà, con questo spessore, se ancora voleva approfittare di altre funzionalità di Carta (senza di loro tutto in spessori), ma ancora voluto usare la notazione necklace oggetto, dal momento che gli oggetti sono ora Iterable ora è possibile solo fare una mappa da esso!

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

---

Per coloro che non amano Shim, o pasticciare con prototype in generale, si sentono liberi di fare la funzione sulla finestra, invece, definendolo qualcosa come getObjIterator() poi;

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

Ora si può chiamare come una funzione ordinaria, niente altro è influenzato

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

o

for (let pair of getObjIterator(ordinaryObject))

Non c'è alcun motivo per cui non avrebbe funzionato.

Benvenuti nel futuro.

Answer 13

  

Object.keys (obj): Array

     

recupera tutte le chiavi di stringa a valore di tutti i propri enumerabili (non ereditata) proprietà.

Quindi, dà lo stesso elenco di chiavi come si intende testando ogni tasto oggetto con hasOwnProperty. Non è necessario che il funzionamento di prova in più rispetto e Object.keys( obj ).forEach(function( key ){}) si suppone che sia più veloce. Diciamo dimostrarlo:

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

Nel mio Firefox ho risultati seguenti

• approccio Object.keys preso 40.21101451665163 millisecondi.
• for ... in / hasOwnProperty approccio ha preso 98.26163508463651 millisecondi.

PS. su Chrome differenza ancora più grande http://codepen.io/dsheiko/pen/JdrqXa

PS2: In ES6 (EcmaScript 2015) è possibile iterare iterabile oggetto più bello:

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 14

Ecco un altro metodo per scorrere un oggetto.

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


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

Answer 15

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 16

Il metodo Object.keys() restituisce un array di proprie proprietà enumerabili un determinato oggetto. Per saperne di più su di esso href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" qui

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

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

Answer 17

È possibile aggiungere un semplice forEach per tutti gli oggetti, in modo da poter ciclo automaticamente attraverso qualsiasi oggetto:

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

Per coloro che non amano il " for ... in " - Metodo:

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

Ora, è possibile semplice chiamata:

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

Se non si desidera ottenere conflitti con altri foreach-metodi che è possibile nominare con il tuo nome univoco.

Answer 18

Solo codice JavaScript senza dipendenze:

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
}

Answer 19

I loop possono essere piuttosto interessante quando si utilizza puro JavaScript. Sembra che solo ECMA6 (New 2015 specifica JavaScript) ha ottenuto i loop sotto controllo. Purtroppo, come sto scrivendo questo, entrambi i browser e popolare ambiente di sviluppo integrato (IDE) stanno ancora lottando per supportare completamente le nuove campane e fischietti.

A colpo d'occhio qui è ciò che un ciclo oggetto JavaScript simile a prima ECMA6:

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

Inoltre, so che questo è fuori portata, con questa domanda, ma nel 2011, ECMAScript 5.1 aggiunto il metodo forEach per l'Array solo che in sostanza ha creato un nuovo modo migliore per un ciclo tra le matrici pur lasciando oggetti non iterabili con il vecchio prolisso e ciclo for confusione. Ma la parte strana è che questo nuovo metodo forEach non supporta break che ha portato a tutti i tipi di altri problemi.

In sostanza nel 2011, non c'è un modo reale solida loop in JavaScript diverso da quello che molte biblioteche popolari (jQuery, sottolineatura, ecc) hanno deciso di re-implementare.

Dal 2015, ora abbiamo una migliore allontanato casella di loop (e rompere) qualsiasi tipo di oggetto (inclusi array e stringhe). Ecco quello che un loop in JavaScript alla fine simile a quando la raccomandazione diventa corrente principale:

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

Si noti che la maggior parte dei browser non supportano il codice di cui sopra a partire dal 18 giugno 2016. Anche in Chrome devi abilitare questo flag speciale per farlo funzionare: chrome://flags/#enable-javascript-harmony

Fino a quando questo diventa il nuovo standard, il vecchio metodo può essere ancora utilizzato, ma ci sono anche alternative a biblioteche popolari o anche alternative leggeri per coloro che non utilizzano nessuna di queste librerie.

Answer 20

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

Answer 21

Se qualcuno ha bisogno di un ciclo tra arrayObjects con condizione :

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

Answer 22

Considerando ES6 vorrei aggiungere la mia cucchiaio di zucchero e di fornire più un approccio per iterare le proprietà dell'oggetto.

Dal semplice oggetto JS non è iterabile appena fuori della scatola, non siamo in grado di utilizzare ciclo for..of per iterare sul suo contenuto. Ma nessuno può fermarci per rendere iterabile .

Diamo abbiamo book oggetto.

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

Dal momento che abbiamo reso possiamo usare in questo modo:

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

Oppure, se si conosce la potenza di ES6 , in modo da può certamente rendere il codice di cui sopra molto più breve.

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

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

}

Certo, è possibile applicare tale comportamento per tutti gli oggetti con fare Object iterabile a livello prototype.

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

Inoltre, gli oggetti che rispettano il protocollo iterabile possono essere utilizzati con la nuova funzione ES2015 diffusione operatore così si può leggere i valori di proprietà di oggetto come un array.

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

In alternativa è possibile utilizzare destrutturazione assegnazione:

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

È possibile controllare JSFiddle con tutto il codice che ho fornito sopra.

Answer 23

In ES6 abbiamo simboli ben nota per esporre alcuni metodi in precedenza interni, è possibile utilizzarlo per definire come iteratori lavorano per questo oggetto:

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

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

questo vi darà lo stesso risultato utilizzando ciclo for ... in ES6.

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

Ma la sua importante conoscere le funzionalità ora avete usando ES6!

Answer 24

Vorrei fare questo piuttosto che il controllo obj.hasOwnerProperty all'interno di ogni ciclo for ... in.

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

Answer 25

dal ES06 si possono ottenere i valori di un oggetto array con

let arrValues = Object.values( yourObject) ;

restituire l'array dei valori degli oggetti e non estrarre i valori da Prototipo!!

MDN DOCUMENTI Oggetto.valori()

e per i tasti ( gia ' risposto prima di me qui )

let arrKeys   = Object.keys(yourObject);

Answer 26

Se si desidera iterare immobili non enumerabili , così, è possibile utilizzare Object.getOwnPropertyNames(obj) per restituire un array di tutte le proprietà (enumerable o meno) trovato direttamente su un dato oggetto.

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

Answer 27

In ultima sceneggiatura ES, si può fare qualcosa di simile:

Object.entries(p);

Answer 28

Funzione Object.entries():

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

Answer 29

Ho avuto un problema simile usando angolare, ecco la soluzione che ho trovato.

Passaggio 1. Ottieni tutte le chiavi oggetto. utilizzando Object.keys. Questo metodo restituisce un array di proprie proprietà enumerabili un dato dell'oggetto.

Passaggio 2. Crea un array vuoto. Questa è una in cui tutte le proprietà stanno andando a vivere, dal momento che il nuovo loop ngFor sta per puntare a questo array, dobbiamo catturarli tutti. Passaggio 3. Iterate buttare tutti i tasti, e spingere ognuno nella matrice creata. Ecco come che sembra nel codice.

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

Questo è il link al post originale. https://medium.com/@ papaponmx / over-oggetti-proprietà-con-ngfor-in-loop-angolare-869cd7b2ddcc

Answer 30

Un oggetto diventa un iteratore quando implementa il metodo .Next ()

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