JS基础第九天——对象（2）+Random

<script>
    // for in :不推荐遍历数组
    let arr = ['red', 'blue', 'grey', 'glod']
    for (let k in arr) {
      console.log(k)//打印数组索引号，但为字符串型（这是不使用他作为遍历数组格式的原因）
      console.log(arr[k])
    }
    // 遍历对象的使用方法...........................................
    // 1.遍历对象 for in
    let obj = {
      uname: '张三',
      age: 28,
      gender: '男'
    }
    // 2.遍历对象
    for (let k in obj) {
      console.log(k)//属性名'uname' 'age' ===k
      console.log(obj[k])//tip：！！！输出属性值 obj[k]
    }
  </script>

解释:

由于k是变量，所以必须用[ ]解析

tip：k是获得对象的属性名，对象名[k]是获得属性值

渲染学生信息表案例

复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 600px;
      text-align: center;
    }

    caption {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    /* 对行列和表格边框设定 */
    table,
    th,
    td {
      border: 1px solid #ccc;
      border-collapse: collapse;
    }

    tr {
      height: 40px;
      cursor: pointer;
    }

    table tr:nth-child(1) {
      background-color: #ddd;
    }

    table tr:not(:first-child):hover {
      background-color: #eee;
    }
  </style>
</head>

<body>
  <h2>学生信息</h2>
  <p>渲染</p>

  <table>
    <caption>学生手册</caption>
    <!-- table居中，caption在table中 -->
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>
    <script>
      // 渲染
      // 1.信息罗列
      let students = [
        { name: '小红', age: 18, gender: '女', hometown: '河南' },
        { name: '小吕', age: 18, gender: '男', hometown: '河北' },
        { name: '小强', age: 19, gender: '男', hometown: '江西' },
        { name: '小南', age: 18, gender: '女', hometown: '湖南' },
        { name: '小赵', age: 17, gender: '男', hometown: '天津' },
      ]
      //2.遍历对象数组
      // 记得定义i
      // 不要拼写错误
      for (let i = 0; i < students.length; i++) {
        document.write(`   
        <tr>
        <td>${i + 1}</td>
        <td>${students[i].name}</td>
        <td>${students[i].age}</td>
        <td>${students[i].gender}</td>
        <td>${students[i].hometown}</td>
        </tr> 
    `)
      }

    </script>
  </table>

</body>

</html>

内置对象

定义：已经规定好的东西

内置对象Math:

格式：

console.log(Math.**(...))

ceil天花板，向上取整；floor地板，向下取整；round 四舍五入

复制代码

<script>
    // 属性
    console.log(Math.PI)
    // 方法
    // ceil天花板，向上取整，不满一加一
    console.log(Math.ceil(1.1))//2
    console.log(Math.ceil(2.3))//3
    console.log(Math.ceil(9.3))//10
    // floor地板，向下取整
    console.log(Math.floor(6.3))//6
    console.log(Math.floor(7.9))//7
    // round 四舍五入
    console.log(Math.round(6.3))//6
    console.log(Math.round(4.8))//5
    console.log(Math.round(-5.49))//-4
  </script>

与函数有相似之处

取整函数：parseInt(1.3)//1 parseInt('18px')//18(更厉害，可以将字符串转化为数字)

max最大值； min最小值；abs绝对值

复制代码

<script>
    // max最大值
    console.log(Math.max(1, 9, 28, 3))//28
    // min最小值
    console.log(Math.min(1, 9, 28, 3))//1
    // abs绝对值
    console.log(Math.abs(-89))//89
  </script>

微复习

声明语法:let 对象名={}
属性名：属性名：属性值（'字符串'/数字...），（用逗号分隔）
使用时访问：1. console.log(对象名.属性值) 2.console.log(对象名['属性值']) // 输出属性值
增删减查
null类似于let obj={ } 空对象

Random

复制代码

  <script>
    // 取值范围[0,1)随机数（不常用）编写取值范围的基础
    console.log(Math.random())
    //常用...............取值范围↓[0,n]
    Math.floor(Math.random() * (n + 1))
    //floor向下取整（不要小数）
    // .......................取值范围[m,n]
    Math.floor(Math.random() * (n - m + 1)) + m
    </script>

<script>
    // eg:
    function getRandom(m, n) {
      return Math.floor(Math.random() * 34) + 6
    }
    console.log(getRandom(6, 39));
  </script>

使用场景：数组中随机抽取

复制代码

<script>
    // 随机抽取数组元素 固定写法
    let arr = ['red', 'glod', 'green', ' pink']//不要忘了字符串：'元素'
    let random = Math.floor(Math.random() * arr.length)
    console.log(arr[random])
  </script>

案例一：随机点名+不重复

复制代码

<script>
      // 随机点名
      let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
      let random = Math.floor(Math.random() * arr.length)
      document.write(arr[random])
      //随机点名且不重复-删除出现过的元素 splice（起始位置（下标），删除几个元素）
      arr.splice(random, 1)
      console.log(arr)
      // 现在做不了抽一个删一个的页面效果，但可以在检查的后台看到数组确实在删除
    </script>

案例二：猜数游戏

复制代码

<script>
    // 1.随机生成数字
    function getNumber(m, n) {
      return Math.floor(Math.random() * (n - m + 1)) + m
    }
    let random = getNumber(1, 10)
    document.write(random)
    // 直到猜对为止，需要不断地循环
    // （补充说明：for，已知需要循环几次；while，无限制循环次数）
    while (true) {
      // 2.用户输入
      let guess = +prompt('请在1-10之间猜一个数')
      // 3.判断输出
      if (guess < random) {
        alert('哈哈，猜小了')
      }
      else if (guess > random) {
        alert('哈哈，猜大了')
      }
      else {
        alert('恭喜你，猜对了')
        break// 注意退出循环所在的位置 退出循环 tip循环写法
      }
    }
  </script>

进阶版+开关的使用

复制代码

<script>
    function getNumber(m, n) {
      return Math.floor(Math.random() * (n - m + 1)) + m
    }
    let random = getNumber(1, 10)
    document.write(random)

    let flag = true//设置开关
    // 设置循环（有固定次数）
    for (let i = 1; i <= 3; i++) {
      // 用户输入
      // 用户输入
      let guess = +prompt('请在1-10之间猜一个数')
      if (guess < random) {
        alert('猜小了，再来')
      }
      else if (guess > random) {
        alert('猜大了，再来')
      }
      else {
        flag = false//如果次数用完前答对，结束开关，不再提示次数用完
        alert('猜对了')
        break//退出循环      
      }
    }
    // 开关在循环之外，循环结束则提示
    if (flag) {
      alert('次数已用完')
    }

  </script>

基本数据类型与引用数据类型

↓ ↓

简单数据类型复杂数据类型

↓ ↓

栈：存储值堆：存储地址

（为API做引入）