文章介绍了JavaScript中的对象概念，包括对象的声明、属性和方法的使用，强调对象是无序数据集合。还提到了如何遍历对象以及对象在数组中的应用。此外，讨论了内置对象如Math对象的功能，如生成随机数。最后，展示了两个案例，一个是随机点名，另一个是生成随机颜色，进一步阐述了对象和随机数在实际编程中的运用。
11.1什么是对象
●对象(object) : JavaScript里的一种数据类型
●可以理解为是一种无序的数据集合，注意数组是有序的数据集合
11.2对象的使用
1.对象的声明语法
（1）let对象名= {}
（2）let对象名=new Object()
// {} 是对象字面量
2.对象由属性和方法组成
属性：信息或特征(名词)
方法：功能或行为(动词)
3.属性
属性名可以使用" "或’ ’,一般情况下省略，除非名称遇到特殊符号如空格、中横线等
'goods-name': 'vivo'
4.对象的本质是无序的数据集合，操作数据无非就是增删改查语法:
查——两种方法：
1）对象名.属性名
2）对象名[‘属性名’]
console.log(obj['goods-name'])
11.3对象中的方法
let person = {
name: 'andy' ,
sayHi: function() {
document.write( 'hi~~')
}
}
//调用：对象名.方法名()
person.sayHi()
●方法是由方法名和函数两部分构成，它们之间使用 : 分隔
●多个属性之间使用英文 , 分隔
●方法是依附在对象中的函数
●方法名可以使用" " 或 "，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
11.4遍历对象
语法：
let obj = {
uname:'andy',
age: 18,
sex: '男'
}
for (let k in obj) {
console.log(k) // 打印属性名 （k相当于字符串'uname'）
console.log(obj[k]) // 打印属性值
}
●for in语法中的k是一个变量，在循环的过程中依次代表对象的属性名
●由于k是变量，所以必须使用[ ]语法解析
●一定记住：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>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
text-align: center;
margin: 0 auto;
}
table caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
th,
td {
border: 1px solid #000;
width: 100px;
height: 40px;
font-size: 14px;
}
tr {
cursor: pointer;
}
table th {
background-color: #cccccc;
}
table tr:hover {
background-color: #cccccc;
}
</style>
</head>
<body>
<h4></h4>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<!-- 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 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>
//注意此处script写在table里面
</table>
</body>
</html>
11.5内置对象
1.什么是内置对象
●JavaScript内部提供的对象，包含各种属性和方法给开发者调用
●例如我们之前用过的内置对象：
➢document.write()
➢console.log()
2.内置对象-Math
●介绍: Math对象是JavaScript提供的一个“数学”对象
●作用:提供了一系列做数学运算的方法
●Math对象包含的方法有:
➢ random：生成0-1之间的随机数(包含0不包括1) [0,1）
➢ ceil：向上取整
console.log(Math.ceil(1.1)) // 2
➢ floor：向下取整
console.log(Math.floor(1.9)) // 1
➢ max：找最大数
➢ min：找最小数
➢ pow: 幂运算
➢ sqrt：平方根
➢ abs：绝对值
➢ round：四舍五入
console.log(Math.round(-1.5)) // -1
console.log(Math.round(-1.51)) // -2
3.生成任意范围随机数
Math.random()随机数函数，返回一个0- 1之间，包括0不包括1的随机小数 [0, 1)
11.6随机点名案例
需求：请把[‘赵云’, ‘黄忠’’, ‘关羽’, ‘张飞’,‘‘马超’, ‘刘备’, ‘曹操’]随机显示一个名字到页面中，并删除这个名字
【示例代码】
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random])
arr.splice(random, 1)
11.7生成随机颜色案例
需求：该函数接收一个布尔类型参数,表示颜色的格式是十六进制还是rgb格式。
① 如果参数传递的是true或者无参数,则输出一个随机十六进制的颜色
② 如果参数传递的是false,则输出一个随机rgb的颜色
③ 格式:
function getRandomColor(flag){
……
}
console.log(getRandomColor(true)) /#ffffff
console.log(getRandomColor(false)) //rgb(255,255,255)
分析:
提示: 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意0-f之间的字符，需要用到数组
let arr=[‘0’,‘1’, ‘2’, ‘3’, ‘4’, ‘5’,‘6’, ‘7’,‘8’, ‘9’,‘a’, ‘b’, ‘c’,‘d’, ‘e’,‘f’]
提示: rgb颜色格式为: 'rgb(255,255,255) '其中255可以是任意0-255之间的数字
【示例代码】
// 自定义一个随机颜色函数
function getRandomColor(flag = true) {
// 如果true 返回#ffffff
if (flag) {
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
let str = '#'
for (let i = 0; i < 6; i++) {
let ran = arr[Math.floor(Math.random() * arr.length)]
str += ran
}
return str
}
// 否则是false 返回rgb(255,255,255)
else {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
}
console.log(getRandomColor(false))
console.log(getRandomColor(true))
11.8拓展-基本数据类型和引用数据类型
简单类型又叫做基本数据类型或者 值类型，复杂类型又叫做 引用类型
●值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string，number, boolean, undefined, null
●引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型。引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。
通过new关键字创建的对象(系统对象、自定义对象)，如Object、Array、Date等
堆栈空间分配区别:
1、栈（操作系统) : 由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈。
简单数据类型存放到栈里面
2、堆（操作系统) : 存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面
区别
let num1 = 10
let num2 = num1
num2 = 20
console.log(num1) //10
let obj1 = {
age: 18
}
let obj2 = obj1
obj2.age = 20
console.log(obj1) //20
11.9拓展-术语解释
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
