JS数组方法、流程控制、json字符串

1. js数组的常用方法

<script>
    console.log("-------------数组的添加push()--------------");
      let arr = [1, 2, 3];
      arr.push("a", "b");
      console.log(arr);
      console.log("------------slice()获取数组的一部分元素-----------");
      console.log(foods);
      console.log(foods.slice(0, 2)); // 0为数组的索引,2为获取数量
      console.log(foods.slice(-1)); // 倒叙的话，最后一个值索引为-1；倒数第2个值索引是-2...
      console.log(foods.slice(-2)); // 从索引为-2的值开始获取也就是从倒数第2个值开始获取所有元素
      console.log("-----------array.splice()获取被删除的元素---------");
      // 删除
      console.log(foods.splice(1, 2)); // 从索引为1的值(apple)开始删除2个元素并返回
      console.log(foods); // 被删除后只剩下3个元素
      // 新增:第2个参数为0
      console.log(foods.splice(1, 0, "音箱", "耳机")); // 新数组从索引为1的值(pear)开始添加元素"音箱", "耳机";也就是在banana和pear中间新增元素
      console.log(foods);
      // 更新:第2个参数有值
      console.log(foods.splice(3, 2, "手机", "平板")); // 新数组从索引为3的值（pear）开始删除2个元素，并将新元素添加到删除元素的位置上
      // 查询
      console.log(foods);
</script>

2. js流程控制

    <script>
      // 判断结构 也叫分支结构
      // 1.单分支
      if (true) console.log("及格！");
      // 2.双分支
      if (false) console.log("及格！");
      else console.log("不及格！");
      //3.多分支
      let fraction = 96;
      if (fraction >= 60 && fraction < 80) console.log("及格");
      else if (fraction >= 80 && fraction < 90) console.log("良好");
      else if (fraction >= 90) console.log("优秀");
      else console.log("不及格"); // 默认分支，以上条件都不满足的情况下执行
      console.log("---------多分支switch方法------------");
      fraction = 38; // let禁止重复声明，但允许更新
      switch (true) {
        case fraction >= 60 && fraction < 80:
          console.log("及格");
          break;
        case fraction >= 80 && fraction < 90:
          console.log("良好");
          break;
        case fraction >= 90:
          console.log("优秀");
          break;
        default:
          console.log("不及格");
      }
    </script>

3. 循环遍历

    <script>
      // 循环：对页面中的元素进行操作
      // 获取第一个ul里面的所有li元素
      let lis = document.querySelectorAll("ul:first-of-type li");
      console.log(lis);
      // 1.for循环
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.color = "red"; // 将其中的li元素字体设置成红色
        lis[i].style.backgroundColor = "#dbdbdb"; // JS中不允许出现连接线，在JS中写CSS复合属性时第2个单词首字母大写
      }
      // 2.while循环
      lis = document.querySelectorAll("ul:nth-of-type(2) li"); // 更新
      i = 0; // 设置循环变量
      while (i < lis.length) {
        // 设置循环条件
        lis[i].style.color = "blue";
        lis[i].style.fontSize = "20px";
        i++; // 更新循环条件
      }
      // 3.forEach循环：今后更多的使用forEach循环进行操作
      lis = document.querySelectorAll("ul:last-of-type li"); // 最后一个ul里面的所有li元素
      lis.forEach(function (value) {
        console.log(value);
        value.style.color = "green";
      });
      // 代码可简化如下
      // lis.forEach((value) => (value.style.color = "red"));
    </script>

4.商品的json格式字符串

    <script>
      // json语法
      // json三种类型：简单值（100、3.14）、对象、数组
      // 属性字符串必须加双引号，如"hello",属性值如果也是字符串也必须加双引号
      // json只有null, 没有undefined
      // json属性值允许是一个对象或数组
      // 实际开发场景下, 这些json字符串应该来自一个API接口的返回
      let sj = `
        {
            "id": "A001",
            "type": "电脑",
            "isStock": true,
            "brand": ["联想", "华为", "小米", "苹果"],
            "price": {
                "联想": 3900,
                "华为": 4500,
                "小米": 3500,
                "苹果": 6500
            }
        }
      `;
      // 对于json格式的字符串,只有转为js对象,才能在当前页面使用
      // JSON.parse(text[, reviver]);text:必选，一个有效的 JSON 字符串;reviver:可选，一个转换结果的函数，将为对象的每个成员调用此函数
      const goods = JSON.parse(sj);
      console.log(goods);
      console.log(goods.id, goods.type, goods.isStock);
      console.log(goods.brand, goods.price);
      console.log(goods.brand[1], goods.price.华为);
      const ul = document.createElement("ul"); // createElement()方法通过指定名称创建一个元素
      let goods1 = `<li>${goods.type}</li>`;
      goods1 += `<li>品牌：${goods.brand[0]}，价格：${goods.price.联想}</li>`;
      ul.innerHTML = goods1;
      document.body.append(ul);
      const table = document.createElement("table");
      let goods2 = `<caption style="font-size:18px;font-weight:700;">${goods.type}`;
      goods2 += `<thead><tr><th width="80px;">品牌</th><th width="80px;">价格</th><th width="80px;">是否有货</th></tr></thead>`;
      goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[0]}</td><td style="text-align:center;">${goods.price.联想}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
      goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[1]}</td><td style="text-align:center;">${goods.price.华为}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
      goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[2]}</td><td style="text-align:center;">${goods.price.小米}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
      goods2 += `<tbody><tr><td style="text-align:center;">${goods.brand[3]}</td><td style="text-align:center;">${goods.price.苹果}</td><td style="text-align:center;">${goods.isStock}</td></tr></tbody>`;
      table.innerHTML = goods2;
      document.body.append(table);
</script>