【16.0】JavaScript对象
【一】js对象概念
- 【特性】js中的对象时无序的属性集合
- 【理解】我们可以把
js里的对象想象成py中的字典，具有键值对，其实就是属性和属性值u，对象就是一个容器，里面属性的堆放肯定时无序的 - 【玩法】对象的特征–可以在对象的属性中表示，对象的行为–在对象的方法中表示
- 【类比】就下
py中的实例化对象，具有类属性和自己的属性等等，是一个很抽象的团概念
【二】js对象的创建
-
【直接创建】
-
用花括号来创建一个空对象，或者在初始化创建的时候，就给我们的对象添加指定键值对
var obj={}//属性之间逗号隔开 const person = {name:"opp",gender:"male"};
-
-
【new关键字生成】
-
直接生成一个空对象
var obj = new Object() -
放值
obj.name="opp"
-
-
【自定义函数构造】
-
就像构造类一样，利用this初始化他的自身属性,(this就类似我们的init)
function Person(name,gender){this.name=name;this.gender=gender;} const opp=new Person("opp","male");//点出属性 console.log(opp.gender) //male
-
【三】js对象的调用
【1】属性访问
-
【普通】直接对象名（.)点相应的属性
-
【特定】在对象内部可以使用this加 . 调用属性
function Person(name,gender){this.name=name;this.gender=gender;} const opp=new Person("opp","male");//点出属性 console.log(opp.gender) //male//在内部用this function Person(name,gender){this.name=name;this.gender=gender;console.log(`这是 ${this.name}`) //注意是反引号 } const opp=new Person("opp","male"); //得到 这是 opp
【2】方法调用
- 和上面一样，上面是属性，在这是方法名
【3】索引式访问
-
在对象后[“属性名]
function Person(name,gender){this.name=name;this.gender=gender;} const opp=new Person("opp","male"); //调用name属性 console.log(opp["name"]); //opp
【4】遍历数组for in
-
使用for in遍历对象的可枚举属性，但不包括原型链上的属性
for (let key in opp) {if (person.hasOwnProperty(key)) {console.log(`${key}: ${person[key]}`);} } //name: opp //gender: male
【四】js对象----日期对象Date
【1】概念
- 处理日期时间和操作相关的方法
【2】日期对象的创建
-
日期对象类型不同，有很多的创建方式，都是Date去创建的，类似于内置方法，有很多的属性，我们根据需求利用属性创建
-
创建当前 日期和时间的对象实例
-
var currentDate = new Date();
-
-
创建指定 日期和时间的对象实例
-
var specificDate = new Date(2024,6,12,10,30,); //以此为年月日 时分秒 2024-07-12T02:30:30.000Z //会做一个转换 编程国际时间
-
-
结构化时间
-
//let变成局部变量 let currentDate = new Date() // undefined currentDate //2024-06-12T09:01:18.799Z（国际时间）
-
-
转时间格式
-
let currentDate = new Date() currentDate.toLocaleString(); //2024/6/12 17:03:49
-
-
自定义时间
-
//自己打好时间格式 let specificDate = new Date("2028/11/11 11:11:11"); specificDate.toLocaleString(); //2028/11/11 11:11:11//直接传入时间 let specificDate = new Date(2024,6,11,11,1,2,2); console.log(specificDate.toLocaleString()); // 2024/7/11 11:01:02
-
【3】日期对象的内置方法
-
获取具体的 年月日信息
-
let da=new Date //获取年份 da.getFullYear(); //获取月份(0-11 0表示1月) da.getMonth(); // 获取日（月中的某一天） d0.getDay(); // 获取星期 d0.getHours(); // 获取小时 d0.getMinutes(); // 获取分钟 d0.getSeconds(); // 获取秒数 d0.getMilliseconds(); // 获取毫秒数 d0.getTime(); // 获取时间戳
-
-
设置时间和日期
-
var data=new Date();date.setFullYear(2024); // 设置年份 date.setMonth(8); // 设置月份（表示一月，11表示十二月） date.setDate(15); // 设置日期（月中的某一天） date.setHours(18); // 设置小时 date.setMinutes(45); // 设置分钟 date.setSeconds(30); // 设置秒数
-
-
格式化时间
-
日期对象内没有内置的格式化方法，但是可以使用其他的方法将日期和时间格式转为想要的格式
-
var data=new Date();var formattedDate = data.toLocaleDateString(); //格式化为本地日期字符串 var formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串 var formattedDateTime = date.toLocaleString(); // 格式化为本地日期和时间字符串
-
【五】javascript和json对象转换
-
【对比】
- 在py中 dumps是序列化 loads是反序列化 （序列化是转成json对象）
- 在js中
JSON .stringify是序列化JSON.parse是反序列化
-
【序列化】
JSON.stringify-
stringify序列化成json对象
-
//JavaScript对象 var opp={name:"opp",gender:"male"};//生成json对象 var oppj=JSON.stringify(opp); console.log(oppj); //{"name":"opp","gender":"male"}
-
-
【反序列化】
JSON.parse-
将json对象转成js对象
-
var oppjs=JSON.parse(oppj) //{ name: 'opp', gender: 'male' } //还给自动变成单引号了
-
【六】正则对象RegExp
- 正则表达式（Regular Expression）是一种用来匹配、查找和操作字符串的工具
【创建方式】
-
利用内置函数
var reg = new RegExp(正则表达式); -
直接写出自己的正则表达式
var reg = /正则表达式/
【正则的一些方法】
-
test( ) 方法
-
测试字符串是否可以匹配正则表达式----得到布尔值
var str='hello world'; //写出正则表达式 var pattern=/hello/; //进行匹配 var result=pattern.test(str); console.log(result);//得到true
-
-
exec( )
-
根据正则表达式匹配，将匹配的结果返回成数组（包含内容，索引，原数组）
-
没有匹配到，返回null
var str='hello world'; //写出正则表达式 匹配l和后一个的字母 var pattern=/l+/g; //进行匹配 var result=pattern.exec(str); console.log(result);//只得到第一个匹配项 [ 'll', index: 2, input: 'hello world', groups: undefined ]
-
-
match（）
-
将匹配内容返回数组
-
没匹配到，返回null
var str='hello world'; //写出正则表达式 var pattern=/l+/g; //进行匹配 var result=str.match(pattern); console.log(result);//[ 'll', 'l' ] //匹配e+ //[ 'e' ]
-
-
search()
-
在字符串中搜索匹配正则表达式的内容，并返回第一个匹配的索引位置。
-
没匹配到 返回-1
var str = "Hello, world!"; var pattern = /lo/; var result = str.search(pattern); console.log(result); // 输出：3
-
-
replace()
-
将匹配项替换成新的内容
-
var str = "Hello, world!"; var pattern = /o/g; var replacement = "a"; var result = str.replace(pattern, replacement); console.log(result); // 输出：Hella, warld!
-
-
flags
-
返回正则表达式的修饰符标志字符串
var pattern = /hello/gi; console.log(pattern.flags); // 输出：givar pattern = /hello/g; console.log(pattern.flags); // 输出：g
-
【3】匹配数据
-
let reg = new RegExp(正则表达式); reg.test(待匹配内容)// 获取字符串中的某个字母 let str = "dream eam eam eam" // 字符串内置方法 str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配 str.match(/m/g) // 全局匹配 g表示全局模式 -
// 获取字符串中的某个字母 let str = "dream eam eam eam" undefined str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配 // ['m', index: 4, input: 'dream eam eam eam', groups: undefined] str.match(/m/g) // 全局匹配 g表示全局模式 // (4) ['m', 'm', 'm', 'm']
【4】正则的bug
-
在正则中，匹配过程中指针会移动，第一次匹配会移动到数据的末尾，所以第二次匹配都无效，第二次匹配完又倒回最初，所以第三次匹配又有效
-
【实例】
-
全局模式的指针移动
-
let reg = /^[a-zA-Z][A-Za-z0-9]/g// 第一次匹配成功 -- 有数据-- 指针移动到尾端 reg.test("dream"); // true// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据 reg.test("dream"); // false// 第三次匹配成功 -- 有数据-- 指针回到头部 reg.test("dream"); // true reg.test("dream"); // false// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据 reg.lastIndex // 0 reg.test("dream"); // true// 第三次匹配成功 -- 有数据-- 指针回到头部 reg.lastIndex // 2 -
匹配数据为空时
let reg = /^[a-zA-Z][A-Za-z0-9]/reg.test();let reg = /^[a-zA-Z][A-Za-z0-9]/// 针对上述表达式 ：没有数据时。默认传进去的参数是 undefined --- 匹配成功 reg.test(); // true reg.test(); // true
-
【七】math对象
-
生成一些关于数学的式子
-
【用法】Math.方法名（传参数）
-
abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x) 对数进行下舍入。 log(x) 返回数的自然对数（底为e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 -
【实例】
-
abs()
numabs=Math.abs(-2); console.log(numabs); //得到2
-
![[GESP202306 三级] 春游](http://pic.xiahunao.cn/[GESP202306 三级] 春游)
