根据数据创建表格,表格里的有一列的内容根据sale字段来显示“已上架”或者“未上架”,显示已上架和所有商品的总价

要求:
sale 属性的意思是是否上架,已上架就是true,未上架就是fasle
表格里的有一列的内容根据sale字段来显示“已上架”或者“未上架”
每一件商品的小计也再这一行最后一列显示出来
表格打印完成以后再后面显示已上架的总价和所有商品的总价

<script>
    var list = [
      {
        id: 1,
        title: '纸',
        price: 5,
        num: 1,
        sale: true
      },
      {
        id: 2,
        title: '笔',
        price: 2,
        num: 3,
        sale: false
      },
      {
        id: 3,
        title: '墨水',
        price: 8,
        num: 2,
        sale: true
      }
    ]
    var str = '<table>'+
    '<thead>'+
      '<tr>'+
        '<th>编号</th>'+
        '<th>名称</th>'+
        '<th>价格</th>'+
        '<th>数量</th>'+
        '<th>状态</th>'+
        '<th>小计</th>'+
      '</tr>'+
    '</thead>'+
    '<tbody>'
    list.forEach(function (shop) {
      str += '<tr>'
      for (var key in shop) {
        if (key === 'sale') {
          // 使用三目运算符替换,这里有优先级问题,三目加上括号
          str += '<td>' + (shop[key] ? '已上架' : '未上架') + '</td>'
        } else {
          str += '<td>' + shop[key] + '</td>'
        }
      }
      // 小计是对象属性以外的一个td,所以再循环完了单独拼接一个
      str += '<td>' + shop.price * shop.num + '</td>'
      str += '</tr>'
    })
    str += '</tbody></table>'

    document.write(str)

    var allMoney = list.reduce(function (money, shop) {
      return money + shop.price * shop.num
    }, 0)

    var saleMoney = list.reduce(function (money, shop) {
      if (shop.sale) {
        return money + shop.price * shop.num
      }
      // 未上架
      return money
      
    }, 0)

    document.write('<p>已上架商品总价:¥' + saleMoney + '</p>')
    document.write('<p>所有商品总价:¥' + allMoney + '</p>')

    // 计算已上架总价的第二种方法可以先过滤,把已上架的留下然后直接计算

    // var saleMoney = list.reduce(function (money, shop) {
    //   // 这里 shop.sale布尔值会隐式转换成0或者1,完成正确的运算,但是不推荐,因为不方便阅读
    //   return money + shop.price * shop.num * shop.sale
    // }, 0)

  </script>
发布了62 篇原创文章 · 获赞 0 · 访问量 538

猜你喜欢

转载自blog.csdn.net/qq_43633053/article/details/105499917