学习记录-js基础-购物车数据处理

购物车数据处理功能描述

  1. 可以将得到的数据渲染到页面上
  2. 对数据进行处理,改变格式,并能根据单价算出总价

实现效果

在这里插入图片描述

购物车数据处理实现步骤

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等方法将数据映射到页面对应位置中,并将部分数据进行简单的加工,处理,最后返回到页面中

  1. 赠品并不是每个数组对象都有,需要提前进行判断
  2. 在进行数据处理时,要考虑小数精度问题,有小数要提前转换为整数在进行运算
		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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值