Come eseguire il loop in un array contenente oggetti e accedere alle loro proprietà


189

Voglio scorrere gli oggetti contenuti in un array e modificare le proprietà di ciascuno. Se lo faccio:

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

La console dovrebbe visualizzare tutti gli oggetti dell'array, giusto? Ma in realtà visualizza solo il primo oggetto. se consolo registro l'array al di fuori del ciclo, tutti gli oggetti appaiono, quindi c'è sicuramente di più.

Comunque, ecco il prossimo problema. Come accedo, ad esempio Object1.x nell'array, usando il ciclo?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

Questo restituisce "undefined". Ancora una volta il registro della console all'esterno del ciclo mi dice che tutti gli oggetti hanno valori per "x". Come accedo a queste proprietà nel loop?

Mi è stato consigliato altrove di utilizzare array separati per ciascuna delle proprietà, ma prima voglio assicurarmi di aver esaurito questa strada.

Grazie!


2
Puoi pubblicare un campione del tuo array? Il primo frammento di codice sembra corretto.
Sirko,

jè un numero. L'hai definito all'inizio del tuo ciclo.

2
Forse myArraynon è davvero solo un array dopo tutto ??
techfoobar,

abbiamo bisogno di maggiori informazioni su come è costruito myArray
bgusach,

Con tutte le risposte seguenti e con una risposta accettata nessuno spiega perché si verifica il problema e come risolverlo con for loop. #forEachlavori. Ma la domanda riguardava il loop.
FreeLightman,

Risposte:


341

Utilizzare forOach è una funzione di array integrata. Array.forEach():

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});

2
lieto di aiutarti..Javascript sta diventando piuttosto figo..più il forOgnuno è molto meglio e più facile da leggere i cicli complessi ..
Dory Zidon

3
Temo che forEachnon sia supportato in Internet Explorer 9. Non incolpare me! Il prodotto del mio datore di lavoro lo supporta!
fatCop

1
@DoryZidon: forOach non supporta break o stop - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Ankur Loriya

2
Si noti che è importante disporre davvero di un array. Se ottenessi yourArrayda qualcosa del genere document.getElementsByClassNamesarebbe un HTMLCollection, non un array. Quindi questa domanda potrebbe essere utile.
J0ANMM,

Nota: forEachblocca e non supporta await. Il for...ofloop lo farà.
PotatoFarmer il

108

Alcuni casi d'uso di looping attraverso un array nel modo di programmazione funzionale in JavaScript:

1. Basta passare in rassegna un array

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

Nota: Array.prototype.forEach () non è un modo funzionale in senso stretto, in quanto la funzione che assume come parametro di input non dovrebbe restituire un valore, che quindi non può essere considerato come una funzione pura.

2. Controllare se uno degli elementi in un array supera un test

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. Trasforma in un nuovo array

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Nota: il metodo map () crea un nuovo array con i risultati della chiamata di una funzione fornita su ogni elemento dell'array chiamante.

4. Sommare una particolare proprietà e calcolarne la media

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. Creare un nuovo array basato sull'originale ma senza modificarlo

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. Contare il numero di ciascuna categoria

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. Recupera un sottoinsieme di un array in base a criteri particolari

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

Nota: il metodo filter () crea un nuovo array con tutti gli elementi che superano il test implementato dalla funzione fornita.

8. Ordinare un array

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

inserisci qui la descrizione dell'immagine

9. Trova un elemento in un array

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

inserisci qui la descrizione dell'immagine

Il metodo Array.prototype.find () restituisce il valore del primo elemento dell'array che soddisfa la funzione di test fornita.

Riferimenti


1
Questo è un riferimento fantastico - è originale per questa domanda o hai qualcosa di simile ospitato altrove?
Salvatore

Risposta molto ben spiegata e completa, grazie per il contributo.
Erica Summers,

ciao, se voglio mostrare tutto il nome e poi fare un confronto, sai come farlo?
dipgirl,

@dipgirl, è qualcosa come sotto? const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const sortByAge = people.map(p => { console.log(p.name) return p }).sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge);
Yuci,

1
Congratulazioni per il centesimo voto :)
Syed il

46

È possibile utilizzare un ciclo for..of per scorrere su una matrice di oggetti.

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

Una delle cose migliori dei for..ofloop è che possono iterare su più di semplici array. Puoi iterare su qualsiasi tipo di iterabile, incluse mappe e oggetti. Assicurati di utilizzare un transpiler o qualcosa di simile a TypeScript se devi supportare browser meno recenti.

Se si desidera eseguire l'iterazione su una mappa, la sintassi è sostanzialmente la stessa di quella sopra, tranne per il fatto che gestisce sia la chiave che il valore.

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

Uso i for..ofloop per praticamente ogni tipo di iterazione che faccio in Javascript. Inoltre, una delle cose più interessanti è che lavorano anche con asincrono / wait.


29
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

Questa è solo la soluzione per la seconda domanda.
Sirko,

18

Ecco un esempio su come puoi farlo :)

var students = [{
    name: "Mike",
    track: "track-a",
    achievements: 23,
    points: 400,
  },
  {
    name: "james",
    track: "track-a",
    achievements: 2,
    points: 21,
  },
]

students.forEach(myFunction);

function myFunction(item, index) {
  for (var key in item) {
    console.log(item[key])
  }
}


come otterresti il ​​valore della trackproprietà per ciascun elemento e assegnarlo a una variabile da utilizzare o interpolare in un'altra parte del codice?
Chris22

7

Il ciclo attraverso una serie di oggetti è una funzionalità piuttosto fondamentale. Questo è ciò che funziona per me.

var person = [];
person[0] = {
  firstName: "John",
  lastName: "Doe",
  age: 60
};

var i, item;

for (i = 0; i < person.length; i++) {
  for (item in person[i]) {
    document.write(item + ": " + person[i][item] + "<br>");
  }
}


6

myArray[j.x] è logicamente errato.

Usa (myArray[j].x);invece

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

@ Cyborgx37 Oh .. Voglio dire, jx è trattato come un nome variabile che non è corretto.
Vivek Sadh,

5

È davvero semplice usare il metodo forEach da ES5 +. È possibile modificare direttamente ciascuna proprietà di ciascun oggetto nell'array.

myArray.forEach(function (arrayElem){ 
  arrayElem = newPropertyValue;
});

Se si desidera accedere a una proprietà specifica su ciascun oggetto:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });

4

Ecco un altro modo di scorrere attraverso una matrice di oggetti (per questi è necessario includere la libreria jQuery nel documento).

$.each(array, function(element) {
  // do some operations with each element... 
});

1
Nella tua risposta mancano informazioni critiche sulla necessità di caricare la libreria jQuery per utilizzare il $.eachmetodo.
Matthew Morek,

4

Questo funzionerebbe. Matrice di loop completo (yourArray). Quindi scorrere le proprietà dirette di ciascun oggetto (eachObj).

yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

2

Iterazione di oggetti array, usando jQuery (usare il secondo parametro per stampare la stringa).

$.each(array, function(index, item) {
       console.log(index, item);
});

2

var c = {
    myProperty: [
        { name: 'this' },
        { name: 'can' },
        { name: 'get' },
        { name: 'crazy' }
    ]
};

c.myProperty.forEach(function(myProperty_element) {
    var x = myProperty_element.name;
    console.log('the name of the member is : ' + x);
})

Questo è uno dei modi in cui sono stato in grado di raggiungerlo.


1

La risposta accettata utilizza la funzione normale. Quindi pubblicare lo stesso codice con lievi modifiche usando la funzione freccia su ForEach

  yourArray.forEach(arrayItem => {
      var x = arrayItem.prop1 + 2;
      console.log(x);
  });

Anche in $ .each puoi usare la funzione freccia come sotto

 $.each(array, (item, index) => {
       console.log(index, item);
 });

1

const jobs = [
    {
        name: "sipher",
        family: "sipherplus",
        job: "Devops"
    },
    {
        name: "john",
        family: "Doe",
        job: "Devops"
    },
    {
        name: "jim",
        family: "smith",
        job: "Devops"
    }
];

const txt = 
   ` <ul>
        ${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
    </ul>`
;

document.body.innerHTML = txt;

Fai attenzione alle zecche posteriori (`)


0

Questo potrebbe aiutare qualcuno. Forse è un bug in Node.

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

Questo non funziona:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

Ma questo funziona ...

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

Funziona anche questo ...

while ((arr[c]) && (arr[c].name)) { c++; }

MA semplicemente l'inversione dell'ordine non funziona. Immagino che qui ci sia una sorta di ottimizzazione interna che rompe Node.

while ((arr[c].name) && (arr[c])) { c++; }

L'errore dice che l'array non è definito, ma non è: - / Nodo v11.15.0

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.