day7

对象

对象（object）：JavaScript里的一种数据类型。
可以理解为是一种无序的数据集合。
用来描述某个事物，例如描述一个人。

人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能。如果用多个变量保存则比较散，用对象比较统一。比如描述班主任信息：静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示。动态行为 (点名, 唱, 跳, rap) => 使用函数表示。

对象的声明语法

<script>
        let 对象名 = {}
    </script>

对象有属性和方法组成

属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等...
方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

语法：

<script>
        let 对象名 = {
            属性名 ：属性值，
            方法名 ：函数
        }
    </script>

对象-属性

注意：

对象属性没有顺序。
属性名和属性值用冒号：隔开。
多个属性的话，属性和属性之间用逗号，隔开。
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

示例：

    <script>
        let person = {
            name:'wenwen',
            age:16,
            sex: '男',
        }

        //打印 这个数据的类型
        console.log(typeof person);

        //打印 这个数据
        console.log(person);
    </script>

打印显示：

1648865094505

访问属性(重要)

访问对象的属性有两种写法:

1. 常用  对象.属性  ， 如： goods.name 
   2. 少用  对象["属性"]   ，如： goods["name"]

注意：

如果我们访问一个不存在的属性，会显示一个undefined。
访问属性时，如果使用: 对象["属性"], 中括号里面如果没有加字符串的话，那表示访问的是变量里的数值。如果没有变量名和里面那个属性一样的对象可以访问，会直接报错。

示例：

    <script>
        //创建一个商品
        let goods ={
            name:'小米手机',
            price:3999,
            size:'大'
        }



        //访问对象的属性 有两种写法
        //1. 常用   对象.属性 如 goods.name
        //2. 少用   对象["属性"] 如 goods["name"]

         //输出 对象的属性，第一种写法        
        document.write(goods.name);
        //第二种写法
        document.write(goods["price"]);
        document.write(goods.size);

        //优化
        console.log(`产品名称：${goods.name},商品价格：${goods.price},产品尺寸：${goods.size},`)
    </script>

注意事项示例：

    <script>
        let name = 'color';
        let goods = {
          name:'小米手机',
          color:'黄色'
        }

        console.log(goods.name);//正常写法 打印显示小米手机
        console.log(goods['color']);//正常写法 打印显示黄色
        console.log(goods[name]); //访问的是变量的name = color，打印显示黄色
        console.log(goods[color]); //报错！！找不到该变量

    </script>

对象-方法

方法本质其实就是一个函数。
函数是接收参数。
和函数一样有返回值。

函数的使用函数（）。

    <script>
        let goods ={
            //属性名：属性值
            name:'小米手机',
            //方法名：方法（函数）
            getSize:function(size){
                document.write(size)
 
            }
        }

       // 对象方法的函数调用： 对象名.方法名（）
        goods.getSize('手机是最大号的<br>'); //函数调用 页面会显示：手机是最大号的
        goods.getSize('手机是小号的<br>'); //函数调用 页面会显示：手机是小号的
   
        console.log("手机是中号的") //打印台 显示手机是中号的
 
        
    </script>

对象的增删改查

增加和修改

对象的增加和修改属性都是同样的写法。
如果该属性对象里面没有，表示新增。
如果该属性对象里面已经存在，那表示修改。

示例：

<script>
        let goods = {
            name: '小米手机',
         }

        //新增一个 新的属性
         goods.name2 = "苹果手机";

        //修改 
         goods.name = "华为手机";

        /*  小结：
        - 对象的增加和修改属性都是同样的写法。
        - 如果该属性对象里面没有，表示新增。
        - 如果该属性对象里面已经存在，那表示修改。 */

        console.log(goods)  //打印显示 华为手机 苹果手机
    </script>

方法也是可以新增的。

    <script>
        // 新增方法也是可以的
        let person = {};

        // 新增一个方法  匿名函数 固定写法
        person.sayHi = function () {
            document.write('这个是我们新增的sayHi 方法');
        };

        person.sayHi(); // 调用方法
    </script>

删除

删除对象钟的属性： delete 对象名.属性名

示例：

    <script>
        let goods={
            name:"小米手机"
        }

        //删除对象钟的属性： delete 对象名.属性名
        //删除该产品
        delete goods.name; //删除 属性name 小米手机 
        console.log(goods.name); //该属性已删除，找不到该对象属性了，所以打印的话会显示undefined
    </script>
</body>

遍历对象

遍历对象

对象没有像数组一样的length属性,所以无法确定长度。
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标。

遍历对象for in

注：

一般不用这种方式遍历数组、主要是用来遍历对象。
一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值。
数组和对象都可以遍历 , 数组的遍历使用 for循环 , 对象的遍历使用 forin 。

    <script>
        //创建一个对象
        let person ={
            name:'小文',
            age:18,
            height:188
        }

       // 遍历对象 forin，  for (let k in 对象名) 里面的k代表属性名
        for (let k in person) {
            //console.log(k); //打印对象person里的属性名的意思 ，打印出来显示：name age height

            //console.log(person.k) //这样写的意思是找对象中属性名k的显示，没有找到k属性名的话显示undefined。

            //console.log(person['k'])//同上，找不到属性名k ，显示undefined。

            console.log(person[k]); //打印对象person的k属性值的变量（属性值）
            console.log("name"); //打印对象person的k属性值的变量（属性值）
            }

    </script>

遍历数组案例

    <script>
        let students = [
            {name: '小明',age: 18,gender: '男',hometown:'河北省'},
            {name: '小红',age: 19,gender: '女',hometown:'河南省'},
            {name: '小刚',age: 17,gender: '男',hometown:'山西省'},
            {name: '小丽',age: 18,gender: '女',hometown:'山东省'},

        ];

        //把他当成一个数组 做循环，循环次数小于 数组的长度
        for (let index = 0; index < students.length; index++) {
            document.write(`姓名:${students[index].name}`) //循环里面显示 数组对象students 里面 0-3 的属性名name名字
            document.write(`年龄:${students[index].age}`) //循环里面显示 数组对象students 里面 0-3 的属性名age 年龄
            document.write(`性别：${students[index].gender}`) //循环里面显示 数组对象students 里面 0-3 的属性名gender 性别
            document.write(`省份:${students[index].hometown}<br>`)//循环里面显示 数组对象students 里面 0-3 的属性名hometown 省份
        }
        
    </script>

案例加上样式：

<!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;
        }

        caption{
            font-size: 24px;
            font-weight: 700;
            padding-bottom: 20px;
        }

        table {
            width: 800px;
            margin: 100px auto;
            border-collapse: collapse;
        }

        td {
            height: 50px;
            text-align: center;
        }

        thead {
            background-color: #f0eff1;
            height: 50px;
        }
    </style>
</head>

<body>


    <script>
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
 ];


        let tablehtml = `
         <table border="1">
        <caption>学生列表</caption>
       <thead> <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr></thead>
        <tbody>`

            //遍历生成 tbody 里面的tr
        for (let index = 0; index < students.length; index++) {
            //每一数组元素 都是一个对象 students[index]
            tablehtml += `<tr>
            <td>${index + 1}</td>
            <td>${students[index].name}</td>
            <td>${students[index].age}</td>
            <td>${students[index].gender}</td>
            <td>${students[index].hometown}</td>
            </tr>`
        }
        tablehtml += `</tbody> </table>`

        document.write(tablehtml)
    </script>
</body>

</html>

案例优化forin+for

    <script>
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' },

        ];


        let tablehtml = `
         <table border="1">
        <caption>学生列表</caption>
       <thead> <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr></thead>
        <tbody>`

        //遍历生成 tbody 里面的tr
        for (let index = 0; index < students.length; index++) {
            //每一数组元素 都是一个对象 students[index]
            tablehtml += `<tr>
            <td>${index + 1}</td>`
            for (let k in students[index]) {
                let person = students[index];
                tablehtml += `<td>${person[k]}</td>`
            }

            tablehtml += `</tr>`
        }
        tablehtml += `</tbody> </table>`

        document.write(tablehtml)
    </script>

内置对象

内置对象 ：JavaScript内部提供的对象，包含各种属性和方法给开发者调用。思考：我们之前用过内置对象吗？ document.write()； console.log()；

内置对象math

Math对象是JavaScript提供的一个“数学高手”对象。
提供了一系列做数学运算的方法。
方法有： random：生成一个0-1之间的随机数（包含0不包括1，每次刷新都不一样。 ceil：向上取整（天花板函数） floor：向下取整（地板函数） max：找最大数 min：找最小数 pow：幂运算 abs：绝对值 Math 对象在线文档

示例：

    <script>
        
        //生成显示一个0-1之间的随机数，包含0，不包含1,每次刷新都不一样
        console.log(Math.random());
      
        
        console.log(Math.ceil(0.001)); //显示1，向上取整

        console.log(Math.floor(2.9)); //显示2，向下取值

        console.log(Math.round(1.4));//显示1，四舍五入

        console.log(Math.max(1,11,45,4,2,7)); //显示45，求最大值
        console.log(Math.min(1,11,45,4,2,7));//显示1，求最小值

        //幂运算  对某个数字 平方 或者 立方
        // 2 平方 = 2 * 2
        // 2 立方 = 2 * 2 * 2
        console.log(Math.pow(2,3)); //2*2*2=8. 显示8
        console.log(Math.pow(2,2)); //2*2=4. 显示4
        console.log(Math.pow(3,2)); //3*3=9. 显示9

        //绝对值 -1 = 1 ， -2 = 2
        console.log(Math.abs(-3)) //显示 3
    </script>

随机数random

如何生成0-10的随机数？

Math.floor(Math.random() * (10 + 1))


Math.round(Math.random()*10)

如何生成5-10的随机数？

Math.floor(Math.random() * (5 + 1)) + 5


Math.round(Math.random()*5) + 5

如何生成0-10的随机数？

Math.floor(Math.random() * (m - n + 1)) + n

Math.round(Math.random()*(m - n)) + n

分析讲解

    <script>
        //如何生成0-10的随机数？可以取到0也可以取到10 整数
        /* 
        分析
        1.Math.random 生成一个随机的0 ~ 1；
        2.0~1 * 10 = 0 ~ 10， 那就是 Math.random() * 10
        3. 加上 向下取整Math.floor ，让它有可能生成0
        4.由于随机数可能会是0，但不会是1，所以再加1 ，就有可能是10
        */
        console.log( Math.floor(Math.random()*(10+1)));
        //或者向上取值，就不需要+1
        console.log( Math.round(Math.random()*10));


        //如何生成5-10的随机数？可以取到5也可以取到10 整数
        /* 
        分析
        1.Math.random 生成一个随机的0 ~ 1；
        2.0~1 * 5 = 0 ~ 5， 那就是 Math.random() * 5
        3.  5+1和上面 +1 是一样的概念。
        5. 0 ~ 5 + 5 = 5 ~ 10  所以再加5
        */
        console.log( Math.floor(Math.random()*(5+1)) + 5);
        //或者向上取值，就不需要+1
        console.log( Math.floor(Math.random()*5) + 5);


        //如何生成n-m的随机数？
        /* 
        规律：
        1. Math.random() * （最大值 - 最小值）+ 最小值
        2. 向下取值的话 +1
        3. 向上取值的话 不用加1
        */
        let n = 200;
        let m = 300;
        console.log(Math.floor(Math.random()*(m- n+ 1)) + n);
         //或者向上取值，就不需要+1
         console.log( Math.floor(Math.random()*(m - n)) + n);
       
    </script>

随机数案例

    <script>
        //1 .如何生成0-10的随机数？可以取到0也可以取到10 整数
        /* 
        分析
        1.Math.random 生成一个随机的0 ~ 1；
        2.0~1 * 10 = 0 ~ 10， 那就是 Math.random() * 10
        3. 加上向下取整floor ，让它有可能生成0
        4.由于随机数可能会是0，但不会是1，所以再加1 ，就有可能是10
        */
        console.log( Math.floor(Math.random()*(10+1)));
        //或者向上取值，就不需要+1
        console.log( Math.round(Math.random()*10));


        //2 .如何生成5-10的随机数？可以取到5也可以取到10 整数
        /* 
        分析
        1.Math.random 生成一个随机的0 ~ 1；
        2.0~1 * 5 = 0 ~ 5， 那就是 Math.random() * 5
        3.  5+1和上面 +1 是一样的概念。
        5. 0 ~ 5 + 5 = 5 ~ 10  所以再加5
        */
        console.log( Math.floor(Math.random()*(5+1)) + 5);
        //或者向上取整，就不需要+1
        console.log( Math.round(Math.random()*5) + 5);


        //3 .如何生成6-10的随机数？
        /* 
        分析：
        1. 如最小值是6，最大值是10 ，10-6 =4
        2. Math.random() * （最大值10-最小值6 =4）4 = 0 ~ 4
        3. 0 ~ 4 + （最小值）6 = 6 ~ 10
        4. 所以 Math.random() * 4 + 6 = 6 ~ 10


        规律：
        1. Math.random() * （最大值m - 最小值n）+最小值n
        2. 向下取整的话 +1
        3. 向上取整的话 不用加1
        */
        let n = 6;
        let m = 10;
        console.log(Math.floor(Math.random()*(m- n+ 1)) + n);
         //或者向上取整，就不需要+1
         console.log( Math.round(Math.random()*(m - n)) + n);
       
    </script>

随机点名案例

    <script>
        //一共7个， 数组顺序是 0-6
        let arr = ["赵云", "黄忠", "关羽", "张飞", "马超", "刘备", "曹操"]

        //要计算 0-6 的随机数， 
        /* 
        1.声明个变量是这个随机数
        2.Math.random() * 6 = 0 ~ 6
        3. 0 ~ 6 随机生成的数字 ，Math.round向上取整，让随机生成的数字只能是整数的0-6。
        */
        let index = Math.round(Math.random() * 6 ) //这个index 就是 0-6

        //打印显示 数组中的随机数，arr[0]~arr[6]
        console.log(arr[index]);
    </script>

随机点名不重复输出

    <script>
       // 一共7个， 数组顺序是 0-6
        let arr = ["赵云", "黄忠", "关羽", "张飞", "马超", "刘备", "曹操"]

        //定义个函数来包裹 
        function getRandom(min,max){
            //返回值    这区间中随机选中其中一个数 的 规律
            return Math.round(Math.random() * (max - min) + min);
        }

        //死循环 只要你数组长度>0 我就循环执行重复的代码
        while(arr.length > 0){
            //定义一个index= 函数调用的：getRandom（索引数0（最小值）， 数组长度-1 （最大值））
            let index = getRandom(0,arr.length - 1)  
            //循环打印数组里随机点到的索引数
            console.log(arr[index])
            arr.splice(index,1) //删除掉随机打印出来的名字，一次只删除一个
            console.log(arr.length) //打印看删除后的长度
        }
    </script>

数据类型

引用数据类型和基本数据类型的区别

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。如：string ，number，boolean，undefined，null.
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型。通过 new 关键字创建的对象（系统对象、自定义对象），如对象Object、数组Array、函数function ,Date等.

堆栈空间分配区别

　　1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面。

注：适合存放有具体大小的数据，这些数据一般变化不会太大。

     ```html
          如 ： let num = 100 ；
               let show = true；
                let msg ="您好"
     ```

　　2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面。

注：适合存放可能会改变大小的数据，这些数据变化比较大。

       如： let person ={}；
          person.name="悟空"  // 增加数据的属性

          delete person.name  // 删除了数据的属性

          let arr=[];

          for 100次  arr.push(index) //  数组 被修改的比较多了
          arr.splice(3,1)// 修改元素了

两个都是存放数据的地方，但是有不同。

基本数据类型：

 <script>
       let num = 100; // 基本数据类型  放心的是复制给其他变量 新旧两个数据 互不影响，
      let num2 = num;
      num2 = 10000;
      console.log(num); // 显示100 互不影响
     console.log(num2); //显示 1000 互不影响
</script>

引用数据类型：

 <script>
      let person={username:"悟空"};// 引用数据类型

      let person2=person;  // 引用地址的传递 复制而已  新旧数据 本质是一样的  会收到影响 

      person2.username="八戒";
      console.log(person);// 也是八戒 新旧数据 本质是一样的
     </script>

测试题补充知识点

计算中 true转换数字是1 ，false是0.
在同一个作用域内必须先声明再使用，否则直接报错。
如果 if 大括号里面只有一行代码，可以省略大括号；两行以上的话不可省略大括号。
数字0，空的引号 ‘’ ，NaN，undefined，null，转换布尔类型都是假，其他都是真，包括字符串“0”。
arr.sort（），可以对数组排序，会改变排序后的新数组。
arr.reverse()，反转，倒序。

引入外部js

写好js文件。
引入js 通过script标签 src属性来引入。
注意放在body 里面，输出打印的那个script上面。

<body>
    <!-- 引入外部的js 通过script标签 src属性来引入-->
    <!-- 注意放在body 里面 ，输出打印的那个script上面 -->
    <script src="./21--引入.js"></script>
    <script>
       console.log(arr);

    </script>
</body>

课堂练习

1-10随机数

需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字。分析： ①：利用随机数生成一个数字。 ②：需要一直猜，所以需要不断的循环。 ③：因为条件是结果猜对了，就是判断条件退出，用while循环合适。 ④：内部判断可以用多分支语句。

    <script>
        //定义数字1是一个 1-10 的随机数
        let num1 = Math.round(Math.random() * 9 + 1);

        //循环 猜错继续弹框猜测，猜对了终止
        while (true) {
            let num2 = +prompt('请输入一个你猜测的数字'); //定义数字2 是你输入的数字

            if (num2 < num1) {
                alert('你猜小了');
            } else if (num2 > num1) {
                alert('你猜大了');
            } else  {
                alert('你猜对了' + num1) 
                break  //猜对了就终止循环
            }

        }
    </script>

学成在线列表循环复制

<!-- 
  1 引入style.css
  2 引入 data.js
  3 根据data.js中的data数组 来遍历生成代码 
    最终让网页显示出来 data数组的数据
 -->
<!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>
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <!-- 引入外部js  -->
  <script src="./data/data.js"></script>

  <script>
    // 拼接html布局 头部开始
    let html = `
    <div class="box w">
  <div class="box-hd">
    <h3>精品推荐</h3>
    <a href="#">查看全部</a>
  </div>
  <div class="box-bd">
    <ul class="clearfix">`

     
     //遍历 复制出多个li ，并且替换里面需要变动的地方，循环的次数是对象数组的长度 ，
      for (let index = 0; index < data.length; index++) {
        // 在循环li标签的时候  可以动态传入对应图片和文字内容！
        html += `
        <li>
        <img src="${data[index].src}" alt="" />
        <h4>
          ${data[index].title}
        </h4>
        <div class="info">
          <span>高级</span> • <span>${data[index].num}</span>人在学习
        </div>
      </li>`
      }
      

      // 拼接html布局 尾部结束
    html += ` 
    </ul>
    </div>
    </div>`

    document.write(html)
  </script>
</body>

</html>

switch-case条件语句

switch-case 功能和 if-else else -if 是一样的。

switch，case，break，default，这四个单词是必须属性：

1. switch（）要对（）里的判断；

2. case 如满足xx的情况下

3. break 打断当前的case

4. default 如果以上都不满足，最终执行default里面的代码

    <script>

        let day = 5;

        switch(day){ //你要判断谁
            case 1: //  相当于 if（day === 1）
            // 执行 day是1的 业务逻辑
            console.log('白饭');
            break; //break 是switch 的固定搭配，表示执行到此结束

            case 2: //  相当于 if（day === 2）
            console.log('炸鸡');
            break; 

            case 3: //  相当于 if（day === 3）
            console.log('烧烤');
            break; 

            default: // 以上都不满足， 就执行
            console.log('不吃了');
            break;
        }
    </script>

do-while循环

    <script>
        /* 
        1.循环有3种写法
          1.for
          2.while
          3.do while  （用的很少）
             1.先执行一次do 里面的代码，然后再去执行while里面的程序，
             2.哪怕 while里面的条件不成立，也会先执行一次do中的代码。
        */

        /* let index = 0;
        do {
            console.log('执行do的代码',index);
            index++
        } while (index < 5); */
        

        let index = 0;
        do {
            console.log('执行do的代码',index);
            index++
        } while (false);
    </script>

JavaScript基础day7