Javascript ES6 / ES5 dizide bul ve değiştir

Bir dizi nesnem var. Bir alana göre bulmak ve sonra değiştirmek istiyorum:

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

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

Orijinal nesneyi değiştirmesini istiyorum. Nasıl? (Lodash'ta olup olmayacağı da umurumda değil)

Dizini nesne dizisinde bulmak ve gerektiği gibi değiştirmek için findIndex'i kullanabilirsiniz :

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

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

Bu, benzersiz kimlikler olduğunu varsayar. Kimlikleriniz yineleniyorsa (örneğinizde olduğu gibi), muhtemelen forEach'i kullanmanız daha iyidir:

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

En iyi yaklaşımım:

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

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

FindIndex için referans

Yeni nesneyle değiştirmek istemiyorsanız, bunun yerine alanlarını kopyalamak itemistiyorsanız, şunu kullanabilirsiniz Object.assign:

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

şununla alternatif olarak .map():

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

Fonksiyonel yaklaşım :

Diziyi değiştirmeyin, yeni bir tane kullanın, böylece yan etkiler oluşturmazsınız

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

Diğer bir yaklaşım, splice kullanmaktır .

splice()Yöntem, çıkarma veya varolan öğeleri değiştirerek ve / veya yeni elemanları eklenerek bir dizi içeriğini değiştirir yerine .

Not: Reaktif çerçevelerle çalışıyorsanız, "görünümü", yani onu güncellediğinizi "bilerek" dizinizi güncelleyecektir.

Cevap :

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

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

Ve bir öğenin yalnızca bir değerini değiştirmek istiyorsanız, bul işlevini kullanabilirsiniz :

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

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

Değişen bir nesne ve bir dizi verildiğinde:

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

Dizi üzerinde yineleyerek diziyi yeni nesneyle güncelleyin:

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

Kullanım olabilir Filtre .

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

Dizi [Nesne {id: 0}, Nesne {id: 12345}, Nesne {id: 2}]

benim için çalıştı

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

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

Mevcut yanıtların çoğu harika olsa da, burada da dikkate alınması gereken geleneksel bir for döngüsü kullanan bir yanıt eklemek istiyorum. OP, ES5 / ES6 uyumlu bir yanıt ister ve geleneksel for döngüsü geçerlidir :)

Bu senaryoda dizi işlevlerini kullanmanın sorunu, nesneleri değiştirmemeleridir, ancak bu durumda mutasyon bir gerekliliktir. Geleneksel bir for döngüsü kullanmanın performans kazancı sadece (çok büyük) bir 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;
  }
}

Dizi işlevlerinin büyük bir hayranı olsam da, bunların alet kutunuzdaki tek araç olmasına izin vermeyin. Amaç diziyi değiştirmekse, bunlar en uygun olanlar değildir.

Yayılma operatörünü kullanan tek astar.

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