目录
一、什么是对象
1、对象是什么
二、对象使用
1、对象使用
2、对象有属性和方法组成
（1）对象属性（增删改查）
（2）对象方法
三、遍历对象
1、遍历对象
2、渲染学生信息案例
四、内置对象
1、内置对象是什么
2、内置对象-Math
3、内置对象-生成任意范围随机数
（1）内置对象-生成任意范围随机数
（2）随机点名案例
（3）猜数字游戏案例
（4）生成随机颜色案例
五、拓展-术语解释
1、一些专业术语
2、拓展-基本数据类型和引用数据类型
3、堆栈空间分配区别
一、什么是对象
1、对象是什么
- 对象（ object) : JavaScript里的一种数据类型
- 可以理解为是一种无序的数据集合，注意数组是有序的数据集合
- 用来描述某个事物，例如描述一个人人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能如果用多个变量保存则比较散，用对象比较统一
- 比如描述班主任信息：静态特征(姓名,年龄，身高,性别,爱好)=>可以使用数字,字符串,数组,布尔类型等表示动态行为(点名,唱,跳, rap)=>使用函数表示
二、对象使用
1、对象使用
- 语法
let 对象名 = {}
let 对象名 = new Object()
例如：
let person = {} //声明一个person的对象
实际开发中，我们多用花括号。{}是对象字面量
2、对象有属性和方法组成
- 属性:信息或叫特征（名词)。比如手机尺寸、颜色、重量等...
- 方法:功能或叫行为（动词)。比如手机打电话、发短信、玩游戏...
（1）对象属性（增删改查）
- 数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
// 1.声明对象
let pink = {
uname: 'pink',
age: 18,
gender: '男'
}- 属性-查
- 语法
对象名.属性
对象名['属性']
- 属性-改
- 语法
对象名.属性 = 新值
- 属性-增
- 语法
对象名.新属性 = 新值
- 属性-删
- 语法
delete 对象名.属性
示例代码如下所示：
// 1.声明对象
let pink = {
uname: 'pink',
age: 18,
gender: '女'
}
// // console.log(pink)
// // console.log(typeof pink)
// // 改 把性别的女改为男
// pink.gender = '男'
// console.log(pink)
// // 增
// pink.hobby = '足球'
// console.log(pink)
// // 删 (了解)
// delete pink.age
// console.log(pink)
// // let num = 10
// num = 20
// console.log(num)
// 1. 声明
// console.log(window.name)
let obj = {
'goods-name': '小米10青春版',
num: '100012816024',
weight: '0.55kg',
address: '中国大陆'
}
obj.name = '小米10 PLUS'
obj.color = '粉色'
// console.log(obj.name)
console.log(obj.num)
console.log(obj.weight)
console.log(obj.address)
console.log(obj.color)
// console.log(obj.goods - name)
// 查的另外一种属性：
// 对象名['属性名']
console.log(obj['goods-name'])
// 查总结：
// (1) 对象名.属性名 obj.age
console.log(obj.num)
// (2) 对象名['属性名'] obj['age']
console.log(obj['num'])
// // console.log(address)
// // 2. 使用属性 查 对象名.属性名
// console.log(obj.address)
// console.log(obj.name)
改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改
（2）对象方法
- 数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
- 声明对象，并添加了若干方法后，可以使用﹒调用对象中函数，我称之为方法调用。
- 也可以添加形参和实参
示例代码如下：
let obj = {
uname: '刘德华',
// 方法
song: function (x, y) {
// console.log('冰雨')
console.log(x + y)
},
dance: function () { }
}
// 方法调用 对象名.方法名
// console.log(obj.song(1, 2))
obj.song(1, 2)
// document.write('123')- 注意：千万别忘了给方法名后面加小括号
三、遍历对象
1、遍历对象
for遍历对象的问题：
- 对象没有像数组一样的length属性,所以无法确定长度
- 对象里面是无序的键值对，没有规律.不像数组里面有规律的下标
示例代码如下：
// for in 我们不推荐遍历数组
// let arr = ['pink', 'red', 'blue']
// for (let k in arr) {
// console.log(k) // 数组的下标 索引号 但是是字符串 '0'
// console.log(arr[k]) // arr[k]
// }
// 1. 遍历对象 for in
let obj = {
uname: 'pink老师',
age: 18,
gender: '男'
}
// 2. 遍历对象
for (let k in obj) {
console.log(k) // 属性名 'uname' 'age'
// console.log(obj.uname)
// console.log(obj.k)
// console.log(obj.'uname')
// console.log(obj['uname']) 'uname' === k
console.log(obj[k]) // 输出属性值 obj[k]
}- 一般不用这种方式遍历数组、主要是用来遍历对象
- for in语法中的k是一个变量,在循环的过程中依次代表对象的属性名
- 由于k是变量,所以必须使用[]语法解析
- 一定记住: k是获得对象的属性名，对象名[k]是获得属性值
2、渲染学生信息案例
示例代码如下：
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++) {
// console.log(i) // 下标索引号
// console.log(students[i]) // 每个对象
console.log(students[i].name)
console.log(students[i].hometown)
}运行结果如下：
学生信息渲染成表格：
示例代码如下：
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<!-- script写到这里 -->
<script>
// 1. 数据准备
let students = [
{ name: '小明', age: 18, gender: '男', hometown: '河北省' },
{ name: '小红', age: 19, gender: '女', hometown: '河南省' },
{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },
{ name: '小丽', age: 18, gender: '女', hometown: '山东省' },
{ name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
]
// 2. 渲染页面
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>
</table>四、内置对象
1、内置对象是什么
- JavaScript内部提供的对象，包含各种属性和方法给开发者调用
- 思考：我们之前用过内置对象吗?比如：document.write()、console.log()
2、内置对象-Math
- 介绍：Math对象是JavaScript提供的一个“数学”对象
- 作用：提供了一系列做数学运算的方法
- Math对象包含的方法有：
详细查找学习网站：Math对象在线文档（MDN）
3、内置对象-生成任意范围随机数
（1）内置对象-生成任意范围随机数
- Math.random()随机数函数，返回一个0-1之间，并且包括0不包括1的随机小数[0，1)
- 如何生成0-10的随机数呢?
Math.floor( Math .random( ) * (10 + 1))
- 如何生成5-10的随机数?
Math.floor(Math.random( ) * (5 + 1)) + 5
- 如何生成N-M之间的随机数
Math.floor(Math.random() * (M - N+1)) +N
（2）随机点名案例
需求：请把['赵云'，'黄忠，'关羽','张飞'，'马超'，'刘备'，‘曹操]随机显示一个名字到页面中，但是不允许重复显示
示例代码如下：
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
let random = Math.floor(Math.random() * arr.length)
// 2. 页面输出数组里面的元素
document.write(arr[random])
// 3. splice(起始位置(下标), 删除几个元素)
arr.splice(random, 1)
console.log(arr)（3）猜数字游戏案例
需求：程序随机生成1~10之间的一个数字，用户输入一个数字，并设置猜的次数
分析：
①如果大于该数字，就提示，数字猜大了，继续猜
②如果小于该数字，就提示，数字猜小了，继续猜
③如果猜对了，就提示猜对了，程序结束
示例代码如下：
// 1. 随机生成一个数字 1~10
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
let random = getRandom(1, 10)
// 2. 设定三次 三次没猜对就直接退出
let flag = true // 开关变量
for (let i = 1; i <= 3; i++) {
let num = +prompt('请输入1~10之间的一个数字:')
if (num > random) {
alert('您猜大了，继续')
} else if (num < random) {
alert('您猜小了，继续')
} else {
flag = false
alert('猜对了，真厉害')
break
}
}
// 写到for的外面来
if (flag) {
alert('次数已经用完')
}（4）生成随机颜色案例
需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
示例代码如下：
// 1. 自定义一个随机颜色函数
function getRandomColor(flag = true) {
if (flag) {
// 3. 如果是true 则返回 #ffffff
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
// 利用for循环随机抽6次 累加到 str里面
for (let i = 1; i <= 6; i++) {
// 每次要随机从数组里面抽取一个
// random 是数组的索引号 是随机的
let random = Math.floor(Math.random() * arr.length)
// str = str + arr[random]
str += arr[random]
}
return str
} else {
// 4. 否则是 false 则返回 rgb(255,255,255)
let r = Math.floor(Math.random() * 256) // 55
let g = Math.floor(Math.random() * 256) // 89
let b = Math.floor(Math.random() * 256) // 255
return `rgb(${r},${g},${b})`
}
}
// 2. 调用函数 getRandomColor(布尔值)
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())五、拓展-术语解释
1、一些专业术语
2、拓展-基本数据类型和引用数据类型
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
- 值类型:简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number, boolean,undefined,null
- 引用类型:复杂数据类型，在存储时变量中存储的仅仅是地址（引用)，因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
3、堆栈空间分配区别
（1）栈（操作系统）∶由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面
（2）堆（操作系统）∶存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面
