webentwicklung-frage-antwort-db.com.de

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

Ich möchte die in einem Array enthaltenen Objekte durchlaufen 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 anzeigen, oder? Tatsächlich wird jedoch nur das erste Objekt angezeigt. Wenn ich das Array außerhalb der Schleife in einer Konsole protokolliere, werden alle Objekte angezeigt, sodass auf jeden Fall mehr vorhanden ist.

Jedenfalls ist hier das nächste Problem. Wie kann ich mit der Schleife beispielsweise auf Object1.x im Array zugreifen?

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

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

}

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

Mir wurde an anderer Stelle empfohlen, separate Arrays für jede Eigenschaft zu verwenden, aber ich möchte sicherstellen, dass ich diesen Weg zuerst erschöpft habe.

Vielen Dank!

119
FlyingLizard

Verwenden Sie forEach eine eingebaute Array-Funktion. Array.forEach() :

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});
227
Dory Zidon
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}
25
Thierry

In ECMAScript 2015, auch bekannt als ES6, können Sie 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
}

Zum Zeitpunkt der Veröffentlichung dieser Antwort gibt es keine Unterstützung für Internet Explorer, aber durch die Verwendung eines Transpilers wie Traceur oder Babel können Sie neue Javascript-Funktionen wie diese verwenden, ohne sich wirklich darüber Gedanken machen zu müssen, welche Browser welche Funktionen unterstützen.

25

Einige Anwendungsfälle des Durchlaufens eines Arrays auf funktionale Weise in JavaScript:

1. Schleifen Sie einfach durch 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
});

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

2. Prü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. Wandeln Sie in ein neues Array um

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

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

Anmerkung: 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 Anzahl 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}] 

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

 enter image description here

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

 enter image description here

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

Verweise

18
Yuci

Hier ist ein Beispiel, wie du das 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])
  }
}
15
Puyi Severino

myArray[j.x] ist logisch falsch.

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

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

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

Das würde funktionieren. Durchgehendes Array (yourArray) durchlaufen. Führen Sie dann die direkten Eigenschaften jedes Objekts (eachObj) durch. 

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

Es ist sehr einfach, die forEach-Methode seit ES5 + zu verwenden. 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;
    });
4

Hier ist eine weitere Möglichkeit, durch ein Array von Objekten zu iterieren (Sie müssen die jQuery-Bibliothek in Ihr Dokument aufnehmen).

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

Array-Objekt-Iteration mit jQuery, (Verwenden Sie den zweiten Parameter, um die Zeichenfolge zu drucken).

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

Die akzeptierte Antwort verwendet die normale Funktion. Daher muss der gleiche Code mit geringfügiger Änderung mithilfe der Pfeilfunktion in forEach eingestellt werden

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

In $ .each können Sie die Pfeilfunktion wie folgt verwenden

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

0
Gurunath Rao
const person = [
    {
        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;

Seien Sie vorsichtig mit den hinteren Zecken (``)

0
sipher