【10.0】前端基础之JavaScript进阶

【10.0】前端基础之JavaScript进阶

【一】自定义对象

• 可以看成Python中的字典，但是在JS中的自定义对象要比Python里面的字典操作起来更方便

【1】创建自定义对象方式一

var d = {"键":"值",};

• 操作方法

var dict = {"name":"dream","age":18};

var dict = {"name":"dream","age":18};

dict
// {name: 'dream', age: 18}

// 查看当前类型
typeof dict
// 'object'

// 根据键取值
dict["name"]
// 'dream'

// 根据键取值
dict.name;
// 'dream'

• 支持 for 循环取值
  • 拿到的也是键值对

for (let i in dict){
    console.log(i,dict[i])
};

for (let i in dict){
    console.log(i,dict[i])
};

/*
VM3887:2 name dream
VM3887:2 age 18
*/

【2】创建自定义对象方式二

var dict1 = new Object();
# 空字典 {}

• 向其内部添加元素

var dict1 = new Object();
dict1.name = "dream";

【二】日期对象Date

【1】定义时间

let d3 = new Date();

• 结构化时间

let d3 = new Date()
// undefined
d3
// Tue Jul 04 2023 18:03:06 GMT+0800 (香港标准时间)

• 转时间格式

let d3 = new Date()
// undefined

d3.toLocaleString();
// 2023/7/4 18:03:06'

• 自定义时间

let d4 = new Date("2028/11/11 11:11:11");
d4.toLocaleString();
// '2028/11/11 11:11:11'

let d5 = new Date(1111,11,11,11,11,11);
d5.toLocaleString(); // 月份从0开始 0-11月
// '1111/12/11 11:11:11'

【2】内置方法

let d0 = new Date();

d0.getDate();
// 获取日
d0.getDay();
// 获取星期
d0.getMonth();
// 获取月份（0-11）
d0.getFullYear();
// 获取年份
d0.getHours();
// 获取小时
d0.getMinutes();
// 获取分钟
d0.getSeconds();
// 获取秒数
d0.getMilliseconds();
// 获取毫秒数
d0.getTime();
// 获取时间戳

【三】JSON对象

• 在Python中序列化和反序列化使用
  • dumps 序列化
  • loads 反序列化

Supports the following objects and types by default:

    +-------------------+---------------+
    | Python            | JSON          |
    +===================+===============+
    | dict              | object        |
    +-------------------+---------------+
    | list, tuple       | array         |
    +-------------------+---------------+
    | str               | string        |
    +-------------------+---------------+
    | int, float        | number        |
    +-------------------+---------------+
    | True              | true          |
    +-------------------+---------------+
    | False             | false         |
    +-------------------+---------------+
    | None              | null          |
    +-------------------+---------------+

• 在js中也有序列化和反序列化方法
  • JSON.stringify() ----> dumps 序列化
  • JSON.parse() -----> loads 反序列化

【四】正则对象 RegExp

• 在Python中如果需要使用正则 需要借助于re模块
• 在 js 中需要创建正则对象

【1】声明正则表达式的方式一

let reg = new RegExp(正则表达式);

【2】声明正则表达式的方式二

let reg1 = /正则表达式/

【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");

全局模式的指针移动

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对象

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)      返回角的正切。