JavaScript第四天(3)数学内置对象，操作对象，遍历对象，随机数对象，内置对象Math,生成任意范围随机数，

编程语言 2022-04-20 01:50:04 阅读次数: 0

数学内置对象

  1. 属性访问
    声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。
    简单理解就是获得对象里面的属性值。
    在这里插入图片描述
  2. 对象访问属性有哪两种方式？
     点形式 对象.属性
     [] 形式 对象[‘属性’]
  3. 两种方式有什么区别？
     点后面的属性名一定不要加引号
     [] 里面的属性名一定加引号
     后期不同使用场景会用到不同的写法
    []对象[‘属性’]
    点后面的属性名一定不要加引号，【】里面的属性名一定要加引号，后期不同使用常见会用到不同的写法
  4. 对象中的方法
    数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
    数据行为性的信息称为方法，如跑步，唱歌等，一般是动词性的本质是函数
    let person={
    name:‘andy’,
    sayHi:function(){saHi:function(){document.write(‘hi’)}}
    S在这里插入图片描述
  5. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
  6. 多个属性之间使用英文 , 分隔
  7. 方法是依附在对象中的函数
  8. 方法名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

方法是依附在对象当中过的函数，
6. 对象中的方法访问
声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。
声明对象，并添加了若刚哥方法以后，可以使用，调用对象当中的函数，我们称之为方法调用
在这里插入图片描述
注意： 千万别忘了给方法名后面加小括号
千万别忘了给方法名后面加小括号

  1. 对象访问方法是如何实现的？
     对象.方法()
     person.sayHi()
  2. 对象方法可以传递参数吗？
     可以，跟函数使用方法基本一致
    对象。方法()
    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]是获得属性值

  1. 遍历对象用那个语句？
    for in
  2. 遍历对象中, 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: ‘山东省’}
    ]
    在这里插入图片描述
    遍历数组对象
    需求：根据以上数据渲染生成表格
    分析：
  3. 打印表格 头部和尾部
  4. 中间的行遍历数组，然后填充对象数据

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)
学习路径

  1. 内置对象是什么
  2. 内置对象Math
  3. 生成任意范围随机数

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、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面
栈，操作系统，由操作系统自动分配十分存放函数的参数值，局部变量的值，其操作方式类似于数据结构当中的栈
简单数据类型存放到栈
堆（操作系统），存储复杂类型对象，一般由程序员分配释放，如果程序员不释放，由垃圾回收机制引用数据类型存放到堆里面，引用数据类型存放到堆里面，
堆，操作系统，存储复杂数据类型，对象，一般由程序员分配释放，如果程序员不释放，由垃圾回收机制回收，引用数据类型存放到堆里面
堆，操作系统，存储复杂类型，一般由程序员分配释放，如果程序员不释放，由来记户授机制回收，引用数据类型存放到堆里面
在这里插入图片描述

  1. 简单类型的内存分配
    值类型（简单数据类型）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
简单数据类型存储的是值

猜你喜欢

转载自blog.csdn.net/weixin_43428283/article/details/124036999
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022