Javascript ES6 / ES5 im Array finden und ändern

Ich habe eine Reihe von Objekten. Ich möchte nach einem Feld suchen und es dann ändern:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

Ich möchte, dass das ursprüngliche Objekt geändert wird. Wie? (Es ist mir egal, ob es auch in lodash sein wird)

Mit findIndex können Sie den Index im Array des Objekts suchen und bei Bedarf ersetzen:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundIndex = items.findIndex(x => x.id == item.id);
items[foundIndex] = item;

Dies setzt eindeutige IDs voraus. Wenn Ihre IDs doppelt vorhanden sind (wie in Ihrem Beispiel), ist es wahrscheinlich besser, wenn Sie forEach verwenden:

items.forEach((element, index) => {
    if(element.id === item.id) {
        items[index] = item;
    }
});

Mein bester Ansatz ist:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

items[items.findIndex(el => el.id === item.id)] = item;

Referenz für findIndex

Und falls Sie nicht durch ein neues Objekt ersetzen möchten, sondern stattdessen die Felder von kopieren möchten item, können Sie Folgendes verwenden Object.assign:

Object.assign(items[items.findIndex(el => el.id === item.id)], item)

als Alternative mit .map():

Object.assign(items, items.map(el => el.id === item.id? item : el))

Funktionsansatz :

Ändern Sie das Array nicht, verwenden Sie ein neues, damit Sie keine Nebenwirkungen erzeugen

const updatedItems = items.map(el => el.id === item.id ? item : el)

Ein anderer Ansatz ist die Verwendung von Spleiß .

Das splice()Verfahren ändert den Inhalt eines Felds durch Entfernen oder Ersetzen von vorhandenen Elementen und / oder das Hinzufügen neue Elemente an Ort und Stelle .

NB: Wenn Sie mit reaktiven Frameworks arbeiten, wird die "Ansicht" aktualisiert, und Ihr Array "weiß", dass Sie sie aktualisiert haben.

Antworten :

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

let foundIndex = items.findIndex(element => element.id === item.id)
items.splice(foundIndex, 1, item)

Und falls Sie nur einen Wert eines Elements ändern möchten, können Sie die Suchfunktion verwenden:

// Retrieve item and assign ref to updatedItem
let updatedItem = items.find((element) => { return element.id === item.id })

// Modify object property
updatedItem.aProp = ds.aProp

Bei einem geänderten Objekt und einem Array:

const item = {...}
let items = [{id:2}, {id:3}, {id:4}];

Aktualisieren Sie das Array mit dem neuen Objekt, indem Sie über das Array iterieren:

items = items.map(x => (x.id === item.id) ? item : x)

Kann Gebrauch sein Filter .

const list = [{id:0}, {id:1}, {id:2}];
let listCopy = [...list];
let filteredDataSource = listCopy.filter((item) => {
       if (item.id === 1) {
           item.id = 12345;
        }

        return item;
    });
console.log(filteredDataSource);

Array [Objekt {ID: 0}, Objekt {ID: 12345}, Objekt {ID: 2}]

arbeitete für mich

let returnPayments = [ ...this.payments ];

returnPayments[this.payments.findIndex(x => x.id == this.payment.id)] = this.payment;

Während die meisten der vorhandenen Antworten großartig sind, möchte ich eine Antwort mit einer traditionellen for-Schleife einfügen, die auch hier berücksichtigt werden sollte. Das OP fordert eine Antwort an, die ES5 / ES6-kompatibel ist, und es gilt die traditionelle for-Schleife :)

Das Problem bei der Verwendung von Array-Funktionen in diesem Szenario besteht darin, dass sie keine Objekte mutieren. In diesem Fall ist jedoch eine Mutation erforderlich. Der Leistungsgewinn bei der Verwendung einer herkömmlichen for-Schleife ist nur ein (großer) Bonus.

const findThis = 2;
const items = [{id:1, ...}, {id:2, ...}, {id:3, ...}];

for (let i = 0, l = items.length; i < l; ++i) {
  if (items[i].id === findThis) {
    items[i].iAmChanged = true;
    break;
  }
}

Obwohl ich ein großer Fan von Array-Funktionen bin, lassen Sie sie nicht das einzige Werkzeug in Ihrer Toolbox sein. Wenn der Zweck darin besteht, das Array zu mutieren, passen sie nicht am besten.

Einzeiler mit Spread Operator.

 const updatedData = originalData.map(x => (x.id === id ? { ...x, updatedField: 1 } : x));