一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
第八题：购物车
介绍：
网上购物已成为现代人生活中不可或缺的一部分，那么人们最常用到的购物车功能又是如何实现的呢？
本题需要在以提高的基础项目中，使用Vue2.x的知识，解决购物车商品管理过程中遇到的问题。
目标：
-
修改adToCart方法，实现将商品加入购物车的功能。即：
（1）点击“加入购物车”按钮后，如果购物车中不存在改商品，则将改商品添加到购物车末尾，并初始化数量为1；
（2）如果购物车已存在改商品，则只在原数量上+1即可。
-
完善removeGoods方法，实现移出购物车商品功能。即：
（1）点击购物车商品后对应的减号（“-”）按钮，将其数量在原数量上+1；
（2）如果减后数量为0，则将该商品从购物车中删除。
几个解题关键点：
-
检查是否有该商品了。使用
Array.some(function(el){return boolean}),返回值为布尔类型。确认商品是否存在 -
查找商品在购物车的索引。用
forEach()逐个查找，找到的化返回商品在购物车的id -
数量为0的删删除。数组函数
Array.splice(索引位置，删除元素个数)
关键代码：
new Vue({
el: '#app',
data: {
cartList:[],
goodsList:[]
},
mounted() {
this.goodsList = GoodsArr;
},
methods:{
addToCart(goods){
// TODO：修改当前函数，实现购物车加入商品需求
let flag = this.cartList.some(el=>{
return el.id == goods.id
})
if (flag) {
let gindex = 0;
this.cartList.forEach((el,index) => {
if(el.id == goods.id){
gindex = index
}
});
this.cartList[gindex].num++
return
}else{
goods.num = 1;
this.cartList.push(goods);
this.cartList = JSON.parse(JSON.stringify(this.cartList));
return
}
},
removeGoods(goods){
// TODO：补全代码实现需求
let gindex = 0;
this.cartList.forEach((el,index) => {
if(el.id == goods.id){
gindex = index
}
});
if(this.cartList[gindex].num == 1){
this.cartList.splice(gindex,1)
}
else{
this.cartList[gindex].num--
}
}
}
});
第九题：寻找狼人
介绍：
“狼人杀”是一款多人参与e策略类桌面游戏。本题我们一起完成一个简易的狼人杀游戏，让我们找到其中的狼人。
解题思路：
这里要写的代码比较少，如果了解js原型的话这道题其实也简单。要实现一个Array.filter()方法。
Array.prototype指代的是数组的原型，即所有的数组。
Array.prototype.myarray是给原型添加一个myarray属性,添加后所有的数组就都会继承到myarray这个属性。这是es5的面向对象语法了。
而下面这段代码就是将一个函数赋值给myarray,同时这个函数参数是一个返回值为布尔类型的闭包函数。
this可以获取到原型，可以获取到元素本身。
我们为
vue中添加属性是否也是用形如：Vue.prototype.属性 = 值的形式。在vue中调用的时候是不是用this.属性。如果直接输出this就是Vue实例了
关键代码：js/myarray.js
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
let result = []
this.forEach(el=>{
if(cb(el)){
result.push(el)
}
})
return result
};
效果：
第10题：课程列表
介绍：
分页是前端页面中鼻部可少的一项功能，下面让我们一起完成一个课程列表的分页吧。
目标：
解题思路：
题目只给了数据文件、axois、没有任何框架因此需要使用原生js来完成这个功能。
**关键点：**分页。使用Array.slice(开始下标，结束结尾)来实现
关键代码：
js/index.js
let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数
// TODO：待补充代码
let all = []
let list = document.getElementById("list")
let pageSize=5
let pagination = document.getElementById("pagination")
function render(data){
let html = ''
data.forEach(item=>{
html += ` <div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">${item.name}</h5>
<small>${item.price ? item.price.toFixed(2) : ''}</small>
</div>
<p class="mb-1">
${item.description}
</p>
</a>
</div>`;
})
list.innerHTML = html;
// 分页
pageNum <= 1 ? prev.classList.add('disabled') : prev.classList.remove('disabled')
pageNum >= maxPage ? next.classList.add('disabled'): next.classList.remove('disabled')
pagination.innerHTML = `共${maxPage}页，当前${pageNum}页`
}
window.onload = function(){
axios.get('./js/carlist.json').then(res=>{
all = res.data
maxPage = Math.ceil(all.length/pageSize)
let start = (pageNum -1) * pageSize
let end = start + pageSize
render(all.slice(start,end))
})
}
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
// TODO：待补充代码
if(pageNum <= 1){
return
}
pageNum--
let start = (pageNum -1) * pageSize
let end = start + pageSize
render(all.slice(start,end))
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
// TODO：待补充代码
if(pageNum >= maxPage){
return
}
pageNum++
let start = (pageNum -1) * pageSize
let end = start + pageSize
render(all.slice(start,end))
};
效果：
