购物车数据处理功能描述
- 可以将得到的数据渲染到页面上
- 对数据进行处理,改变格式,并能根据单价算出总价
实现效果
购物车数据处理实现步骤
1. 准备阶段
了解数组,对象,字符串的常用方法
代码 | 含义 |
---|---|
数组.join(‘符号’) | 将数组以自定义符号连接成字符串 |
字符串.split(‘符号’) | 将字符串以自定义符号分成数组 |
Object.keys(对象) | 获取对象中所有的属性名,并返回到一个数组中 |
Object.values(对象) | 获取对象中所有的属性值,并返回到一个数组中 |
数组.reduce((prev,next)=>prev+next,初始值) | 将数组中的所有值相加在一起,返回一个数,如果初始值不为零,则额外加一个初始值,初始值不能不写 |
数字.toFixed(num) | 让数字保留num位小数 |
获得初始数据
const goodsList = [
{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: 289.9,
picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
count: 2,
spec: { color: '白色' }
},
{
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: 109.8,
picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
count: 3,
spec: { size: '40cm*40cm', color: '黑色' }
},
{
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: 488,
picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
count: 1,
spec: { color: '青色', sum: '一大四小' }
},
{
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: 139,
picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
count: 1,
spec: { size: '小号', color: '紫色' },
gift: '50g茶叶,清洗球'
}
]
html框架
<div class="list">
<!-- <div class="item">
<img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
<p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
<p class="spec">白色/10寸</p>
<p class="price">289.90</p>
<p class="count">x2</p>
<p class="sub-total">579.80</p>
</div> -->
</div>
<div class="total">
<div>合计:<span class="amount">1000.00</span></div>
</div>
2. 数据渲染
使用map等方法将数据映射到页面对应位置中,并将部分数据进行简单的加工,处理,最后返回到页面中
- 赠品并不是每个数组对象都有,需要提前进行判断
- 在进行数据处理时,要考虑小数精度问题,有小数要提前转换为整数在进行运算
let sum = 0 //方便计算总值
const arr1 = goodsList.map(item => {
sum = goodsList.reduce((acc, item) => acc + (item.price * item.count*100)/100, 0).toFixed(2) //使用reduce函数计算总价钱,考虑小数的精度问题
return `<div class="item"> //map方法返回的是由返回值组成的数组
<img src="${item.picture}" alt="">
<p class="name">${item.name}${item.gift ? item.gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : ''}</p> //使用三元运算符判断gift是否为空
<p class="spec">${Object.values(item.spec).join('/')}</p> //获取对象的属性值,并将其用符号拼接在一起
<p class="price">${item.price.toFixed(2)}</p>
<p class="count">x${item.count}</p>
<p class="sub-total">${(item.price * item.count).toFixed(2)}</p> //保留两位小数
</div>`})
document.querySelector('.list').innerHTML = arr1.join('')
document.querySelector('.total .amount').innerHTML = sum
完整实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.list {
width: 990px;
margin: 100px auto 0;
}
.item {
padding: 15px;
transition: all .5s;
display: flex;
border-top: 1px solid #e4e4e4;
}
.item:nth-child(4n) {
margin-left: 0;
}
.item:hover {
cursor: pointer;
background-color: #f5f5f5;
}
.item img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.item .name {
font-size: 18px;
margin-right: 10px;
color: #333;
flex: 2;
}
.item .name .tag {
display: block;
padding: 2px;
font-size: 12px;
color: #999;
}
.item .price,
.item .sub-total {
font-size: 18px;
color: firebrick;
flex: 1;
}
.item .price::before,
.item .sub-total::before,
.amount::before {
content: "¥";
font-size: 12px;
}
.item .spec {
flex: 2;
color: #888;
font-size: 14px;
}
.item .count {
flex: 1;
color: #aaa;
}
.total {
width: 990px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
border-top: 1px solid #e4e4e4;
padding: 20px;
}
.total .amount {
font-size: 18px;
color: firebrick;
font-weight: bold;
margin-right: 50px;
}
</style>
</head>
<body>
<div class="list">
<!-- <div class="item">
<img src="https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg" alt="">
<p class="name">称心如意手摇咖啡磨豆机咖啡豆研磨机 <span class="tag">【赠品】10优惠券</span></p>
<p class="spec">白色/10寸</p>
<p class="price">289.90</p>
<p class="count">x2</p>
<p class="sub-total">579.80</p>
</div> -->
</div>
<div class="total">
<div>合计:<span class="amount">1000.00</span></div>
</div>
<script>
const goodsList = [
{
id: '4001172',
name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',
price: 289.9,
picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
count: 2,
spec: { color: '白色' }
},
{
id: '4001009',
name: '竹制干泡茶盘正方形沥水茶台品茶盘',
price: 109.8,
picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
count: 3,
spec: { size: '40cm*40cm', color: '黑色' }
},
{
id: '4001874',
name: '古法温酒汝瓷酒具套装白酒杯莲花温酒器',
price: 488,
picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
count: 1,
spec: { color: '青色', sum: '一大四小' }
},
{
id: '4001649',
name: '大师监制龙泉青瓷茶叶罐',
price: 139,
picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
count: 1,
spec: { size: '小号', color: '紫色' },
gift: '50g茶叶,清洗球'
}
]
// 数据渲染
let sum = 0
const arr1 = goodsList.map(item => {
sum = goodsList.reduce((acc, item) => acc + item.price * item.count, 0).toFixed(2)
return `<div class="item">
<img src="${item.picture}" alt="">
<p class="name">${item.name}${item.gift ? item.gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : ''}</p>
<p class="spec">${Object.values(item.spec).join('/')}</p>
<p class="price">${item.price.toFixed(2)}</p>
<p class="count">x${item.count}</p>
<p class="sub-total">${(item.price * item.count).toFixed(2)}</p>
</div>`})
document.querySelector('.list').innerHTML = arr1.join('')
document.querySelector('.total .amount').innerHTML = sum
</script>
</body>
</html>