数组的高级用法：Array.filter()，Array.forEach()，Array.find()，Array.reduce()

state:{
  cart:[
         {
            goods_count: 1
            goods_id: 1
            goods_name: "vivo"
            goods_price: 2449
            goods_small_logo: "https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/9
                        7145/27/38119/48989/64354c50F90b4d6bf/dcbf0f37dd534acf.jpg!q80.dpg"
            goods_state: true
         }，
            goods_count: 1
            goods_id: 2
            goods_name: "vivo"
            goods_price: 2449
            goods_small_logo: "https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/9
                        7145/27/38119/48989/64354c50F90b4d6bf/dcbf0f37dd534acf.jpg!q80.dpg"
            goods_state: true
         }，
      ],
}

  goods_id: this.goods_info.goods_id,       // 商品的Id
         goods_name: this.goods_info.goods_name,   // 商品的名称
         goods_price: this.goods_info.goods_price, // 商品的价格
         goods_count: 1,                           // 商品的数量
         goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
         goods_state: true                         // 商品的勾选状态

 

1.Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

运用案例：

说明： state.cart是个数组，goods_id是传递进来的参数，配合箭头函数使用   意思是cart数组里面的goods_id和传递进来的goods_id判断

// 根据id 删除对应的商品
        removeGoodsByid(state, goods_id) {
            // 把ID不相等的商品重新赋值给数组cart ,它们是不被删除的   filter数组过滤器
            state.cart = state.cart.filter(x => x.goods_id !== goods_id)
        },

2.Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

运用案例：

说明：state.car是个数组，对它进行循环第一个参数state就是它本身，newState是传递进来的参数 ，对它进行循环，配合箭头函数，循环出来的goods_state值进行赋值newState

// 更新购物车中所有商品的勾选状态   实现全选的正选和反选
        updateAllGoodsState(state, newState) {
            state.cart.forEach(x => x.goods_state = newState)
        }

3.Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

运用案例：

说明：通过数组里商品的id和外界传过来的id  判断cart数组里 有没有该商品

    addToCart(state, goods) {
            // 通过数组里商品的id和外界传过来的id  判断cart数组里 有没有该商品
            const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
            // 如果没有,就push进来
            if (!findResult) {
                state.cart.push(goods)
            } else {
                // 如果已经有就让数量自增+1
                findResult.goods_count++
            }

        },

4.Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。

reduce() 方法不会减少原始数组。

有4个参数total, value, index, array

运用案例：

说明：计算数组里面goods_count数量的总和    后面可以放个初始值0

state.cart.reduce((total, item) => total += item.goods_count, 0)