数学内置对象
- 属性访问
声明对象,并添加了若干属性后,可以使用 . 或 [] 获得对象中属性对应的值,我称之为属性访问。
简单理解就是获得对象里面的属性值。
- 对象访问属性有哪两种方式?
点形式 对象.属性
[] 形式 对象[‘属性’] - 两种方式有什么区别?
点后面的属性名一定不要加引号
[] 里面的属性名一定加引号
后期不同使用场景会用到不同的写法
[]对象[‘属性’]
点后面的属性名一定不要加引号,【】里面的属性名一定要加引号,后期不同使用常见会用到不同的写法 - 对象中的方法
数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。
数据行为性的信息称为方法,如跑步,唱歌等,一般是动词性的本质是函数
let person={
name:‘andy’,
sayHi:function(){saHi:function(){document.write(‘hi’)}}
S - 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用 “” 或 ‘’,一般情况下省略,除非名称遇到特殊符号如空格、中横线等
方法是依附在对象当中过的函数,
6. 对象中的方法访问
声明对象,并添加了若干方法后,可以使用 . 调用对象中函数,我称之为方法调用。
声明对象,并添加了若刚哥方法以后,可以使用,调用对象当中的函数,我们称之为方法调用
注意: 千万别忘了给方法名后面加小括号
千万别忘了给方法名后面加小括号
- 对象访问方法是如何实现的?
对象.方法()
person.sayHi() - 对象方法可以传递参数吗?
可以,跟函数使用方法基本一致
对象。方法()
person.sayHi()
可以跟函数使用方法基本一致
对象方法可以传递参数吗?
可以跟函数使用方法基本一致
1.3 操作对象
对象本质是无序的数据的集合,操作数据无非是增删改查语法:
查询对象:对象.属性或者对象[‘属性’]
对象。方法()
重新赋值
对象。属性=值
对象。方法=function(){}
删除对象当中的属性
delete 对象名.属性名
1.3 操作对象
增加属性
也可以动态为对象添加属性,动态添加与直接定义是一样的,只是语法上更灵活
let person={
name:‘andy’
age:18}
person.hobby=‘足球’
person[‘sex’]=‘nan’
新增对象中的方法
也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更灵活
也可以动态为对象添加方法,动态添加与直接定义是一样的,只是语法上更加灵活
person.move=function(){
document.write(‘移动一点点’)}
注:无论是属性或是方法,同一个对象中出现名称一样的,后面的会覆盖前面的。
无论是属性或者方法,同一个对象当中出现名称一样的,后面会覆盖前面的、
1.对象是什么?
一种数据类型
可以理解为一堆数据的集合
用来表示某个事物
2. 对象的是如何声明和使用的?
用 {} 把一堆数据包起来
多个属性和方法之间用逗号隔开
console.log输出能方便查看对象里有哪些
如何动态添加属性和方法?
对象如果有这个属性相当于重新赋值
对象如果没有这个属性相当于动态添加一个属性属性和方法
对象如果有这个属性相当于重新赋值
1. 4 遍历对象
遍历对象
对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
对象没有像数组一样的length属性,所以无法确定长度
对象是无序的键值对,没有规律,不像数组里面有规律的下表
for(let k in obj){console.log(k)console.log(obj[k])}
一般不用这种方式遍历数组、主要是用来遍历对象
一定记住: k 是获得对象的属性名, 对象名[k] 是获得 属性值
k是获得对象的属性名,对象名[k]是获得属性值对象名[k]是获得属性值
- 遍历对象用那个语句?
for in - 遍历对象中, for k in obj,获得对象属性是那个,获得值是那个?
获得对象属性是 k 获得对象值是 obj[k]
获得对象属性是k,
获得对象值是obj[k]
遍历数组对象
需求:请把下面数据中的对象打印出来:
// 定义一个存储了若干学生信息的数组
let students = [
{name: ‘小明’, age: 18, gender: ‘男’, hometown: ‘河北省’},
{name: ‘小红’, age: 19, gender: ‘女’, hometown: ‘河南省’},
{name: ‘小刚’, age: 17, gender: ‘男’, hometown: ‘山西省’},
{name: ‘小丽’, age: 18, gender: ‘女’, hometown: ‘山东省’}
]
遍历数组对象
需求:根据以上数据渲染生成表格
分析: - 打印表格 头部和尾部
- 中间的行遍历数组,然后填充对象数据
i + 1 {i+1} i+1students[i].name} s t u d e n t s [ i ] . a g e {students[i].age} students[i].age{students[i].gender}
<!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>
console.log(Math.PI) // 圆周率 π
console.log(Math.random()) // 随机数 随机抽奖 随机点名
// 返回的是小数 但是能得到 0 得不到 1
// 向上取整 返回的整数
console.log(Math.ceil(1.1)) // ceil 2
console.log(Math.ceil(1.5)) // ceil 2
console.log(Math.ceil(1.9)) // ceil 2
// 向下取整 返回的整数 floor
console.log(Math.floor(1.1)) // floor 1
console.log(Math.floor(1.5)) // floor 1
console.log(Math.floor(1.9)) // floor 1
console.log('-------------------------------')
// round 就近取整( .5往大取证) 返回的整数
console.log(Math.round(1.1)) // round 1
console.log(Math.round(1.5)) // round 2
console.log(Math.round(1.9)) // round 2
console.log('-------------------------------')
console.log(Math.round(-1.1)) // round -1
console.log(Math.round(-1.5)) // round -1
console.log(Math.round(-1.9)) // round -2
// 最大值和最小值
console.log(Math.max(1, 5, 9, 45))
console.log(Math.min(1, 5, 9, 45))
</script>
</body>
</html>
Math.ceil(1.5)
Math.ceil(1.9)
Math.floor(1.1)
Math,round(1.1)
Math.round(1.5)
Math.round(1.9)
随机数对象
<!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>
// 求得是 N - M 之间的一个随机数公式
// let random = Math.floor(Math.random() * (10 - 1 + 1)) + 1
// console.log(random)
// 封装一个随机数函数 min 到 max
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
let random = getRandom(1, 10)
console.log(random)
let random1 = getRandom(1, 50)
console.log(random1)
</script>
</body>
</html>
functiojn getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min}
let random=getRandom(1,10)
console.log(rnadom)
let random=getRandom(1,10)
console.log(random)
let random1=getRandom(1,50)
学习路径
- 内置对象是什么
- 内置对象Math
- 生成任意范围随机数
2.1 内置对象是什么
JavaScript内部提供的对象,包含各种属性和方法给开发者调用
思考:我们之前用过内置对象吗?
document.write()
console.log()
JS内部提供的对象,包括各种属性和方法给开发者调用
2.2 内置对象Math
Math对象是JavaScript提供的一个“数学高手”对象
提供了一系列做数学运算的方法
方法有:
random:生成0-1之间的随机数(包含0不包括1) ceil:向上取整
floor:向下取整
max:找最大数
min:找最小数
pow:幂运算
abs:绝对值
Math对象在线文档
random生成01之间的随机数ceil向上确证
2.3 生成任意范围随机数
Math.floor(Math.random()(10+1))
Math.floor(Math.rnandom()(5+1))+5
Math.floor(Math.rnadom()(M-N+1))+N
随机点名案例
需求:请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中
分析:
①:利用随机函数随机生成一个数字作为索引号
②: 数组[随机数] 生成到页面中
function getRandom(min,max){
return Math.floor(Math.random()(max-min+1))+min}
let arr=[‘赵云’,‘’,‘’,‘’‘,’‘,’']
let random=getRandom(0,arr.length-1)
0,arr.length-1)
ducomentwrite(arr[random)
<!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>
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']
// 生成1个随机数 作为数组的索引号
let random = getRandom(0, arr.length - 1)
// console.log(random)
document.write(arr[random])
</script>
</body>
</html>
随机点名案例改进
需求:请把 [‘赵云’, ‘黄忠’, ‘关羽’, ‘张飞’, ‘马超’, ‘刘备’, ‘曹操’] 随机显示一个名字到页面中,但是不
允许重复显示
分析:
①:利用随机函数随机生成一个数字作为索引号
②:数组[随机数] 生成到页面中
③:数组中删除刚才抽中的索引号
<!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>
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 声明一个数组
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']
// 生成1个随机数 作为数组的索引号
let random = getRandom(0, arr.length - 1)
// console.log(random)
document.write(arr[random])
// 之后删除这个 人的名字
// arr.splice(从哪里开始删, 删几个)
arr.splice(random, 1)
console.log(arr)
</script>
</body>
</html>
let random=getRandom(0,arrlength-1)
documentwrite(arr[random])
猜数字游戏
需求:程序随机生成 1~10 之间的一个数字,用户输入一个数字
①:如果大于该数字,就提示,数字猜大了,继续猜
②:如果小于该数字,就提示,数字猜小了,继续猜
③:如果猜对了,就提示猜对了,程序结束
<!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>
// 随机数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 生成 1~10 之间的随机数
let random = getRandom(1, 10)
// console.log(random)
// 3. 用户输入 不断的弹框直到输入正确为止
while (true) {
let num = +prompt('请您输入一个数字:')
// 如果输入的大于随机数就提示猜大了
if (random < num) {
alert('私密马赛,你猜大了')
} else if (random > num) {
alert('比亚乃, 你猜小了')
} else {
alert(' 萨卡迪卡,正确')
break // break 退出循环 return 退出函数
}
// 如果输入的小于随机数就提示猜小了
// 如果输入的正好就提示正确
}
</script>
</body>
</html>
function getRandom(min,max){
return Math.floor(Math.random()(max-min+1))+min}
let random=getRandom(1,10)
用户输入不断的弹框指导输入正确位置
function getRandom(min,max){
return Math.fllor(Math.random()(max-min+1))+min}
let random=getRandom(,10)
while(true){let num=+prompt('请您输入一个胡子
)
if(rand<num){alert(‘斯马塞’)
//如果输入的小于随机数就提示猜小了
‘//如果输入的正好就提示正确的
break退出循环,return退出函数
学成在线页面渲染案例
需求:根据数据渲染列表页面
分析:
①:根据数据来渲染页面
语句:
一句代码也称之为一条语句,一般按照用途还会分类,输出语句,声明语句。分支语句
表达式:
能产生值的代码,一般配合运算符出现
标识(标识符(
变量名,函数名的另一种叫法
保留字
在木掐架的JS当中没有意义,但是没来可能会具有意义的词汇,int,short,long,char
关键字:
在JS当中具有特殊意义的词汇,let,var,function,if,else,switch,case,break
目标:了解基本数据类型和引用数据类型的存储方式
简单类型又叫做基本数据类型或者值类型,复杂类型叫做引用类型
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型
string ,number,boolean,undefined,null
string,number,boolean,undefined,null,string,nunmber,boolean,undefined,null
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型
通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等
在符出的时候变量当中存储的仅仅是地址引用,因此叫做引用数据类型,通过new关键字创建的对象,系统对象,自定义对象,object,array,date
堆栈空间分配区别:
1、栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中
的栈;
简单数据类型存放到栈里面
2、堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。
引用数据类型存放到堆里面
栈,操作系统,由操作系统自动分配十分存放函数的参数值,局部变量的值,其操作方式类似于数据结构当中的栈
简单数据类型存放到栈
堆(操作系统),存储复杂类型对象,一般由程序员分配释放,如果程序员不释放,由垃圾回收机制引用数据类型存放到堆里面,引用数据类型存放到堆里面,
堆,操作系统,存储复杂数据类型,对象,一般由程序员分配释放,如果程序员不释放,由垃圾回收机制回收,引用数据类型存放到堆里面
堆,操作系统,存储复杂类型,一般由程序员分配释放,如果程序员不释放,由来记户授机制回收,引用数据类型存放到堆里面
- 简单类型的内存分配
值类型(简单数据类型)string,number,boolean,undefined,null
string,number,boolean,undefined,null
值类型(简单数据类型): string ,number,boolean,undefined,null
值类型变量的数据直接存放在变量(栈空间)中
值类型变量数据直接存放到栈空间当中,值类型简单数据类型,string,number,boolean,undefined,null
string,number,boolean,undei
引用类型(复杂数据类型):通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等 引用类型变量(栈空间)里存放的是地址,真正的对象实例存放在堆空间中nfed,null,
引用类型变量栈空间里存放的是地址,真正的对象实例存放到堆空间当中
let userObj={}0x01
栈->堆
let num=10
let num2=num
num=20
let obj1={age:18}
let obj2=obj1
obj1.age=20
<!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>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
<script>
document.write(`你好`)
</script>
</div>
</body>
</html>
<!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>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<script>
// 简单数据类型存储的是值
let num1 = 10
let num2 = num1
num2 = 20
console.log(num1)
// 对象 引用数据类型 栈里面存储的是地址
let obj1 = {
age: 18
}
let obj2 = obj1
obj2.age = 20
// console.log(obj1, obj2)
console.log(obj1) // 20
</script>
</body>
</html>
let obj1={age:18}
let obj2=obj1
obj2.age=20
简单数据类型存储的是值