主页 / 问题 / 1580392
Accepted
Arteil
Asked:2024-05-15 21:05:29 +0000 UTC2024-05-15 21:05:29 +0000 UTC

带循环的函数无法正常工作

  • 772

该函数将商品添加到购物车。问题在于检查购物车中是否有相同的商品，但尺寸不同。

代码：

addCart(merch) {
  if(localStorage.getItem('cart')) {
    let array = JSON.parse(localStorage.getItem('cart'));

    for(let i = 0; i < array.length; i++) {
      if(merch.id === array[i].id && this.size === array[i].size) {
        array[i].count++
        localStorage.removeItem('cart')
        localStorage.setItem('cart', JSON.stringify(array));

      } else {
        let product = {
          id: merch.id,
          name: merch.real_name,
          image: merch.image,
          thumbnail: merch.thumbnail,
          price: merch.price,
          size: this.size,
          count: 1
        }

        array.push(product)
        localStorage.setItem('cart', JSON.stringify(array));
      }
    }
  } else {
    let array = []
    let product = {
      id: merch.id,
      name: merch.real_name,
      image: merch.image,
      thumbnail: merch.thumbnail,
      price: merch.price,
      size: this.size,
      count: 1
    }

    array.push(product)

    localStorage.setItem('cart', JSON.stringify(array));
  }
}

我需要的一个例子：

[
    {
       id: 0,
       name: Продукт 1,
       size: S,
       count: 2
    },
    {
       id: 1,
       name: Продукт 2,
       size: XS,
       count: 1
    }
]

我得到：

[
    {
       id: 0,
       name: Продукт 1,
       size: S,
       count: 2
    },
    {
       id: 0,
       name: Продукт 1,
       size: S,
       count: 2
    },
    {
       id: 1,
       name: Продукт 2,
       size: XS,
       count: 1
    }
]

在这里您可以看到该函数的行为方式 https://playcode.io/

javascript

1 个回答

  1. Best Answer

    for循环不适合解决元素唯一性的问题。

    如果有 3 个具有不同 id 的元素，那么即使您找到了所需的元素，循环也会进一步运行，并且在 else 内部将为您创建新元素。

    当你添加数组并且你的数组增加时，你也会改变数组array.length，这会创建一个新的循环迭代。

    您需要取出保存的数组，搜索整个数组，如果找到，则增加它，否则添加

    这是一个经过一些优化的示例工作代码。要查找数组中的元素， find 方法是最好的

      addCart(merch) {
    // Создаем массив
    const array = JSON.parse(localStorage.getItem('cart')) ?? [];
    // Если данные есть
    if(array.length) {
      // Ищем в массиве элемент с переданным id. Если найдтся, этот элемент будет возвращен
      const elem = array.find(item => item.id === merch.id && item.size === this.size);
      // Если нашли, увеличиваем
      if (elem) {
        elem.count++;
      } else { // если не нашли, пушим
        let product = {
          id: merch.id,
          name: merch.real_name,
          image: merch.image,
          thumbnail: merch.thumbnail,
          price: merch.price,
          size: this.size,
          count: 1
        }
        array.push(product);
      }
    } else {
      let product = {
        id: merch.id,
        name: merch.real_name,
        image: merch.image,
        thumbnail: merch.thumbnail,
        price: merch.price,
        size: this.size,
        count: 1
      }

      array.push(product)
    }
    // Сохраняем результат в хранилище
    localStorage.setItem('cart', JSON.stringify(array));
  }
    UPD

    快捷函数（方法）

      addCart(merch) {
    const array = JSON.parse(localStorage.getItem('cart')) ?? [];
    const elem = array.find(item => item.id === merch.id && item.size === this.size);
    if (elem) {
      elem.count++;
    } else {
      let product = {
        id: merch.id,
        name: merch.real_name,
        image: merch.image,
        thumbnail: merch.thumbnail,
        price: merch.price,
        size: this.size,
        count: 1
      }
      array.push(product);
    }
    localStorage.setItem('cart', JSON.stringify(array));
  }
    • 2

相关问题