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

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!

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

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

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

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

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

Verweise

• Array.prototype.some ()
• Array.prototype.forEach ()
• Array.prototype.map ()
• Array.prototype.filter ()
• Array.prototype.sort ()
• Syntax verbreiten
• Array.prototype.find ()

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.

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

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

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

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

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

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

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

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

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

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.

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

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 (`)

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