1.什么是对象
对象（Object）：Javascript里面的一种数据类型（引用类型），也是用于存储数据的。
好处：可以用来详细的描述某个事物，是用键值对形式存储语义更明了。
特点：对象数据是无序的，数组是有序的。
注意：声明对象要使用大括号{}，大括号就是对象字面量。
2.对象组成
属性：事物的描述信息，比如身高，年龄等
方法：事物的行为性成为方法。跑步，唱歌等
let student1 = {sname:'张三',age:18,sex:'男',className:'软件工程'
}let student1 = {study: function(){console.log('正在学习~~~~');}
}
3.对象使用-属性
1.定义对象属性：属性都是成对出现的，包括属性名和属性值。
2.访问对象属性：访问对象属性可以得到里面的值。
let student1 = {sname: '张三',sage: 20,sgender: '男',sclass: '101',sgrade: 10}console.log(student1.sname); // 张三console.log(student1.sage); // 20console.log(student1.sgender); // 男console.log(student1.sclass); // 101console.log(student1.sgrade); // 10// 给对象添加属性student1.saddress = '北京市海淀区';console.log(student1.saddress); // 北京市海淀区// 修改对象属性student1.sage = 21;console.log(student1.sage); // 21// 删除对象属性delete student1.saddress;console.log(student1.saddress); // undefined// 遍历对象属性for (let key in student1) {console.log(key); // sname, sage, sgender, sclass, sgrade, saddress}
4.对象使用-方法
1.定义对象方法：方法时成对出现的，包括方法名和匿名函数。
2.调用对象方法：通过对象.方法（），可以调用方法。
<script>let student1 = {sname: '张三',sage: 20,sgender: '男',sclass: '101',sgrade: 10,study:function(){console.log('正在学习');}}console.log(student1.sname); // 张三console.log(student1.sage); // 20console.log(student1.sgender); // 男console.log(student1.sclass); // 101console.log(student1.sgrade); // 10// 给对象添加属性student1.saddress = '北京市海淀区';console.log(student1.saddress); // 北京市海淀区// 修改对象属性student1.sage = 21;console.log(student1.sage); // 21// 删除对象属性delete student1.saddress;console.log(student1.saddress); // undefined// 遍历对象属性for (let key in student1) {console.log(key); // sname, sage, sgender, sclass, sgrade, saddress}//调用方法student1.study();</script>
5.操作对象-增删改查
对象的本质是无序数据集合，操作对象数据无非是增删改查。
1.查询对象：对象.属性
2.修改对象：对象.属性=新值
3.增加对象内容：对象.新属性=新值 对象.新方法名=function(){}
4.删除对象内容：delete 对象名.属性名
<script>//对象操作let person = {name: "张三",age: 20,gender: "男",run:function(){console.log(this.name + "正在奔跑...");}}//1.查找对象属性console.log(person.name); //张三console.log(person.age); //20console.log(person.gender); //男person.run(); //张三正在奔跑...//2.修改对象属性person.age = 21;console.log(person.age); //21console.log(person); //{name: "张三", age: 21, gender: "男", run: ƒ}//3.添加对象属性person.city = "北京";console.log(person.city); //北京console.log(person); //{name: "张三", age: 21, gender: "男", run: ƒ, city: "北京"}//4.删除对象属性delete person.age;console.log(person.age); //undefinedconsole.log(person); //{name: "张三", gender: "男", run: ƒ, city: "北京"}</script>
6.对象操作-[]
查的另一种写法
对于多词属性比如中横线分割的属性，点操作就不能用了。
可以使用：对象[‘属性’]的方法，单引号双引号都可以。
<script>let person = {'student-name':"张三",}//获取属性console.log(person['student-name']); //张三
</script>
多词属性或者需要解析变量的时候使用[]语法，其余直接使用点语法。
7.遍历对象
for遍历对象会有问题，因为对象没有长度。
所以需要采用 for in遍历对象.
语法：
for(let 变量 in 对象){console.log(变量);console.log(对象[变量])
}
<script>// 创建对象let obj = {name: "John",age: 30,city: "New York"}// 遍历对象for (let key in obj) {// 输出对象属性和值//只能使用[]访问属性，不能使用.访问属性，因为key是字符串，而.只能访问对象属性console.log(key + " : " + obj[key]);// name : John age : 30 city : New York}</script>
for in 语法中的k是一个变量，子啊循环的过程中依次代表对象的属性名。
由于k是变量，所以必须使用[]语法解析
一定记住：k是获取对象的属性名，对象名[k]是获取属性值
一般不使用这种方式遍历数组，主要是用来遍历对象。
8.遍历对象数组-渲染数据
<!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><!-- 渲染表格 --><table border="1"><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>籍贯</th></tr><!-- 遍历对象数组 --><script>// 定义一个对象数组var arr = [{ name: '张三', age: 20, sex: '男', hometown: '北京' },{ name: '王五', age: 30, sex: '男', hometown: '广州' },{ name: '赵六', age: 35, sex: '女', hometown: '深圳' },]// 遍历对象数组for (var i = 0; i < arr.length; i++) {document.write("<tr>")document.write("<td>" + (i + 1) + "</td>")document.write("<td>" + arr[i].name + "</td>")document.write("<td>" + arr[i].age + "</td>")document.write("<td>" + arr[i].sex + "</td>")document.write("<td>" + arr[i].hometown + "</td>")document.write("</tr>")}</script></table>
</body></html>
9.内置对象
js内部提供的对象，包含各种属性和方法给开发者调用
比如Math对象，是js提供的一个数学对象
var x = Math.PI; // 返回 PI
var y = Math.sqrt(16); // 返回 16 的平方根
Math 对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 Ex 的指数。 |
| floor(x) | 对 x 进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y,z,…,n) | 返回 x,y,z,…,n 中的最高值。 |
| min(x,y,z,…,n) | 返回 x,y,z,…,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 四舍五入。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
| tanh(x) | 返回一个数的双曲正切函数值。 |
| trunc(x) | 将数字的小数部分去掉，只保留整数部分。 |
<!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>// Math对象console.log(Math.PI); // 3.141592653589793console.log(Math.E); // 2.718281828459045console.log(Math.round(3.14)); // 3console.log(Math.floor(3.14)); // 3console.log(Math.ceil(3.14)); // 4console.log(Math.random()); // 0.12345678901234567 console.log(Math.max(1, 2, 3, 4, 5)); // 5console.log(Math.min(1, 2, 3, 4, 5)); // 1console.log(Math.pow(2, 3)); // 8console.log(Math.sqrt(16)); // 4console.log(Math.abs(-3)); // 3console.log(Math.sin(Math.PI/2)); // 1console.log(Math.cos(Math.PI/2)); // 6.123233995736766e-17console.log(Math.tan(Math.PI/4)); // 0.9999999999999999console.log(Math.asin(1)); // 1.5707963267948966console.log(Math.acos(0)); // 1.5707963267948966console.log(Math.atan(1)); // 0.7853981633974483console.log(Math.atan2(1, 2)); // 0.4636476090008061console.log(Math.exp(1)); // 2.718281828459045console.log(Math.log(2)); // 0.6931471805599453console.log(Math.log10(10)); // 1console.log(Math.log2(8)); // 3console.log(Math.pow(2, 3)); // 8console.log(Math.sqrt(16)); // 4console.log(Math.cbrt(27)); // 3console.log(Math.hypot(3, 4)); // 5</script>
</body>
</html>
Math随机数
Math.random()随机数，返回0–1之间，并且是包括0，但是它不包括1的随机小数。
<script>// 生成随机数function randomNum() {return Math.random();}// 调用函数生成随机数console.log(randomNum());// 随机整数function randomInt(min, max) {// 随机数范围为 [min, max]// 因此需要生成 [min, max] 之间的随机整数// 因此需要生成 [0, max - min] 之间的随机数// 然后加上 min 即可得到 [min, max] 之间的随机整数return Math.floor(Math.random() * (max - min + 1)) + min;}//5-15之间的随机数console.log(randomInt(5, 15));// 调用函数生成随机整数console.log(randomInt(1, 100));</script>
10.demo 随机显示名字案例
<script>//请把['张三', '李四', '王五', '赵六']随机显示一个名字到页面中//创建数组let names = ['张三', '李四', '王五', '赵六', '田七'];//生成随机数// Math.floor(Math.random() * (3 + 1));let random = Math.floor(Math.random() * names.length);//随机生成名字document.write(names[random]);</script>
