JavaScript黑马购物车练习题构造函数&数据常用函数内置对象练习

本文链接：https://blog.csdn.net/weixin_70007095/article/details/134877171

本文详细描述了一个基于HTML和JavaScript的购物车页面，涉及商品图片、价格、数量的渲染，使用map和reduce方法计算总价，并展示了如何使用innerHTML替换文本和箭头函数。还介绍了如何处理对象属性值并转换为字符串的技术细节。

摘要由CSDN通过智能技术生成

文章目录

整体需求：

分析业务模块：
①：渲染图片、标题、颜色、价格、赠品等数据
②：单价和小计模块
③：总价模块

分析业务模块：
①：把整体的结构直接生成然后渲染到大盒子.list 里面
②：那个方法可以遍历的同时还有返回值
③：最后计算总价模块，那个方法可以求和？
map 方法
reduce 方法

分析业务模块：
①：先利用map来遍历，有多少条数据，渲染多少相同商品
- 可以先写死的数据
- 注意map返回值是数组，我们需要用 join 转换为字符串
- 把返回的字符串赋值给 list 大盒子的 innerHTML

分析业务模块：
②：更换数据 - 处理赠品模块
- 获取每个对象里面的 gift , 上面对象解构添加 gift
注意要判断是否有gif属性，没有的话不需要渲染
利用变成的字符串然后写到 p.name里面

整体代码流程

<!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" />
    <link rel="stylesheet" href="../第二天/练习题.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box">
        <img src="http://autumnfish.cn/static/fruit.jpg" alt="" />
      </div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- 购物车主体 -->
      <div class="main">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">选中</div>
              <div class="th th-pic">图片</div>
              <div class="th">单价</div>
              <div class="th num-th">个数</div>
              <div class="th">小计</div>
              <div class="th">操作</div>
            </div>
          </div>
          <!-- 身体 -->
          <div class="tbody">
            <!-- 渲染需要的行 -->

            <!-- <div class="tr">
                <div class="td"><input type="checkbox" checked /></div>
                <div class="td"><img src="http://autumnfish.cn/static/火龙果.png" alt="" /></div> -->
            <!-- <div class="td">6</div>
                <div class="td">
                  <div class="my-input-number">
                    <button class="decrease"> - </button>
                    <span class="my-input">2</span>
                    <button class="increase"> + </button>
                  </div>
                </div>
                <div class="td">12</div>
                <div class="td"><button class="del">删除</button></div>
              </div> 
            -->
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <!-- 全选 -->
          <label class="check-all">
            <input type="checkbox" />
            全选
          </label>
          <div class="right-box">
            <!-- 所有商品总价 -->
            <span class="price-box"
              >总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price"
                >24</span
              ></span
            >
            <!-- 结算按钮 -->
            <button class="button pay">结算( 6 )</button>
          </div>
        </div>
      </div>
      <!-- 空车 -->
      <div class="empty" style="display: none">🛒空空如也</div>
    </div>
    <script>
      const dataArr = [
        {
          id: 1,
          icon: "http://autumnfish.cn/static/火龙果.png",
          isChecked: true,
          num: 2,
          price: 6,
        },
        {
          id: 2,
          icon: "http://autumnfish.cn/static/荔枝.png",
          isChecked: false,
          num: 7,
          price: 20,
        },
        {
          id: 3,
          icon: "http://autumnfish.cn/static/榴莲.png",
          isChecked: false,
          num: 3,
          price: 40,
        },
        {
          id: 4,
          icon: "http://autumnfish.cn/static/鸭梨.png",
          isChecked: true,
          num: 10,
          price: 3,
        },
        {
          id: 5,
          icon: "http://autumnfish.cn/static/樱桃.png",
          isChecked: false,
          num: 20,
          price: 34,
        },
      ];

      const checkAll = document.querySelector(".check-all input"); //获取每个小按钮
      const strcht = dataArr
        .map((itme, index) => {
          const { id, icon, isChecked, num, price } = itme;
          // console.log(itme);
          return `
            <div class="tr">
                <div class="td"><input type="checkbox" checked /></div>
                <div class="td"><img src="${icon}" alt="" /></div>
                <div class="td">${itme.price}</div>
                <div class="td">
                  <div class="my-input-number">
                    <button class="decrease"> - </button>
                    <span class="my-input">2</span>
                    <button class="increase"> + </button>
                  </div>
                </div>
                <div class="td">12</div>
                <div class="td"><button class="del">删除</button></div>
              </div>
            `;
        })
        .join("");
      document.querySelector(".tbody").innerHTML = strcht;
      // checkAll.checked = dataArr.checked((eld) => eld.checked === true);
      const newArr = dataArr.filter((ele) => ele.isChecked);
      console.log(newArr);

      // 全选反选功能
      const check_all = document.querySelector(".check-all>input");
      const tbody = document.querySelector(".tbody");
      check_all.addEventListener("click", (itme) => {
        tbody.checked = check_all.checked;
      });
    </script>
  </body>
</html>