web前端JS学习第三十天

对象
目标：掌握对象相关知识，具备对象数组数据渲染页面的能力

• 什么是对象
• 对象使用
• 操作对象
• 遍历对象
• 内置对象

1，对象是什么

对象（object）：javsScript里的一种数据类型

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

用来描述某个事物，列如描述一个人

• 人有想姓名，年龄，性别等信息，还有吃饭睡觉打代码等功能
• 如果用多个变量保存则比较散，用对象比较统一

比如描述 班主任信息：

• 静态特征（姓名，，年龄，身高，性别，爱好）=> 可以使用数字，字符串，数组，布尔类型等表示

• 动态行为（点名，唱，跳，rap）=>使用函数表示

小结：

1，对象是什么？

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

2，对象有什么特点？

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

2，对象使用
目标：掌握对象语法，用它保存多个数据

2.1，对象声明语法
let 对象名= {}

列如：
//声明了一个person的对象

let person = {}

2.2,对象有属性和方法组成
属性：信息或叫特征（名词），比如 手机尺寸，颜色，重量等…

方法：功能或叫行为（动词），比如 手机打电话，发短信，玩游戏

let  对象名 ={
	属性名：属性值
	方法名：函数
}

2.3，属性

• List item

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

let  person = {
	uname: 'andy'
	age : 18
	sex: '男'
}

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

多个属性之间使用英文，分隔

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

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

小结：

1，对象属性有顺序吗？

• 没有

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

• 属性和值用; 隔开
• 多个属性用，逗号隔开

2.4 属性访问
声明对象，并添加了诺干属性后，可以使用，或[]获得对象中属性对应的值，我们称之为属性访问

方法一

let person = {
	name : 'andy'
	age : 18
	sex: : '男'
}
console.log (person.name)//andy
console.log (person.age)//18

方法二

let person = {
	name : 'andy'
	age : 18
	sex: : '男'
}
console.log (person['name'])//andy
console.log (person.['age'])//18

小结：
1，对象访问属性有哪两种方式？

• 点形式 对象.属性

• [ ]形式 对象[‘属性’]

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

• 点后面的属性名一定不要加引号
• [ ]里面的属性名一定加引号
• 后期不同使用场景会用到不同的写法

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

let  person = {
	name: 'andy',
	sayHi: function () {
		document.write('hi~~')
}	
}

1,方法是由方法名和函数两部分构成，它们之间使用：分割

2，多个属性之间使用英文，分割

3，方法是依附在对象中的函数

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

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

let  person = {
	name: 'andy',
	sayHi: function () {
		document.write('hi~~')
}	
}

//对象名.方法名()
person.sayHi()
//hi~~
//注意：千万别忘了给方法名后面加小括号

注意：千万别忘了给方法名后面加小括号

小结：
1，对象访问方法是如何实现的？

• 对象.方法（）

• person.sayHi()

2,对象方法可以传递参数嘛？

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

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

查：查询对象：对象.属性 或者 对象[‘属性’] 对象.方法()

改：查询赋值：对象.属性 = 值，对象.方法=function() {}

增：对象添加新的数据：对象名.新属性名 = 新值

删：删除对象中属性：delete 对象名.属性名

增加属性
也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

let person = {
	name: 'andy',
	age : 18
}
person.hobby = '足球'
person['sex'] = '男'
console.log (person)
//{name: 'andy', age: 18, hobby: '足球', sex: '男'}

新增对象中的方法
也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活

person.move = function() {
	document.write('移动一点点')
}

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

小结：
1，对象是什么？

• 一种数据类型

• 可以理解为一推数据的集合

• 用来表示某个事物

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

• 用{}把一推数据包起来

• 多个属性和方法之间用逗号隔开

• console.log 输出能方便查看对象里有哪些属性和方法

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

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

4，遍历对象

目标：能够遍历输出对象里面的元素

遍历对象
对象没有像数组一样的length属性，所有无法确定长度

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

let obj = {
	name : 'andy'
	age : 18
	sex: '男'
}

for (let k  in obj) {
	console.log(k) //打印属性名
	console.log(obj[k])//打印属性值
}

遍历数组里的对象

  let arr = [
            { name: '小明', age: 18, num: '男', site: '广东' },
            { name: '小红', age: 17, num: '女', site: '广西' },
            { name: '小李', age: 19, num: '男', site: '山东' },
            { name: '小张', age: 20, num: '男', site: '北京' }
        ]

        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);

        }
        //{name: '小明', age: 18, num: '男', site: '广东'}
		//{name: '小红', age: 17, num: '女', site: '广西'}
		 //{name: '小李', age: 19, num: '男', site: '山东'}
		 //{name: '小张', age: 20, num: '男', site: '北京'}

一般不用这种方式遍历数组，主要是用来遍历对象

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

小结：
1，遍历对象用那个语句？

• for in

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

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

5，内置对象
目标：掌握内置对象，调用JavaScript为我们准备好的功能

学习路径：

• 1，内置对象是什么
• 2，内置对象Math
• 3，生成任意范围随机数

5.1，内置对象是什么
JavaScript内部提供的对象，包含各种属性和方法给开发者调用

思考：我们之前用过内置对象嘛？
document.write()
console.log()

5.2,内置对象Math
Math对象是JavaScript提供的一个 数学高手 对象

提供了一系列做数学运算的方法
方法有：
random：生成0-1之间的随机数（包含0不包含1）（重点）
ceil：向上取整
floor：向下取整
max：找最大数
min：找最下值
pow：幕运算
ads：绝对值

    
        // 圆周率
        console.log(Math.PI); //3.141592653589793

        //随机数
        // 返回的是小数，但是能得到0 得不到1
        console.log(Math.random());//0.9949947041279465

        // 向上取整数，返回整数
        console.log(Math.ceil(1.5));//2
        console.log(Math.ceil(1.9));//2
        console.log(Math.ceil(1.4));//2
        console.log(Math.ceil(1.1));//2

        // 向下取，返回的整数
        console.log(Math.floor(1.9));//1
        console.log(Math.floor(1.5));//1
        console.log(Math.floor(1.1));//1

        //round 就近取整(.5往大取整) 返回的整数
        console.log(Math.round(1.1));//1
        console.log(Math.round(1.4));//1
        console.log(Math.round(1.5));//2
        console.log(Math.round(1.9));//2
        console.log(Math.round(-1.5));//-1

5.3生成任意范围随机数

如何生成0-10的随机数呢？
Math.floor(Math.reandom() * (10+1))

如何生成5-10的随机数
Math.floor(Math.reandom() * (5+1))+5

如何生成N-M之间的随机数
Math.floor(Math.reandom() * (M-N+1))+N

随机猜数字案例

   // 声明函数
        function getRandom(min, max) {
            // 生成随机数
            return Math.floor(Math.random() * (max - min + 1) + min)
        }

        // 输入两个实参数组
        let num = getRandom(1, 10)

        while (true) {
            // 随机1-10之间数组
            let uans = +prompt('请猜猜1-10之间的数字')
            if (uans > num) {
                alert('不好意，你猜大了~~')
            } else if (uans < num) {
                alert('不好意思，你猜小了~~')
            } else {
                alert('恭喜你，猜对了~~~你真棒~~~')
                break
            }
        }

   // 声明函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }

        let arr = ['刘备', '关羽', '张飞', '马超', '赵云', '黄总']
        // 随机1-10之间一个数
        let get = getRandom(0, arr.length - 1)

        // [get]是随机的数，arr[]是打印对应的下标值
        document.write(arr[get])

        // 删除随机到的数对应下标数组的元素
        arr.splice(get, 1)

        console.log(arr);

拓展-术语解释

目标：知道一些术语，让自己更专业

术语：关键字 ，解释：在JavaScript中有特殊意义的词汇，举例：let , var , function , if , else , switch , case , break

保留字：在目前的javaScript中没意义，但未来可能具有特殊意义的词汇，举例：int，short , long, char

标识（标识符）：变量名，函数名的另一种叫法

表达式：能产生值的代码，一般配合运算符出现，10+3，age>= 18

语句：一句代码也称之为一条语句，一般按用途还会分类：输出语句，声明语句，分支语句。

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

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，string，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫中引用数据类型通过new，关键字创建的对象（系统对象，自定义对象），如object，Array ，Date等

堆栈空间分配区别：

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

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

<!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>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        tr {
            height: 40px;
            line-height: 40px;
        }

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

        tr:first-child {
            background-color: #ddd;
        }

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

<body>
    <h3>学生信息</h3>
    <p>将数组中存储的学生信息，以表格的形式输出到网页中</p>






    <script>
        
        // 数组{对象}
        let arr = [
            { name: '小明', age: 19, num: '男', hometown: '河北省' },
            { name: '小红', age: 19, num: '女', hometown: '河南省' },
            { name: '小刚', age: 17, num: '男', hometown: '山西省' },
            { name: '小丽', age: 20, num: '女', hometown: '山东省' }
        ]
        // 打印头部
        document.write(`

        <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        `)
        // 遍历数组{对象}
        for (let i = 0; i < arr.length; i++) {
            document.write(`
            <tr>
                // 表达式赋值
                <td>${i + 1}</td>
                <td>${arr[i].name}</td>
                <td>${arr[i].age}</td>
                <td>${arr[i].num}</td>
                <td>${arr[i].hometown}</td>
             </tr>   

            `)
        }

        document.write(`</table>`)
    </script>
</body>

</html>