Web刷题记录——购物车

一、代码及解题思路

1、添加方法

（1）逻辑

a、需要判断本次添加的商品是否存在于购物车中【根据id值是否相等判断】

b、如果不存在，即设置num=1，并追加本次商品

c、如果存在，即只需设置数值+1

    【注意】 ：这里需要变动的数据是购物车，因为页面根据该数据渲染

（2） 代码

addToCart(goods) 
// TODO：修改当前函数，实现购物车加入商品需求
// console.log(goods.id);
// 1、从【cartList】中浅拷贝出已经存在的商品数组
let res = this.cartList.filter((item) => {
    return item.id == goods.id
})

// 2、如果数组长度不为零即商品存在
// 那么我就更改【浅拷贝数组的num】这样【原数组cartList】也就随之改变
   if (res.length) {
     res[0].num += 1
   } else {
     goods.num = 1;
     this.cartList.push(goods);
   }
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},

2、删除方法

（1）逻辑

a、因为要删除元素，所以要拿到元素索引【findIndex】

b、判断当前num是否>1,是则继续减，否则删除整个元素

（2）代码

removeGoods(goods) {
                // TODO：补全代码实现需求

                // 1、拿到添加商品的索引
                let index = this.cartList.findIndex((item) => {
                    return item.id == goods.id
                })
                console.log(index);

                // 2、索引存在
                if (index !== -1) {
                    // 2.1 不小于1 继续减
                    if (this.cartList[index].num > 1) {
                        this.cartList[index].num -= 1
                    } else {
                        // 2.2 小于1 调用删除方法【splice】
                        this.cartList.splice(index, 1)
                    }

                }
            }
        }

二、涉及到的知识

1、filter【浅拷贝】

【理解】浅拷贝出满足条件的数组，因此在改变该数组时，原数组也会改变

（1）语法

filter(callbackFn)
filter(callbackFn, thisArg)

 （2）例子

const fruits = ["apple", "banana", "grapes", "mango", "orange"];

/**
 * 根据搜索条件（查询）筛选数组项
 */
function filterItems(arr, query) {
  return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}

console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']
console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']

2、findIndex【找索引】

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

（1）语法

findIndex(callbackFn)
findIndex(callbackFn, thisArg)

 （2）例子

console.log([1, , 3].findIndex((x) => x === undefined)); // 1

3、splice【删除】

【MDN】splice() 方法就地移除或者替换已存在的元素和/或添加新的元素。

要创建一个删除和/或替换部分内容而不改变原数组的新数组，请使用 toSpliced()。

（1）语法

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

（2）例子

const myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
const removed = myFish.splice(2, 2);

// myFish 是 ["parrot", "anemone", "sturgeon"]
// removed 是 ["blue", "trumpet"]