So durchlaufen Sie ein Array mit Objekten und greifen auf deren Eigenschaften zu

183

Ich möchte durch die in einem Array enthaltenen Objekte blättern und die Eigenschaften jedes einzelnen ändern. Wenn ich das mache:

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

console.log(myArray[j]);

}

Die Konsole sollte jedes Objekt im Array aufrufen, oder? Tatsächlich wird jedoch nur das erste Objekt angezeigt. Wenn ich das Array außerhalb der Schleife auf einer Konsole protokolliere, werden alle Objekte angezeigt, sodass definitiv mehr darin enthalten sind.

Wie auch immer, hier ist das nächste Problem. Wie greife ich über die Schleife beispielsweise auf Object1.x im Array zu?

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

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

}

Dies gibt "undefiniert" zurück. Wieder sagt mir das Konsolenprotokoll außerhalb der Schleife, dass alle Objekte Werte für "x" haben. Wie greife ich in der Schleife auf diese Eigenschaften zu?

Mir wurde an anderer Stelle empfohlen, separate Arrays für jede der Eigenschaften zu verwenden, aber ich möchte sicherstellen, dass ich diese Möglichkeit zuerst ausgeschöpft habe.

Danke dir!

FlyingLizard
quelle
2
Können Sie ein Beispiel Ihres Arrays veröffentlichen? Das erste Code-Snippet scheint korrekt zu sein.
Sirko
jist eine Zahl. Sie haben es oben in Ihrer Schleife definiert.
2
Vielleicht myArrayist das doch nicht wirklich nur ein Array?
Techfoobar
Wir brauchen mehr Informationen darüber, wie myArray aufgebaut ist
bgusach
Bei allen folgenden Antworten und einer akzeptierten Antwort erklärt niemand, warum das Problem auftritt und wie es mit der for-Schleife behoben werden kann. #forEachfunktioniert. Aber die Frage war ungefähr für Schleife.
FreeLightman

Antworten:

336

Verwenden Sie forEach als integrierte Array-Funktion. Array.forEach()::

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});
Dory Zidon
quelle
2
Ich bin froh zu helfen. Javascript wird ziemlich cool. Außerdem ist forEach so viel besser und einfacher, die komplexen Schleifen zu lesen.
Dory Zidon
3
Ich fürchte, es forEachwird in IE 9 nicht unterstützt. Beschuldigen Sie mich nicht! Das Produkt meines Arbeitgebers unterstützt das!
FatCop
1
@DoryZidon: forEach nicht unterstützen break oder stop - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Ankur Loriya
2
Beachten Sie, dass es wichtig ist, dass Sie wirklich ein Array haben. Wenn Sie yourArrayvon so etwas kommen document.getElementsByClassNamewürden, wäre dies eine HTMLCollection, kein Array. Dann könnte diese Frage hilfreich sein.
J0ANMM
Hinweis: forEachBlockiert und unterstützt nicht. awaitDie for...ofSchleife wird.
PotatoFarmer
101

Einige Anwendungsfälle für das Durchlaufen eines Arrays auf funktionale Programmierweise in JavaScript:

1. Durchlaufen Sie einfach ein 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
});

Hinweis: Array.prototype.forEach () ist streng genommen keine funktionale Methode, da die Funktion, die als Eingabeparameter verwendet wird, keinen Wert zurückgeben soll, der daher nicht als reine Funktion angesehen werden kann.

2. Überprüfen Sie, ob eines der Elemente in einem Array einen Test besteht

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. In ein neues Array transformieren

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

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

Hinweis: Die map () -Methode erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.

4. Fassen Sie eine bestimmte Eigenschaft zusammen und berechnen Sie ihren Durchschnitt

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. Erstellen Sie ein neues Array basierend auf dem Original, ohne es jedoch zu ändern

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. Zählen Sie die Nummer jeder Kategorie

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. Rufen Sie eine Teilmenge eines Arrays basierend auf bestimmten Kriterien ab

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

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

Hinweis: Die filter () -Methode erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

8. Sortieren Sie ein 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);

Geben Sie hier die Bildbeschreibung ein

9. Suchen Sie ein Element in einem 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);

Geben Sie hier die Bildbeschreibung ein

Die Methode Array.prototype.find () gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt.

Verweise

Yuci
quelle
1
Dies ist eine fantastische Referenz - ist das Original zu dieser Frage oder haben Sie so etwas woanders gehostet?
Salvatore
Sehr gut erklärte und gründliche Antwort, danke für Ihren Beitrag.
Erica Summers
Hallo, wenn ich den ganzen Namen zeigen und dann vergleichen möchte, weißt du, wie es geht?
Dipgirl
@ Dipgirl, ist es so etwas wie unten? 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
Herzlichen Glückwunsch zur 100. Abstimmung :)
Syed
44

Sie können eine for..of-Schleife verwenden , um ein Array von Objekten zu durchlaufen .

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

Eines der besten Dinge an for..ofSchleifen ist, dass sie mehr als nur Arrays durchlaufen können. Sie können über jede Art von Iterable iterieren, einschließlich Karten und Objekten. Stellen Sie sicher, dass Sie einen Transpiler oder etwas wie TypeScript verwenden, wenn Sie ältere Browser unterstützen müssen.

Wenn Sie über eine Map iterieren möchten, ist die Syntax weitgehend dieselbe wie oben, außer dass sowohl der Schlüssel als auch der Wert behandelt werden.

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

Ich benutze for..ofSchleifen für so ziemlich jede Art von Iteration, die ich in Javascript mache. Eines der coolsten Dinge ist außerdem, dass sie auch mit async / await arbeiten.

Dwayne Charrington
quelle
29
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}
Thierry
quelle
Das ist jedoch nur die Lösung für die zweite Frage.
Sirko
18

Hier ist ein Beispiel, wie du es machen kannst :)

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

Puyi Severino
quelle
Wie würden Sie den Wert der trackEigenschaft für jedes Element erhalten und ihn einer Variablen zuweisen, die in einem anderen Teil des Codes verwendet oder interpoliert werden soll?
Chris22
7

Das Durchlaufen einer Reihe von Objekten ist eine ziemlich grundlegende Funktionalität. Das funktioniert bei mir.

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

MangoPapa7
quelle
6

myArray[j.x] ist logisch falsch.

Verwenden Sie (myArray[j].x);stattdessen

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}
Vivek Sadh
quelle
@ Cyborgx37 Oh .. ich meine, jx wird als falscher Variablenname behandelt.
Vivek Sadh
5

Mit der forEach-Methode seit ES5 + ist das ganz einfach. Sie können jede Eigenschaft jedes Objekts in Ihrem Array direkt ändern.

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

Wenn Sie für jedes Objekt auf eine bestimmte Eigenschaft zugreifen möchten:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });
Julien Bouteloup
quelle
4

Hier ist eine andere Möglichkeit, ein Array von Objekten zu durchlaufen (für diese müssen Sie die jQuery-Bibliothek in Ihr Dokument aufnehmen).

$.each(array, function(element) {
  // do some operations with each element... 
});
Partha Roy
quelle
1
In Ihrer Antwort fehlen wichtige Informationen über die Notwendigkeit, die jQuery-Bibliothek zu laden, um die $.eachMethode zu verwenden .
Matthew Morek
4

Das würde funktionieren. Durchlaufendes Array (yourArray). Durchlaufen Sie dann die direkten Eigenschaften jedes Objekts (eachObj).

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

Array-Objektiteration mit jQuery (verwenden Sie den zweiten Parameter, um die Zeichenfolge zu drucken).

$.each(array, function(index, item) {
       console.log(index, item);
});
MS
quelle
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);
})

Dies ist einer der Wege, wie ich es erreichen konnte.

Gurunath Rao
quelle
1

Die akzeptierte Antwort verwendet die normale Funktion. Veröffentlichen Sie also denselben Code mit geringfügigen Änderungen mithilfe der Pfeilfunktion auf forEach

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

Auch in $ .each können Sie die Pfeilfunktion wie unten verwenden

 $.each(array, (item, index) => {
       console.log(index, item);
 });
Hemadri Dasari
quelle
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;

Sei vorsichtig mit den hinteren Zecken (`)

Sipher
quelle
0

Das könnte jemandem helfen. Vielleicht ist es ein Fehler in Node.

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

Das funktioniert nicht:

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

Aber das funktioniert ...

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

Das funktioniert auch ...

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

ABER einfach die Reihenfolge umzukehren funktioniert nicht. Ich vermute, es gibt hier eine Art interne Optimierung, die Node kaputt macht.

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

Der Fehler besagt, dass das Array undefiniert ist, aber nicht: - / Node v11.15.0

PJ Brunet
quelle