对象
目标:掌握对象相关知识,具备对象数组数据渲染页面的能力
- 什么是对象
- 对象使用
- 操作对象
- 遍历对象
- 内置对象
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>