一、对象
1.什么是对象
- 对象（object）：JavaScript里的一种数据类型
- 可以理解为是一种无序的数据集合，注意数组是有序的数据集合
- 用来描述某个事物，例如描述一个人
- 人有姓名、年龄、性别等信息、还有吃饭睡觉等功能
- 如果用多个变量保存比较散，用对象比较统一
- 比如描述 班主任信息：
- 静态特征（姓名，年龄，身高，性别，爱好）=>可以使用数字，字符串，数组，布尔类型等表示
- 动态行为（点名，唱，跳）=>使用函数表示
2.对象使用
- 1.对象声明语法
例如：
- 2.对象有属性和 方法组成
- 属性：信息或者叫特征（名词）。比如 手机尺寸、颜色、价格
- 方法：功能或者叫行为（动词）。比如 手机打电话、发短信
- 3.属性
- 数据描述性的信息称为属性，比如人的姓名、身高、年龄、性别等，一般是名词性的。
- 属性都是成对出现的，包括属性名和值，它们之间用英文 : 分隔
- 多个属性之间使用英文，分隔
- 属性就是依附在对象上的变量（外面是属性，对象内时属性）
- 属性名可以使用""或’',一般情况下省略，除非名称遇到特符号如空格、中横线等
<script>
let user = {
name: 'tom',
age: 12,
gender: '女',
eat: function () {
document.write('人吃饭')
}
}
console.log(user)
console.log(typeof user)
对象的使用
- 对象本质是无序的数据集合，操作数据无非就是增删改查语法：
- 声明对象并添加了若干属性后，可以使用，获得对象中属性对应的值，称之为属性访问
- 语法：对象名.属性
<script>
let goods = {
name: '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
}
document.write(goods.address)
</script>
- 改
- 语法：对象.属性 = 新值
<script>
let goods = {
name: '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
}
goods.address = "上海"
document.write(goods.address)
</script>
- 增
- 语法：对象名.新属性 = 新值
<script>
let goods = {
name: '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
}
goods.price = 4999
document.write(goods.price)
console.log(goods)
</script>
- 删（了解）
- 语法：delete 对象名.属性
<script>
let goods = {
name: '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
}
delete goods.num
console.log(goods)
</script>
- 查的另一种写法
- 对于多名词属性或 - 等属性，点操作就不能用了
- 我们可以采取：对象[‘属性’]方式，单引号和双引号都可以
<script>
let goods = {
'goods-name': '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
}
document.write(goods['goods-name'])
</script>
- 5.对象中的方法
- 数据行为性的信息称为方法，如跑步、唱歌等，一般都是动词性的，其本质是函数。
<script>
let goods = {
'goods-name': '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
playGame: function (x) {
document.write(`玩游戏${x}`)
}
}
goods.playGame(1)
</script>
- 1.方法是由方法名和函数两部分构成，它们之间使用：分隔
- 2.多个属性之间使用英文，分隔
- 3.方法是依附在对象中的函数
- 4.方法名可以使用""或’',一般情况下省略，除非遇到特殊符号如空格、中横线等
3.遍历对象
<script>
let goods = {
'goods-name': '小米手机14pro',
num: 10012316554,
weight: "0.5kg",
address: "北京",
}
for (let k in goods) {
console.log(k)//打印属性名
document.write(goods[k])//打印属性值
}
</script>
- 一般不用这种方式变量数组，主要用来遍历对象
- for in语法中的k是一个变量，在循环过程中依次代表对象的属性名
- 由于k是变量，所以必须使用[]语法解析
- 一定记住：k是获得对象的属性名，对象名[k]是获得属性值
案例：
遍历数组中的对象的属性
<script>
let students = [
{ name: '小明', age: 13, gender: '男', hometown: '河东省' },
{ name: '小红', age: 19, gender: '男', hometown: '河北省' },
{ name: '小栏', age: 12, gender: '男', hometown: '河西省' },
{ name: '小四', age: 12, gender: '男', hometown: '河南省' },
{ name: '小五', age: 34, gender: '女', hometown: '河北省' },
]
for (let i = 0; i < students.length; i++) {
for (let k in students[i]) {
document.write(students[i][k])
}
document.write('<br>')
}
</script>
渲染学生信息
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<script>
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: '蓝翔技校' }
]
for (let i = 0; i < students.length; i++) {
document.write(`
<tr>
<td>${i}</td>
<td>${students[i].name}</td>
<td>${students[i].age}</td>
<td>${students[i].gender}</td>
<td>${students[i].hometown}</td>
</tr>`)
}
</script>
</table>
</body>
4.内置对象
4.1内置对象是什么
- JavaScript内部提供的对象，包含各种属性和方法给开发者调用
- 碰到过的内置对象
- document.wirte()
- console.log()
内置对象-Math
- 介绍：Math对象是JavaScirpt提供的一个“数字”对象
- 作用：提供了一系列做数学运算的方法
- Math对象包含的方法有：
- random：生成0-1之间的随机数（包含0不包含1）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
- Math在线访问
生成任意范围随机数
- Math.random()随机数函数，返回一个0-1之间，并且包括0不包括1的随机小数[0,1]
- 如何生成0-10的随机数呢？
let num = Math.floor(Math.random() * (10 + 1))
- 如何生成5-10的随机数?
let num = Math.floor(Math.random() * (5 + 1)) + 5
- 如何生成n-m直接的随机数
let num = Math.floor(Math.random() * (m - n + 1)) + n
随机打印一个人名（不能重复）
<script>
let arr = ['赵云', '马超', '关羽', '刘备']
let index = Math.floor(Math.random() * 4)
document.write(arr[index])
arr.splice(index, 1)
console.log(arr);
</script>
猜数字
<script>
let index = Math.floor(Math.random() * 11)
while (true) {
let num = +prompt('请输入一个数:')
if (index > num) {
alert('数字小了')
} else if (index < num) {
alert('数字大了')
} else {
alert('猜对了')
break
}
}
</script>
猜数字（限制次数）
<script>
let num = Math.floor(Math.random() * 11)
let flag = true //开关
for (let i = 0; i < 3; i++) {
let num1 = +prompt('请输入一个数:')
if (num > num1) {
alert('小了')
} else if (num < num1) {
alert('大了')
} else {
alert('猜对了')
flag = false
break
}
}
if (flag) {
alert('次数用完了')
}
</script>
随机颜色
<script>
function getRandomColor(flag = true) {
if (flag) {
let str = '#'
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
for (let i = 1; i <= 6; i++) {
str += arr[Math.floor(Math.random() * arr.length)]
}
return str
} 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})`
}
}
let colo1 = getRandomColor(true)
let colo2 = getRandomColor()
let color = getRandomColor(false)
document.write(colo1)
document.write(colo2)
document.write(color)
</script>
拓展：
术语
1.基本数据类型和引用数据类型
简单类型又叫基本数据类型或者值类型，复杂类型又叫做引用类型
- 值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
string, number ,boolean ,undefined ,null - 引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
堆栈空间分配区别：
1、栈（操作系统)：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈
简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收
引用数据类型存放到堆里面
2.复杂类型的内存分配
- 引用类型（复杂数据类型）：通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
- 引用类型变量（栈空间）里面存放的是地址，真正的对象实例存放在堆空间中
<script>
let num1 = 10
let num2 = num1
num2 = 20
console.log(num1) // 结果是10
let obj1 = {
age: 18
}
let obj2 = obj1 //obj1将它的地址给了obj2
// 修改属性
obj2.age = 20 //obj1和obj2指向堆中同一个对象
console.log(obj1.age)//20
</script>
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
