js基础第六天

一、对象

1.对象是什么

1.对象（object）：js里的一种数据类型

2.可以理解为是一种无序的数据集合

3.比如描述个人信息

静态特征(姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
动态行为 (点名, 唱, 跳, rap) => 使用函数表示

4.小结

1.对象是什么

对象是一种数据类型
无序的数据集合

2.对象有什么特点

无序的数据的集合
可以详细的描述某个事物

2.对象使用

1.声明语法：

1649486649044

1649486664134

2.对象有属性和方法组成

属性：信息或叫特征（名词）

方法：功能或叫行为（动词）

1649487324263

3.属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

1649488347809

注意：

1.属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔

2.多个属性之间使用英文 , 分隔

3.属性就是依附在对象上的变量（外面是变量，对象内是属性）

4.属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

4.小结

1.对象属性有顺序吗？

没有

2.属性和值用什么符号隔开？多个属性用什么隔开？

属性和值用：隔开

多个属性用 , （逗号）隔开

3.属性访问

声明对象，并添加了若干属性后，可以使用 . 或 [ ] 获得对象中属性对应的值，我称之为属性访问。简单理解就是获得对象里面的属性值。

1649489038458

<script>
        let userName='color'
        let person={
            userName:'andy',
            color:'yellow'
        }

        //访问对象属性
        console.log(person.userName)
        console.log(person.color)
        console.log(person["userName"])
		document.write(`${person.userName}`)

        console.log(person[userName])//中括号里 代码没有加字符串 表示一个变量 它就找代码中username的变量color 再输出color的值 yellow  等同于23行的代码
        console.log(person["color"])
 
        console.log(person[color])// color是变量 代码中没有这个变量 报错  区分
        console.log(person.asdsc)// 对象中没有这个属性 输出为undefined  区分
    </script>

访问对象属性的两种写法

1.常用：对象 . 属性（如：person.userName）

2.少用：对象['属性']（如：(person["userName"]），注意如果没加 '' 就是另外一种说法了，此时的属性就变为变量！！！

3.如果访问不存在的属性时，会输出undefined。

4.小结：

1.对象访问属性有哪两种方式

点形式对象.属性
[ ]形式对象['属性']

2.两种方式有什么区别？

点后面的属性名一定不要加引号
[ ] 里面的属性名加引号，除非它是一个变量
后期不同使用场景会用到不同的写法

4.对象中的方法

1.数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

1649492409124

注意：

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

2.对象中的方法访问

声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。

1649492741447

访问语法：属性.方法（）

注意：

1.千万别忘了给方法名后面加小括号，方法是函数，所以与函数的调用一样

2.函数（方法）是可以接收参数的

3.函数（方法）是可以有返回值的

<script>
        let person={
            name:'andy',
            sayHi:function(msg){
                //document.write('hi~~')
                document.write(msg)
                return '来自person的问候'
            }
        }
        //person.sayHi();
        //方法 其实是一个函数
        //函数 是可以接受参数
        //函数 有返回值
        //函数的使用 函数（）

        person.sayHi('大家好<br>')//页面上出现 大家好
        person.sayHi('hello<br>')//页面上出现 hello

        let result=person.sayHi('你好呀 hi') //页面上出现 你好呀 hi
        console.log(result) //控制台显示  来自person的问候

    </script>

3.小结

1.对象访问方法是如何实现的

对象.方法( )
person.sayHi()

2.对象方法可以传递参数吗？

可以，跟函数使用方法基本一致

二、操作对象

对象本质是无序的数据集合, 操作数据无非就是增删改查语法：

1649509353037

1.增加、修改属性

增加属性和修改属性都是同样的写法
如果该属性对象中没有，表示新增
如果该属性对象中已经存在，表示修改
增加方法也是可以

1649509958364

1649509975059

 <script>
      // let person = { };

      // 增加 一个新的属性
      // person.username="普通人";//往空对象里面增加新属性


      // 修改
    //   let person={
    //     username="程序猿"
    //   }
      // person.username = '普通人';//在该属性中原有的值进行修改

      // 增加属性和修改属性都是同样的写法
      // 如果该属性对象中没有，表示新增
      // 如果该属性对象中已经存在，表示修改
      // person.username = '普通人';

      // console.log(person);

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

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

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

注意：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的

2.删除对象

<script>
      // 声明一个对象
      let person={
        username:"海贼王"
      };

      // 不想看了  给删除掉
      delete person.username;  // 删除对象中的  username属性

      console.log(person.username); // undefined 
    </script>

三、对象小结

1.对象是什么

一种数据类型
可以理解为一堆数据的集合
用来表示某个事物

2.对象的是如何声明和使用的？

用 { } 把一堆数据包起来
多个属性和方法之间用逗号隔开
console.log输出能方便查看对象里有哪些属性和方法

3.如何动态添加属性和方法？

对象如果有这个属性相当于重新赋值
对象如果没有这个属性相当于动态添加一个属性

四、遍历对象

1.遍历对象

对象没有像数组一样的length属性,所以无法确定长度；

对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标；

2.遍历对象语法：for in

1649510758138

注意：

一般不用这种方式遍历数组、主要是用来遍历对象
一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值
k是属性名对象名[k] 是属性值，注意[k]里面不需要加引号，若['k']则表示为对象中的为k的属性名

 <script>
        let person={
        name:'andy',
        age:18,
        sex:'女'
    }
    //遍历对象
    for (let k in person) {
            //console.log(k)//输出的数属性名 name age sex
            console.log(person[k])//输出的是对应属性的属性值 andy 18 女

            document.write(`属性名：${k},属性值：${person[k]}`)
            //k 表示属性名 person[k]表示属性值 注意[k]里面不需要加引号 若person['k']则表示为对象中的为k的属性名 
        }
    </script>

3.小结

1.遍历对象用那个语句？

for in

2.遍历对象中, for k in obj,获得对象属性是那个，获得值是那个？

获得对象属性是 k
获得对象值是 obj[k]

4.案例

<!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>
        table{
            width: 800px;
            margin:100px auto;
            border-collapse: collapse;
        }
        td{
            height: 50px;
            text-align: center;
        }
        th{
            height: 30px;
        }
        thead{
            background-color: #f0eff1;
        }
        caption{
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>  
    <script>
        let student=[
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },//对象名为数组0
        { name: '小红', age: 19, gender: '女', hometown: '河南省' },//对象名为数组1
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },//对象名为数组2
        { name: '小丽', age: 18, gender: '女', hometown: '山东省' },//对象名为数组3
        ]
        let tableHtml=`
        <table border="1">
        <caption>学生列表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        </thead>
        <tbody>
        `
        for (let index = 0; index < student.length; index++) {
            // 每一数组元素 都是一个对象 students[index]
            tableHtml+=`    
            <tr>
                <td>${index+1}</td>
                <td>${student[index].name}</td>
                <td>${student[index].age}</td>
                <td>${student[index].gender}</td>
                <td>${student[index].hometown}</td>
            </tr>
            `
            
        }       
        tableHtml+=`</tbody>
    </table>`
    document.write(tableHtml)
    </script>
</body>
</html>

5.用遍历对象优化案例

<!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>
        table{
            width: 800px;
            margin:100px auto;
            border-collapse: collapse;
        }
        td{
            height: 50px;
            text-align: center;
        }
        th{
            height: 30px;
        }
        thead{
            background-color: #f0eff1;
        }
        caption{
            font-weight: 700;
            font-size: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>  
    <script>
        let student=[
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },//对象名为数组0
        { name: '小红', age: 19, gender: '女', hometown: '河南省' },//对象名为数组1
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },//对象名为数组2
        { name: '小丽', age: 18, gender: '女', hometown: '山东省' },//对象名为数组3
        ]
        let tableHtml=`
        <table border="1">
        <caption>学生列表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        </thead>
        <tbody>
        `
        for (let index = 0; index < student.length; index++) {//做循环
            // 每一数组元素 都是一个对象 students[index]
            tableHtml+=` <tr> <td>${index+1}</td>`
            for (let k in student[index]) {
                tableHtml+=`<td>${student[index][k]}</td>` //做遍历 
            // 令k等于student中的每一组数组 使用student[index][k]对数组里的元素输出
                    
                }
            }
             tableHtml+=`</tr>`       
               
        tableHtml+=`</tbody>
    </table>`
    document.write(tableHtml)
    </script>
</body>
</html>

五、内置对象

1.内置对象是什么

1.JavaScript内部提供的对象，包含各种属性和方法给开发者调用

2.思考：我们之前用过内置对象吗？有的

document.write( )
console.log( )

2.内置对象Math

1.Math对象是js里提供了一系列数学运算的方法，里面会包含有关于数字操作的相对方法或属性

2.方法有：

random（）：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值

<script>
        //Math 用法
        //以下为常用
        //Math.random() 返回一个随机数，包含0，但不包含1
        //console.log(Math.random())

        //Math.ceil() 向上取整
        let num=1.8
        console.log(Math.ceil(num))//2

        //Math.floor() 向下取整
        console.log(Math.floor(0.6))//0

        //Math.round() 四舍五入
        console.log(Math.round(0.6))//1
        console.log(Math.round(0.4))//0

        //求最大值、最小值 max、min
        console.log(Math.max(1,2,6,8,40))//40
        console.log(Math.min(1,2,6,8,40))//1

        //幂运算 Math.pow()
        console.log(Math.pow(2,3))//8  3个2相乘
        console.log(Math.pow(2,2))//4  2个2相乘

        //绝对值 Math.abs()
        console.log(Math.abs(-2))//2
        console.log(Math.abs(-10))//10

    </script>

重点：算出N—M的随机数公式：

Math.round(Math.random( )*(max-min) + min)

六、拓展

1.术语

1649514131702

2.基本数据类型和引用数据类型的存储方式

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

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

2.堆栈空间分配区别：

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

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

1649514311926

3.简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中

4.复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

1649514550738

七、案例

1.随机生成一个数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>15-课堂练习.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 生成 0~10 随机数 可以取到 0 也可以取到10 整数
      // Math.round(Math.random() * 10)
      /* 
      分析
      1 Math.random()  返回    0~1  
      2 0~1  * 10 => 0 ~ 10   Math.random() * 10
      3 真的可以取到0 取到10   Math.round(Math.random() * 10)
       */

      //  console.log(Math.round(Math.random() * 10));

      // 如何生成 5 - 10  随机数
      /* 
      分析
      1 先生成  0~5 的随机数  Math.random()*5 
      2  0~5    加上 5 
          5 ~ 10     Math.random()*5  + 5 
      3 整数  
        Math.round(Math.random()*5  + 5 )  
       */

      // console.log(Math.round(Math.random() * 5 + 5));

      // 如何 生成  6 - 10 的随机数
      // 1 先生成  0 ~ 1  Math.random()
      // 2 再生成   0 ~ 4  Math.random() * 4
      // 3 再生成   6 ~ 10  Math.random() * 4  + 6

      // Math.random() * 4 + 6;

      // 理解不理解都好 都是规律  Math.random() * (最大值 - 最小值) + 最小值;  6-10
      // Math.random() * (10 - 6) + 6;  6-10

      function getRandom(min, max) {
        return Math.round(Math.random() * (max - min) + min);
      }

      // console.log(getRandom(0,10));
      // console.log(getRandom(5,10));
      // console.log(getRandom(6,10));
    </script>
  </body>
</html>

2.随机点名案例

<script>
        let arr=['刘备','关羽','张飞','黄忠','赵云','曹操']
        function getName(min,max){
            return Math.round(Math.random() * (max - min) + min);
        }
        let index=getName(0,(arr.length-1))
        console.log(arr[index])
    </script>

3.随机点名不重复案例

<script>
        let arr=['刘备','关羽','张飞','黄忠','赵云','曹操']
        function getName(min,max){
            return Math.round(Math.random() * (max - min) + min);
        }
        // let index=getName(0,arr.length-1)
        // console.log(arr[index])
        // arr.splice(index,1)
        // console.log(arr[index])

        while(arr.length>0){
            let index=getName(0,arr.length-1)
            console.log(arr[index])
            arr.splice(index,1)//删除数组中的某一元素
        }
    </script>

4.输入秒数得出时分秒案例

<!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>
</head>
<body>
    <script>
        // function getTime(time){
        //     let hour=parseInt(time / 60 / 60)
        //     let minute=parseInt(time / 60) % 60
        //     let second=time / 60
        // }


        
        // 声明一个函数 做到   输入了 秒  返回 时:分:秒
      // PPT  希望 把 时分秒 返回  返回一个数组 [时,分,秒]

      function getTime(time) {
        // 假设 time =2 * 60 * 60 + 2 * 60 + 3

        // 来计算 小时
        let hour = parseInt(time / 60 / 60);

        // 计算 分钟
        // 先计算一下 总的分钟数有多少
        // time =  60*2+2  = 122 / 60 = 2.333
        //  (60*2*100+2)/60 = 200.033333
        // 200.033333   基于这个分钟数 对 60 取余
        // 200  180 = 20
        // 200.004 % 60 = 20

        // 思路  先将秒转成总的分钟数（可能会超过60分钟，对60 取余 ）
        let minute = parseInt(time / 60) % 60;

        // 秒   直接对60 取余即可
        // 71 => 11
        // 122 =>  2
        let second = time % 60;

        // 补0 处理
        hour = hour < 10 ? '0' + hour : hour;
        minute = minute < 10 ? '0' + minute : minute;
        second = second < 10 ? '0' + second : second;

        // console.log(hour, minute, second);

        // 返回了一个数组
        return [hour, minute, second];
      }

      // getTime(61); //  00:01:01
      // getTime(121); //  00:02:01
      // getTime(3 + 60 * 60); //  01:00:03

      // return 可以返回多个值吗 ？？
      // 最严谨的说法 不可以的
      // 较真 可以

      // function getNum() {
      //   // return 1
      //   // return 2
      //   // return 3

      //   // 返回一个数组
      //   return [1, 2, 3, 4];
      // }

      // 输入一个 秒数 返回 时分秒 数组
      let times = getTime(1000);
      console.log(times);

      // 写在网页上
      document.write(`${times[0]}:${times[1]}:${times[2]}`);
    </script>
</body>
</html>

5.使用遍历完成学成在线案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学车在线首页</title>
    <link rel="stylesheet" href="style.css" />
    <style></style>
  </head>

  <body>
    <!-- <div class="box w">
      <div class="box-hd">
        <h3>精品推荐</h3>
        <a href="#">查看全部</a>
      </div>
      <div class="box-bd">
        <ul class="clearfix">
          <li>
            <img src="images/course01.png" alt="" />
            <h4>
              Think PHP 5.0 博客系统实战项目演练
            </h4>
            <div class="info">
              <span>高级</span> • <span>1125</span>人在学习
            </div>
          </li>
        </ul>
      </div>
    </div> -->

    <!-- 引入数据 -->
    <script src="./data/data.js"></script>
    <script>
      let htmlStr = `<div class="box w">
                      <div class="box-hd">
                        <h3>精品推荐</h3>
                        <a href="#">查看全部</a>
                      </div>
                      <div class="box-bd">
                        <ul class="clearfix">`
      // 循环遍历数组
      for (let i = 0; i < data.length; i++) {
        htmlStr += `<li>
                      <img src="${data[i].src}" alt="" />
                      <h4>
                        ${data[i].title}
                      </h4>
                      <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                      </div>
                    </li>`
      }
      htmlStr += `</ul>
                </div>
              </div>`
      // 打印输出
      document.write(htmlStr)
    </script>
  </body>
</html>