Javascript ES6 / ES5 temukan dalam array dan ubah

Saya memiliki berbagai objek. Saya ingin mencari berdasarkan beberapa bidang, dan kemudian mengubahnya:

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

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

Saya ingin mengubah objek asli. Bagaimana? (Saya tidak peduli apakah itu akan di lodash juga)

Anda dapat menggunakan findIndex untuk menemukan indeks dalam array objek dan menggantinya sesuai kebutuhan:

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

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

Ini mengasumsikan ID unik. Jika ID Anda digandakan (seperti dalam contoh Anda), mungkin lebih baik jika Anda menggunakan forEach:

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

Pendekatan terbaik saya adalah:

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

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

Referensi untuk findIndex

Dan jika Anda tidak ingin mengganti dengan objek baru, tetapi alih-alih menyalin bidang item, Anda dapat menggunakan Object.assign:

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

sebagai alternatif dengan .map():

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

Pendekatan fungsional :

Jangan memodifikasi array, gunakan yang baru, jadi Anda tidak menghasilkan efek samping

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

Pendekatan lain adalah dengan menggunakan sambungan .

The splice()Metode mengubah isi array dengan menghapus atau mengganti elemen yang ada dan / atau menambahkan elemen baru di tempat .

NB: Jika Anda bekerja dengan kerangka kerja reaktif, itu akan memperbarui "view", array Anda "mengetahui" Anda telah memperbaruinya.

Jawaban:

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

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

Dan jika Anda hanya ingin mengubah nilai suatu item, Anda dapat menggunakan fungsi find :

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

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

Diberikan objek dan array yang diubah:

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

Perbarui array dengan objek baru dengan mengulangi array:

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

Mungkin menggunakan 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 [Objek {id: 0}, Objek {id: 12345}, Obyek {id: 2}]

bekerja untukku

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

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

Meskipun sebagian besar jawaban yang ada bagus, saya ingin memasukkan jawaban menggunakan tradisional untuk loop, yang juga harus dipertimbangkan di sini. OP meminta jawaban yang kompatibel dengan ES5 / ES6, dan tradisional untuk loop berlaku :)

Masalah dengan menggunakan fungsi array dalam skenario ini, adalah bahwa mereka tidak bermutasi objek, tetapi dalam kasus ini, mutasi adalah persyaratan. Keuntungan kinerja menggunakan loop tradisional untuk hanya bonus (besar).

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

Meskipun saya penggemar berat fungsi array, jangan biarkan mereka menjadi satu-satunya alat di kotak alat Anda. Jika tujuannya bermutasi array, mereka bukan yang paling cocok.

Satu-liner menggunakan operator spread.

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