【10.0】前端基础之JavaScript进阶#

【一】自定义对象#

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

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

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

操作方法

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

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

3
dict
4
// {name: 'dream', age: 18}
5

6
// 查看当前类型
7
typeof dict
8
// 'object'
9

10
// 根据键取值
11
dict["name"]
12
// 'dream'
13

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

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

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

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

5
/*
6
VM3887:2 name dream
7
VM3887:2 age 18
8
*/

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

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

向其内部添加元素

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

【二】日期对象Date#

【1】定义时间#

1
let d3 = new Date();

结构化时间

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

转时间格式

1
let d3 = new Date()
2
// undefined
3

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

自定义时间

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

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

【2】内置方法#

1
let d0 = new Date();
2

3
d0.getDate();
4
// 获取日
5
d0.getDay();
6
// 获取星期
7
d0.getMonth();
8
// 获取月份（0-11）
9
d0.getFullYear();
10
// 获取年份
11
d0.getHours();
12
// 获取小时
13
d0.getMinutes();
14
// 获取分钟
15
d0.getSeconds();
16
// 获取秒数
17
d0.getMilliseconds();
18
// 获取毫秒数
19
d0.getTime();
20
// 获取时间戳

【三】JSON对象#

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

1
Supports the following objects and types by default:
2

3
    +-------------------+---------------+
4
    | Python            | JSON          |
5
    +===================+===============+
6
    | dict              | object        |
7
    +-------------------+---------------+
8
    | list, tuple       | array         |
9
    +-------------------+---------------+
10
    | str               | string        |
11
    +-------------------+---------------+
12
    | int, float        | number        |
13
    +-------------------+---------------+
14
    | True              | true          |
15
    +-------------------+---------------+
16
    | False             | false         |
17
    +-------------------+---------------+
18
    | None              | null          |
19
    +-------------------+---------------+

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

【四】正则对象 RegExp#

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

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

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

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

1
let reg1 = /正则表达式/

【3】匹配数据#

1
let reg = new RegExp(正则表达式);
2
reg.test(待匹配内容)
3

4
// 获取字符串中的某个字母
5
let str = "dream eam eam eam"
6
// 字符串内置方法
7
str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配
8
str.match(/m/g) // 全局匹配 g表示全局模式

1
// 获取字符串中的某个字母
2
let str = "dream eam eam eam"
3
undefined
4
str.match(/m/) // 拿到第一个字母并返回索引，不会继续匹配
5
// ['m', index: 4, input: 'dream eam eam eam', groups: undefined]
6
str.match(/m/g) // 全局匹配 g表示全局模式
7
// (4) ['m', 'm', 'm', 'm']

【4】正则的BUG#

1
let reg = /^[a-zA-Z][A-Za-z0-9]/g
2

3
reg.test("dream");

全局模式的指针移动#

1
let reg = /^[a-zA-Z][A-Za-z0-9]/g
2

3
// 第一次匹配成功 -- 有数据-- 指针移动到尾端
4
reg.test("dream");
5
// true
6

7
// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据
8
reg.test("dream");
9
// false
10

11
// 第三次匹配成功 -- 有数据-- 指针回到头部
12
reg.test("dream");
13
// true
14
reg.test("dream");
15
// false
16

17
// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据
18
reg.lastIndex
19
// 0
20
reg.test("dream");
21
// true
22

23
// 第三次匹配成功 -- 有数据-- 指针回到头部
24
reg.lastIndex
25
// 2

匹配数据为空时#

1
let reg = /^[a-zA-Z][A-Za-z0-9]/
2

3

4
reg.test();

1
let reg = /^[a-zA-Z][A-Za-z0-9]/
2

3
// 针对上述表达式 ：没有数据时。默认传进去的参数是  undefined --- 匹配成功
4
reg.test();
5
// true
6
reg.test();
7
// true

【五】math对象#

1
abs(x)      返回数的绝对值。
2
exp(x)      返回 e 的指数。
3
floor(x)    对数进行下舍入。
4
log(x)      返回数的自然对数（底为e）。
5
max(x,y)    返回 x 和 y 中的最高值。
6
min(x,y)    返回 x 和 y 中的最低值。
7
pow(x,y)    返回 x 的 y 次幂。
8
random()    返回 0 ~ 1 之间的随机数。
9
round(x)    把数四舍五入为最接近的整数。
10
sin(x)      返回数的正弦。
11
sqrt(x)     返回数的平方根。
12
tan(x)      返回角的正切。

音乐

音乐

【10.0】前端基础之JavaScript进阶#

【一】自定义对象#

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

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

【二】日期对象Date#

【1】定义时间#

【2】内置方法#

【三】JSON对象#

【四】正则对象 RegExp#

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

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

【3】匹配数据#

【4】正则的BUG#

全局模式的指针移动#

匹配数据为空时#

【五】math对象#

支持与分享

音乐

JavaScript 进阶

【10.0】前端基础之JavaScript进阶#

【一】自定义对象#

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

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

【二】日期对象Date#

【1】定义时间#

【2】内置方法#

【三】JSON对象#

【四】正则对象 RegExp#

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

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

【3】匹配数据#

【4】正则的BUG#

全局模式的指针移动#

匹配数据为空时#

【五】math对象#

支持与分享