Saya membuat keranjang belanja sederhana di JavaScript sebagai latihan. Saya menggunakan .filter untuk menghapus produk (objek) berdasarkan ID ketika pengguna mengklik untuk menghapus satu item dari keranjang (array). Namun, tentu saja, .filter akan menghapus semua objek dengan ID x dari larik. Saya percaya cara terbaik untuk mencapai apa yang saya cari adalah dengan menghapus maksimal satu objek dengan ID tersebut dari array objek. Adakah yang tahu bagaimana melakukan ini/solusi yang lebih tepat?

JSFiddle: https://jsfiddle.net/LiamMacmillan/zryq62ua/79/

let thisItemId = $(this).parent().data("id");

shoppingCart = shoppingCart.filter(
    item => item.id != thisItemId
);
-1
Liam Macmillan 12 Mei 2021, 03:09

1 menjawab

Jawaban Terbaik

Gunakan findIndex dan splice :

const index = shoppingCart.findIndex(item => item.id === thisItemId);
if (index > -1) {
  shoppingCart.splice(index, 1);
}

Mungkin lebih baik untuk melacak jumlah setiap item di keranjang belanja Anda, akan lebih mudah untuk ditampilkan kepada pengguna, dan membuat situasi ini lebih mudah untuk dikelola.

Contoh dari apa yang mungkin terlihat seperti ini

let shoppingCart = [
  { itemId: 1, count: 5 },
  { itemId: 2, count: 3 }
];

function decreaseCount(itemId) {
  const shoppingCartItem = shoppingCart.find(x => x.itemId === itemId);
  if (shoppingCartItem) {
    if (--shoppingCartItem.count < 1) {
      removeItem(itemId);
    }
  }
}

// slightly less efficient, but uses immutable objects, map, and filter
function decreaseCountImmutable(itemId) {
  shoppingCart = 
   shoppingCart
     .map(x =>  x.itemId !== itemId ? x: ({ ...x, count: x.count -1 }))
     .filter(x => x.count > 0);
}

function increaseCount(itemId) {
  const shoppingCartItem = shoppingCart.find(x => x.itemId === itemId);
  if (shoppingCartItem) {
    shoppingCartItem.count++;
  } else {
    shoppingCart.push({ itemId, count: 1 });
  }
}

// uses immutable objects and map
function increaseCountImmutable(itemId) {
  let foundItem = false;
  shoppingCart = shoppingCart.map(x =>  x.itemId !== itemId ? x: (foundItem = true) && ({ ...x, count: x.count + 1 }));
  if (!foundItem) {
    shoppingCart.push({ itemId, count: 1 });
  } 
}

function removeItem(itemId) {
  shoppingCart = shoppingCart.filter(x => x.itemId !== itemId);
}
3
Callum Morrisson 12 Mei 2021, 02:38