前言
理解什么是对象，掌握定义对象的语法 掌握数学对象的使用
掌握数学对象的使用
一、对象是什么？
- 对象 对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。
- 对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
二、对象使用
1.声明对象
let 对象名={ 这里存放属性与方法}
2.1对象中属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
- 属性都是成 对出现的，包括属性名和值，名与值之间使用英文 : 分隔
- 多个属性之间使用英文 , 分隔
- 属性就是依附在对象上的变量
- 属性名可以使用 "" 或 '' ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
对象属性的书写方式：
<!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> /* 数组[] 有序数据集合 对象{} 无序数据集合 */ // 1.对象的声明 // 方法1：字面量生成对象 // let 对象名 ={} // 方法二.new关键字生成对象 // let obj = new obj{} // 2.对象构成 // 对象由属性和方法组成 // 属性由键值对格式组成键值之间用：隔开，属性之间用，隔开。 let goods = { name : 'iPhone14', num : 100012816024, weight : `0.55kg`, address : '中国大陆', // 特殊字符的属性名也需要‘’包括起来 'zhi-zao':'china' } console.log(goods); // 注意点：对象里面的属性名可以理解为变量，属性值相当于给变量赋值。 </script> </body> </html>
对象属性的增删改查操作
我先定义一个名为goods的对象
1.查找对象属性 格式：对象名.属性(返回的是属性值)
左侧查语法，右侧页面查看
2.修改对象属性 格式：对象名.属性 =新值
控制台查看
3.增加对象属性 格式： 对象名.新属性名=新值
控制台查看
4.删除对象属性 格式： delete 对象名.属性名
控制台查看
附上对象属性的增删改查的全部代码与笔记👇
<!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> let goods = { name: 'iPhone14', num: 100012816024, weight: `0.55kg`, address: '中国大陆', // 特殊字符的属性名也需要‘’包括起来 'produce-where': 'china' } // 查找对象 对象名.属性 返回的是属性值 // 特殊属性名写法：[]写属性名 /* 注意点：中括号一定需要引号才能接收变量名可解析变量，不然就当变量解析！！！ 点语法解析不了特殊字符*/ // console.log(goods['name']); document.write(goods['name']) document.write(goods.name) // 修改对象 对象名.属性 =新值 // goods.num = 10088611 // 增加对象 对象名.新属性名=新值 // goods.size = '6.1英寸' // document.write(goods) // console.log(goods); // 删除对象 // delete goods.weight // console.log(goods); </script> </body> </html>
2.2对象中方法
数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
- 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
- 多个属性之间使用英文 , 分隔
- 方法是依附在对象中的函数
- 方法名可以使用 "" 或 '' ，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象方法的书写方式：
<!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> let person={ name:'初映', //书写法则同属性一样 sayHi:function(){ console.log('你好呀~'); }, sum:function (x,y){ return x+y } } </script> </body> </html>
对象方法的增删改查操作
我先定义一个对象存放方法：
1.查找对象方法 格式：对象名.方法名（）
控制台查看
2.修改对象方法 格式：对象名.方法名=function{}
控制台查看
3.增加对象方法 格式：对象名.方法名=function{}
4.删除操作 格式:delete 对象名.方法名
控制台查看
附上对象属性的增删改查的全部代码与笔记👇
<!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> let person={ name:'初映', //书写法则同属性一样 sayHi:function(){ console.log('你好呀~'); }, sum:function (x,y){ return x+y } } //查 // person.sayHi() // console.log(person.sum(1,2)); // 改 person.sayHi=function(){ return '我已经把这个值给更改喽！' } // console.log(person.sayHi()); // 增 person.sing =function(){ console.log('在唱歌'); } // person.sing() // 删 delete person.sing console.log(person); </script> </body> </html>
三.对象的相关操作
1.遍历对象 格式：for(变量 in 对象名){}
<!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> let person={ name:'初映', height:184, sayHi:function(){ console.log('你好呀~'); }, sum:function (x,y){ return x+y } } for(let k in person){ // 这里是访问的属性名 // console.log(k); // k是变量需要[]解析，点语法无法解析，出现的是属性值 console.log(person[k]); } </script> </body> </html>
控制台查看
2.拓展：数组使用对象中的遍历方式 格式：for(变量 in 数组名){}
<!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> let arr = [10,20,30,40,50] for (let k in arr){ console.log(k); // 用这个方法输出的是字符串类型的，但是我输出的是数值型，两者类型被改变了 console.log(arr[k]); } </script> </body> </html>
控制台查看
3.数组配合对象渲染数组使用
<!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> <script> let students = [ { name: '小明', age: 18, gender: '蓝', hometown: '河北省' }, { name: '小红', age: 18, gender: '女', hometown: '河南省' }, { name: '小美', age: 18, gender: '女', hometown: '河北省' }, { name: '小绿', age: 18, gender: '蓝', hometown: '山东省' } ] for (let i = 0; i < students.length; i++) { console.log(students[i]); } </script> </head> <body> </body> </html>
控制台查看
四.内置对象
1.1内置对象是什么？
JavaScript内部提供的对象，包含各种属性和方法给开发者调用
我们之前是用过内置对象 ➢ document.write() ➢ console.log()
1.2内置对象Math
Math对象是JavaScript提供的一个“数学”对象
作用：提供了一系列做数学运算的方法
官方Math文档：Math - JavaScript | MDN (mozilla.org)
web中常用的Math方法：
random：生成0-1之间的随机数（包含0不包括1）
- ceil：向上取整
- floor：向下取整
- max：找最大数
- min：找最小数
- pow：幂运算
- abs：绝对值
下面举几个例子：
<!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> // ceil()向上取整 console.log(Math.ceil(1.5));//2 console.log(Math.ceil(-1.5));//-1 // floor()向下取整 console.log(Math.floor(-1.5));//-2 console.log(Math.floor(1.5));//1 //max()最大值,字符串会自动转 console.log(Math.max(10,20,30,'50')); // round()四舍五入 console.log(Math.round(1.5));//2 </script> </body> </html>
1.2.1Math.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> // 规则：左闭右开[0,1 ) console.log(Math.random()); // 获取0-10的随机数 console.log(Math.floor(Math.random()*11)); // 获取5-10的随机数 console.log(Math.floor( Math.random()*6+5)); // 调用网页上的方法 function getRandom(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 } // 获取90-100的数 console.log(getRandom(90,100)); </script> </body> </html>
下面是调用Math官方获取区间值的函数生成的
<!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> let ra = getRandom(1, 10) // 开关思想：flag=true for(let i=1;i<=3;i++){ let val = +prompt("请输入一个1-10的数字") if (val > ra) { alert('数字大了，继续猜~') } else if (val < ra) { alert('数字小了，继续猜~') } else { alert('猜对啦~') break } if(val===ra){ alert('猜对啦~') // flag设置为false停止弹框提示 break } if(i===3) { alert('三次机会使用结束~') } // if(flag){ // alert('三次机会使用结束~') // } } function getRandom(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 } </script> </body> </html>
1.2.2颜色获取案例（这个很重要）
<!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> body { background-color: #fff; } div { display: inline-block; width: 200px; height: 200px; } </style> </head> <body> <!-- 需求:该函数接收一个布尔类型参数,表示颜色的格式是十六进制还是rgb格式。 ①:如果参数传递的是true或者无参数,则输出 一个随机十六进制的颜色 ②:如果参数传递的是false,则输出 一个随机rgb的颜色 --> <script> console.log(getColor(true)); //document.write（）配合循环页面渲染生成多个数据 for(let i=1;i<60;i++){ document.write(`<div style =background-color:${getColor(true)}></div>`) } // 定义方法形参默认为空数组与变量为true(布尔值必须需要变量) function getColor(arr=[],flag = true) { // 返回16进制，，16进制最小为#000000-#ffffff // flag默认是true if (flag) { let str = '#' let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] // 16进制是#+6个数据，下面是产生六个数据，用const index 接收 for (let i = 1; i < 7; i++) { // 随机数最大值是数组长度-1因为下标从0开始的 const index = Math.floor(Math.random() * arr.length) // 数组搭配下标获取数组产生的数据，之后用str接收 str = str + arr[index] } // 这个return必须写在循环外面，不然的话第一次循环遇到了return就结束了循环，每次都是随机产生一个值 return str } else { // 返回rgb 255是rgb单个元素的取值为0-255 const r = Math.floor(Math.random() * 256) const g = Math.floor(Math.random() * 256) const b = Math.floor(Math.random() * 256) // 模板字符串拼接输出 return `rgb(${r},${g}.${b})` } } </script> </body> </html>
