数组方法补充，JavaScript之函数，匿名函数，箭头函数，JavaScript之对象，日期对象Date，JSON对象,正则对象 （RegExp）,Math对象,avaScript之DOMBOM,Window对象,Window子对象,弹出框,计时器相关

Ⅰ 数组方法补充

【一】forEach方法

【1】一个参数

• 数组中的每一个元素

// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
undefined

// 参数（一个函数，一个迭代列表）
ll.forEach(function (value) {
    console.log(value)
},ll)

/*
 11
 22
 33
 44
 55
 66
 77
*/

【2】两个参数

• 数组中的每一个元素 + 数据的索引

// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
// undefined

// 参数（一个函数，一个迭代列表,元素所在的索引值）
ll.forEach(function (value,index) {
    console.log(value,index)
},ll)

/*
 11 0
 22 1
 33 2
 44 3
 55 4
 66 5
 77 6
*/

【3】三个参数

• 数组中的每一个元素 + 数据的索引 + 数据的来源

// 类似于Python中的map函数
var ll = [11,22,33,44,55,66,77];
undefined

// 参数（一个函数，一个迭代列表,元素所在的索引值,数据的来源）
ll.forEach(function (value,index,arr) {
    console.log(value,index,arr)
},ll)

/*
 11 0 (7) [11, 22, 33, 44, 55, 66, 77]
 22 1 (7) [11, 22, 33, 44, 55, 66, 77]
 33 2 (7) [11, 22, 33, 44, 55, 66, 77]
 44 3 (7) [11, 22, 33, 44, 55, 66, 77]
 55 4 (7) [11, 22, 33, 44, 55, 66, 77]
 66 5 (7) [11, 22, 33, 44, 55, 66, 77]
 77 6 (7) [11, 22, 33, 44, 55, 66, 77]
*/

【二】splice

【1】两个参数

• 起始位置 + 删除的个数

var ll = [11,22,33,44,55,66,77];
ll
// (7) [11, 22, 33, 44, 55, 66, 77]

// 从索引为0的位置向后删除三个元素
ll.splice(0,3);
// (3) [11, 22, 33]
ll
// (4) [44, 55, 66, 77]

【2】三个参数

• 先删除后添加

// 先将指定索引的元素删除，再在原来的位置添加后面的元素
ll
// (4) [44, 55, 66, 77]
ll.splice(0,1,888);
// [44]
ll
// (4) [888, 55, 66, 77]

【三】map

• 类似于forEach
  • 也可以加三个参数

var l1 = [11,22,33,44,55,66,77,88]
// undefined
l1
// (8) [11, 22, 33, 44, 55, 66, 77, 88]

l1.map(function(value){console.log(value)},l1)

/*
 11
 22
 33
 44
 55
 66
 77
 88
*/

l1.map(function(value,index){return value*2},l1)
/*
(8) [22, 44, 66, 88, 110, 132, 154, 176]
0: 22
1: 44
2: 66
3: 88
4: 110
5: 132
6: 154
7: 176
lengt: 8
*/

【补】Python中常用方法

【1】添加元素的方式

• append
  • 尾部追加
• extend
  • 扩展列表
  • 内部是 for循环 + append
• insert
  • 指定位置插入元素

【2】删除元素的方式

• pop
  • 弹出元素（默认是最后一个元素）
• remove
  • 移除元素
• del
  • 删除元素通用方法

【3】常用的方法

• map
  • 映射函数
• zip
  • 拉链方法
  • 将两个列表中的元素两两拼接成元祖返回
• filter
  • 过滤函数
  • 符合条件为真的元素被留下
• reduce
  • 多个进一个出

Ⅱ JavaScript之函数

【一】函数

• 函数function，也叫做功能，方法 ，函数可以将一段代码封装起来，函数就具备了特定的功能
• 函数的作用就是封装一段代码，将来可以重复使用
• 在Python中定义函数需要用 def
• 在JavaScript中定义函数需要用 function

【二】函数声明

【1】先声明再调用

• 函数必须先声明，才能使用

【2】函数声明的语法

function 函数名 （参数） ｛代码体｝

function 函数名(形参,形参,形参，形参...){
    函数体代码
}

• 函数声明的时候函数不会立即执行，只有调用的时候才会执行

【三】函数调用

• 函数名加（）
• 函数调用时，会立即执行，代码体里面的代码
• 可以多次调用，每次调用是独立不相关的
• 函数的执行跟定义位置无关，只与调用的位置有关

【四】函数的分类

【1】无参函数

// 无参函数
function foo(){
}

foo()

// 例如
// 无参函数
function func1(){
    console.log("我是无参函数")
}

func1()

【2】有参函数

// 【2】有参函数
function bar(a) {
    console.log(a)
}

//例如
// 有参函数
function func2(a,b){
    console.log(a,b)
};

func2(1,2)

• 示例

function func2(a,b){
    console.log(a,b)
};

func2(1,2)
// 1 2

func2(1,2,3,4,5,6,7)
// 1 2

func2(1)
// 1 undefined

• 在js中传多了只拿对应的数据
• 在js中传少了也不会报错

【五】函数的参数

// 分为实参和形参
// 如果在python中实参传递参数的时候可以按照关键字传递参数也可以额按照位置传递参数
// 在js中也可以按照关键字或位置传递参数
bar(a = 1)
bar(1)

【1】接口

• 函数预留了一个接口，专门用于用户自定义内容，让函数的执行结果发生变化
• 接口：指的就是函数的参数

【2】参数类型

• 函数的阐述可以没有，可以是多个，多个参数 之间用逗号分隔
• 函数的参数根据书写位置的不同，名称也不同

（1）形式参数

• 是定义在函数参数体里面的参数

（2）实际参数

• 在函数调用的时候传入的参数

【3】小结

• 实际参数跟形式参数会有一个参数传递的过程
• 形参与实参的个数可以不一样

【六】函数的返回值

// python中函数的默认返回值是 None
// 在 js 中函数的默认返回值 undefined
function fooOne(a, b) {
    return a + b
}

【1】返回值机制

• 在JavaScript中，函数的主要作用之一就是处理和传递信息。
• 函数内部通过return语句可以将计算结果或特定值返回给调用者。

function add(a, b) {
    return a + b;
}

let result = add(1, 2); 
console.log(result); // result 的值为 3，因为函数返回了 a + b 的计算结果

【2】终止函数执行

// 在python中 函数执行过程中 终止函数运行 直接 return
// 在 js  中终止函数运行也用 return

• return除了用于返回值外，还可以用来提前结束函数的执行流程。
• 当return被执行后，函数会立即停止剩余的代码执行，并直接返回指定的值。

function stopExecution() {
    if (false) { // 假设某个条件不成立
        return; // 结束函数执行
    }
    console.log('你真是个大帅哥');
}
stopExecution(); // 不输出任何内容，函数直接结束

【3】默认返回值为 undefined

• 如果函数没有显式地使用return语句给出一个值，那么它的默认返回值是undefined。

function emptyFunction() {} // 没有return语句
let returnedValue = emptyFunction();
console.log(returnedValue); // 输出：undefined

【4】函数返回值的应用

• 函数的返回值不仅可以用作其他变量的赋值，还可以作为其他函数的参数。
• 例如，在排序算法中，我们可以创建一个比较函数并将其作为Array.prototype.sort()方法的参数，利用其返回值来决定数组元素的排列顺序

function compareNumbers(a, b) {
    return a - b; // 返回a与b的差值，sort()会根据这个差值决定元素的顺序
}

const numbers = [5, 2, 9, 1, 5, 6];
numbers.sort(compareNumbers); // 排序后的数组：[1, 2, 5, 5, 6, 9]

【七】函数表达式

function fooOne(a, b) {
    return a + b
}

var fooTwo = fooOne
fooTwo(a = 1, b = 2)

【1】定义

• 函数表达式是函数定义的另一种形式，就是将函数的定义，匿名函数赋值给一个变量
• 函数定义赋值给一个变量，相当于将函数的整体矮化成了一个表达式
• 调用函数表达式方法是给变量名加（）执行，不能使用函数名（）执行
• 通常函数表达式都会使用匿名函数

【2】示例

let multiplyByTwo = function(x) {
    return x * 2;
};

console.log(multiplyByTwo(4)); // 输出: 8

• 当我们将上面的函数赋值给变量 multiplyByTwo 后
• 我们可以通过该变量名 multiplyByTwo() 来调用这个匿名函数
• 而不能直接使用 function(x) 这样的函数名来调用。

【八】函数的数据类型

【1】定义

• 函数是一种数据类型Function
• 由于函数是一种数据类型，可以参与其他程序
• 可以把函数作为另一个函数的参数，也可以把函数作为返回值

【2】示例

• 函数可以与其他数据类型一样进行赋值、比较和传递等操作

function sayHello(name) {
    console.log(`Hello, ${name}!`);
}

let greet = sayHello; // greet 变量现在引用了 sayHello 函数
greet("Alice"); // 输出: Hello, Alice!

// 函数作为参数传递
function executeFunction(func, arg) {
    func(arg);
}

executeFunction(sayHello, "Bob"); // 输出: Hello, Bob!

• 函数还可以作为其他函数的返回值，从而实现更高阶函数的功能。

function createAdder(n) {
    return function(x) {
        return x + n;
    };
}

let addFive = createAdder(5);
console.log(addFive(3)); // 输出: 8

【九】特殊的参数对象（arguments对象）

【1】定义

• js中arguments对象是一个特殊的对象，实际上是当前函数的一个内置属性
• arguments对象会接收所有的实参
• length属性可以获取参数的个数

【2】示例

function login(a, b, c) {
    // arguments 参数是 函数内容的一个特殊的对象
    // 她能接收到函数调用时传递的所有参数并且带索引
    console.log(arguments) // [Arguments] { '0': 1, '1': 2, '2': 3 ,'3':4,'4':5,'5':6,'6':7}
    console.log(a, b, c) // 1 2 3
}

console.log(login(1, 2, 3,4,5,6,7))

【3】用途

function loginOne(a, b, c) {
    // arguments 参数是 函数内容的一个特殊的对象
    // 她能接收到函数调用时传递的所有参数并且带索引
    if (arguments.length < 3){
        console.log("参数不够")
    }else{
        console.log("参数多了")
    }
    console.log(arguments) // [Arguments] { '0': 1, '1': 2, '2': 3 }
    console.log(a, b, c) // 1 2 3
}
// 函数调用的时候传少了，有几个接受几个 剩余没有的全是 undefined
console.log(loginOne(4,5))
// 调用函数的时候参数穿多了也不会报错，而是有几个接受几个
console.log(loginOne(4,5,6,7))

【4】扩展

function sum(...args) {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

• 在这个例子中，arguments 就是一个包含了所有传入参数的数组-like 对象，其 length 属性表示参数的实际数量。
• 需要注意的是，虽然 arguments 在语法上看起来像一个数组，但它并不是真正的数组类型，因此不支持数组的所有方法。
• 如果我们需要像数组那样操作参数，可以将其转换为真实的数组（如 Array.from(arguments) 或者使用扩展运算符 ...）。

Ⅲ 匿名函数

【一】基本语法

// 在 python中匿名函数就是没有名字的函数
// lambda 参数:返回值

// 在js中也有匿名函数
(function () {
    console.log(11)
})

【二】调用匿名函数

【1】方式一：在定义匿名函数的时候用变量存起来

var add = (function () {
    console.log(11)
})
add()

【2】方式二：直接在原本的函数身上进行自调用

console.log(
    (function (a, c, b) {
        console.log(11)
        return a+b+c
    })(1,2,3)
)

Ⅳ 箭头函数

【一】什么是箭头函数

• 箭头函数（Arrow Function）是JavaScript ES6引入的一种新的函数定义语法，相比于传统函数表达式，它具有更简洁和易读的特点。

【二】基本语法

// 普通的有名函数
function add(a, b, c) {
    this._a = a
    return a + b + c
}

// 在ES6中对上述的函数定义方式进行了扩充
// 用更简洁的代码来代替减轻代码量
var add = (a, b, c) => {
    // 在函数内部有一个自己的参数 叫 this
    this._a = a
    this._b = b
    // 面向对象 class 中的 self 很像
    return this._a + this._b
}

console.log(add(1, 2, 3))

【1】单个参数

• 箭头函数用于表示接受一个参数并直接返回该参数值的情况

// 使用 =>
var func1 = (v) => v;
// 或者等价的传统写法
var func1 = function(v) {
  return v;
};

• 当只有一个参数时，可以省略括号(), 但为了代码可读性，推荐保留。

【2】多个参数

• 如果需要处理多个参数，括号()不能省略，参数之间用逗号,分隔，返回值后面同样跟=>

// 处理两个参数
var func2 = (args1, args2) => args1 + args2;
// 或者等价的传统写法
var func2 = function(args1, args2) {
  return args1 + args2;
};

【3】特殊情况

（1）没有参数

• 如果函数体为空或为 return 关键字后的表达式，可以省略花括号{} 和 return 关键字。

// 没有参数，返回 undefined
var func3 = () => {};

// 没有参数，返回一个简单的值
var func4 = () => "Hello World";

（2）只有一条语句

• 如果函数体只包含一条语句且不涉及复杂逻辑，可以将这条语句后的分号;去掉，并使用=代替return关键字，使表达式更加紧凑。

// 返回数字10
var func5 = value => value * 10;

// 相当于
var func5 = value => value * 10; // 注意这里去掉了分号

（3）this绑定

• 在箭头函数中，this的值是在创建函数的时候确定的，而不是在调用时动态绑定，通常指向定义函数的对象（即上下文环境）。
• 这意味着，箭头函数不会像普通函数那样拥有的this值，这在处理事件回调、类方法等情况时需要注意区别。

Ⅴ JavaScript之对象

【一】对象

// 在python中对象是指 类实例化的结果
// 在python中对象可以通过 .属性 取值 但是字典不行

// 在 js 中 对象其实就是字典

• js中的对象是无序的属性集合
• 我们可以把js中的对象想象成键值对，其中值可以是数据或者函数
• 特征-在对象中属性表示
• 行为-在对象中用方法表示

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

【二】创建对象的两种方式

【1】方式一：直接定义

var nameData = {};

【2】方式二：通过内置构造函数new构造对象

var ageData = new Object();

【三】构造函数（Constructor Function）

• 自定义一个创建具体对象的构造函数，函数内部不需要new构造的过程，直接使用this代替对象进行属性和方法的书写，也不需要return一个返回值
• 使用时利用new关键字调用自定义的构造函数就可以了
• 一般构造函数首字母需要大写

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const john = new Person("John", "Doe");

console.log(john ,typeof john )
// Person {firstName: 'John', lastName: 'Doe'} 'object'

• 也可以简化为利用ES6的类语法

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

const john = new Person("John", "Doe");

【四】对象调用

【1】对象的属性访问和修改

• 直接使用变量名加点(.)调用属性：objectName.propertyName
• 在对象内部使用 this 加点调用属性：this.propertyName （适用于方法内部）

const person = { 
  name: "John Doe",
  occupation: "Software Engineer",
	getOccupation: function() { return this.occupation; }
};

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.greet: function() { return `Hello, my name is ${this.firstName} ${this.lastName}`; 

}

const john = new Person("John", "Doe");

console.log(person.name); // 输出 "John Doe"
console.log(john.firstName); // 输出 "John"

function  Person(name,age){
}

let nameDart = new Person(name="silence",age=18)
console.log(nameDart,typeof nameDart)

// Person { name: 'silence', age: 18 } object
console.log(nameDart.name) // silence
console.log(nameDart.age) //  undefined
// 对象可以直接 .属性名 = 属性值 进行修改
nameDart.name = "mark"
console.log(nameDart.name)

【2】对象的方法属性

function  Person(name,age){
    // 在函数内部的名称空间中只有 this 指定后
    // 才能在生成对象的时候被调用
    this.name = name

    // 方式一 ： 先声明一个函数
    function add(a,b,c){
        return a+b+c
    }
    // 再用函数内部的 this 进行制定
    this.add =add


    // 方式二：直接使用 this 指向这个函数
    this.addOne = function (b,c,d){
        console.log(c)
    }

    // 方式三：使用箭头函数来指定
    this.addTwo = (c,d,e)=>{
        console.log(c)
    }
}
console.log(nameDart.add(1,2,3))
console.log(nameDart.addOne())
console.log(nameDart.addTwo())

【3】索引式访问

• 使用变量名后跟方括号 ([]) 并传入对应的键名，可以通过字符串或数值作为键名

// 可以按照索引式访问
console.log(nameDart["name"])

【4】for in遍历数组

• 可以通过 for...in 循环遍历对象的所有可枚举属性，但不包括原型链上的属性

// 允许遍历
for (let item in nameDart){
    console.log(item)
}

Ⅵ 日期对象Date

• JavaScript中的日期对象（Date object）用于处理日期和时间。
• 它提供了处理日期、时间和相关操作的方法。

【一】创建日期对象

• 您可以使用new Date()来创建当前日期和时间的对象实例，或者使用特定日期和时间参数来创建指定的日期对象。

【1】创建当前日期和时间的对象实例

var currentDate = new Date();

// getDate 获取当前的日期
console.log(date.getDate())
// getDay 获取当前的周天数
console.log(date.getDay())
// 获取每一天的时间 日期 周数 天数 秒数 小时数 ...

【2】创建指定日期和时间的对象实例

var oldDate = new Date("2001/1/1 11:11:11")
console.log(oldDate) // 2001-01-01T03:11:11.000Z
console.log(oldDate.toString()) //Mon Jan 01 2001 11:11:11 GMT+0800 (中国标准时间)

【3】结构化时间

var date = new Date()
// 对获取到的日期进行格式化输出
// 直接打印 时间对象获取到的是国际时间
console.log(date) // 2024-06-12 T02:47:07.982Z
// date.toString() 获取到当地的标准时间
console.log(date.toString()) // Wed Jun 12 2024 10:48:08 GMT+0800 (中国标准时间)
console.log(date.toJSON()) // 2024-06-12T02:48:53.434Z

【4】转时间格式

let currentDate = new Date()
// undefined

currentDate.toLocaleString();
// '2024/6/12 17:17:46'

【5】自定义时间

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

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

【二】内置方法

【1】获取日期和时间信息

let d0 = new Date();

d0.getFullYear();
// 获取年份（四位数）
d0.getMonth();
// 获取月份（0-11）（0表示一月，11表示十二月）
d0.getDate();
// 获取日（月中的某一天）
d0.getDay();
// 获取星期
d0.getHours();
// 获取小时
d0.getMinutes();
// 获取分钟
d0.getSeconds();
// 获取秒数
d0.getMilliseconds();
// 获取毫秒数
d0.getTime();
// 获取时间戳

【2】设置日期和时间

var date = new Date();

date.setFullYear(2024); // 设置年份
date.setMonth(8); // 设置月份（表示一月，11表示十二月）
date.setDate(15); // 设置日期（月中的某一天）
date.setHours(18); // 设置小时
date.setMinutes(45); // 设置分钟
date.setSeconds(30); // 设置秒数

【3】格式化时间

• 日期对象没有内置的格式化方法，但是您可以使用各种方法将日期和时间格式化为所需的字符串格式。

var date = new Date();

var formattedDate = date.toLocaleDateString(); // 格式化为本地日期字符串
var formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串
var formattedDateTime = date.toLocaleString(); // 格式化为本地日期和时间字符串

Ⅶ JSON对象

【一】python中的json模块

// 【1】json.load : 加载 json 文件的时候使用
// 【2】json.loads : json 字符串转换为python对象
// 【3】json.dump : 保存 json 文件的时候使用
// 【4】json.dumps : 序列化 python对象转换为 json 字符串

【1】Python中

• 在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          |
    +-------------------+---------------+

（1）序列化 (dumps)

• json模块提供了dumps()函数，用于将Python对象转换为JSON格式的字符串。

import json

# 示例：创建一个Python字典
data = {
    "name": "John Doe",
    "age": 30,
    "is_student": False,
    "hobbies": ["reading", "coding"],
}

# 序列化为JSON字符串
json_string = json.dumps(data, indent=4)  # 添加缩进以提高可读性
print(json_string)

# 输出：
# {
#     "name": "John Doe",
#     "age": 30,
#     "is_student": false,
#     "hobbies": [
#         "reading",
#         "coding"
#     ]
# }

（2）反序列化 (loads)

• json模块同样提供了loads()函数，用于将JSON格式的字符串转换回Python对象。

# 示例：将JSON字符串解析为Python字典
parsed_data = json.loads(json_string)
print(parsed_data)

# 输出：
# {'name': 'John Doe', 'age': 30, 'is_student': False, 'hobbies': ['reading', 'coding']}

【2】JavaScript中

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

（1）序列化 (stringify)

• JSON.stringify() 函数可以将JavaScript对象或值转换为JSON格式的字符串

// 示例：创建一个JavaScript对象
let data = {
    name: "John Doe",
    age: 30,
    isStudent: false,
    hobbies: ["reading", "coding"]
};

// 序列化为JSON字符串
let jsonString = JSON.stringify(data, null, 4); // 缩进增加可读性
console.log(jsonString);

// 输出：
// {
//   "name": "John Doe",
//   "age": 30,
//   "isStudent": false,
//   "hobbies": [
//     "reading",
//     "coding"
//   ]
// }

（2）反序列化 (parse)

• JSON.parse() 函数可以将JSON格式的字符串解析回JavaScript对象或值。

// 示例：将JSON字符串解析为JavaScript对象
let parsedData = JSON.parse(jsonString);
console.log(parsedData);

// 输出：
// { name: 'John Doe', age: 30, isStudent: false, hobbies: [ 'reading', 'coding' ] }

Ⅷ 正则对象 （RegExp）

• 正则表达式（Regular Expression）是一种用来匹配、查找和操作字符串的工具。
• 在Python中如果需要使用正则 需要借助于re模块
• 在JavaScript中，我们可以使用RegExp对象来创建和操作正则表达式。

【一】正则表达式的书写方式

【1】方式一：生成正则对象

let regObj = new RegExp()

【2】方式二：直接写正则表达式然后执行

var regStr = /正则表达式/;

【二】正则方法

var dataStr = "Hello World!"

// 【1】test() 方法 ：用来检测匹配是否有结果，返回值是布尔值
var pattern = /Hello/
var patternOne = /silence/
console.log(pattern.test(dataStr)) // true
console.log(patternOne.test(dataStr)) // false

// 【2】exec() 搜索匹配内容，返回值是数组类型
//   如果没有匹配的内容，则返回null。
var patternTwo = /l+/g
console.log(patternTwo.exec(dataStr)) // [ 'll', index: 2, input: 'Hello World!', groups: undefined ]

// 【3】match() 搜索正则表达式内容 返回值也是数组类型
//    如果没有匹配的内容，则返回null。
// 使用 match 的对象变成了原始字符串
var patternThree = /l+/g
console.log(dataStr.match(patternThree)) // [ 'll', 'l' ]

// 【4】search() 匹配正则表达式 返回值是匹配到的第一个的索引位置
//    如果没有匹配的内容，则返回-1。
var patternThree = /l/
console.log(dataStr.search(patternThree)) // 2

// 【5】replace() 替换指定字符,并返回新的字符串。
// replace(正则表达式,替换的新内容)
let patternFour = /o/g
console.log(dataStr.replace(patternFour, 'D')) // HellD WDrld!

// 【6】 flags   返回正则表达式的修饰符标志字符串
// 在python中正则修正修饰符 re.S
var patternFive = /Hello/gi;
var patternSix = /Hello/g;
console.log(patternFive.flags) // gi
console.log(patternSix.flags) // g


// 【7】使用正则对象
let regPattern = new RegExp(/Hello/g)
console.log(regPattern.test(dataStr))  //true

【三】正则的BUG

// 在 js 中的表达式是存在 bug 的
 let reg = /^[a-zA-Z][A-Za-z0-9]/g
 reg.test("silence"); // true

【1】全局模式的指针移动

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

// 第一次匹配成功 -- 有数据-- 指针移动到尾端
console.log(reg.test("silence"));
// true

// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据
console.log(reg.test("silence"))
// false

// 第三次匹配成功 -- 有数据-- 指针回到头部
console.log(reg.test("silence"));
// true
console.log(reg.test("silence"));
// false

// 第二次匹配失败 -- 指针在尾端向后匹配 --无数据
console.log(reg.lastIndex)
// 0
console.log(reg.test("silence"));
// true

// 第三次匹配成功 -- 有数据-- 指针回到头部
console.log(reg.lastIndex)
// 2
console.log(reg.test("silence"));
// false

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

【一】abs(x)

• 返回传入参数的绝对值。参数 x 必须是一个数字类型。

let num = -10;
let absoluteValue = Math.abs(num);
console.log(absoluteValue); // 输出: 10

【二】exp(x)

• 返回 e (自然对数的底数，约为 2.71828) 的 x 次方。x 必须是一个数字类型。

let exponent = 3;
let result = Math.exp(exponent);
console.log(result); // 输出: 20.085536923187668 (近似值)

【三】 floor(x)

• 对传入参数 x 进行向下取整，结果是一个整数。参数 x 必须是一个数字类型。

let num = 3.7;
let flooredNum = Math.floor(num);
console.log(flooredNum); // 输出: 3

【四】log(x)

• 返回传入参数 x 的自然对数（底为 e）。x 必须大于 0，并且是一个数字类型。

let baseTenNum = 100;
let naturalLog = Math.log(baseTenNum);
console.log(naturalLog); // 输出: 4.605170185988092 (近似值，因为 ln(100) ≈ 4.605)

【五】max(x, y)

• 返回两个数 x 和 y 中的最大值。x 和 y 都可以是任意数值类型。

let num1 = 5;
let num2 = 10;
let maxValue = Math.max(num1, num2);
console.log(maxValue); // 输出: 10

【六】min(x, y)

• 返回两个数 x 和 y 中的最小值。x 和 y 都可以是任意数值类型。

let num1 = 5;
let num2 = 10;
let minValue = Math.min(num1, num2);
console.log(minValue); // 输出: 5

【七】pow(x, y)

• 返回 x 的 y 次幂。x 和 y 都必须是数字类型

let base = 2;
let exponent = 3;
let power = Math.pow(base, exponent);
console.log(power); // 输出: 8

【八】random()

• 生成一个介于 0 (包含) 和 1 (不包含) 之间的伪随机浮点数。

let randomNum = Math.random();
console.log(randomNum); // 输出: 例如 0.1234567890 (每次运行会得到不同的随机数)

【九】round(x)

• 将传入参数 x 四舍五入为最接近的整数。x 必须是一个数字类型。

let num = 3.14;
let roundedNum = Math.round(num);
console.log(roundedNum); // 输出: 3 或 4 (取决于 x 是否接近 3 或 4)

【十】 sin(x)

• 返回传入角度 x (弧度制) 的正弦值。x 必须是一个以弧度表示的角度值。

let angleInRadians = Math.PI / 2;
let sineValue = Math.sin(angleInRadians);
console.log(sineValue); // 输出: 1 (因为 sin(π/2) = 1)

【十一】 sqrt(x)

• 返回传入参数 x 的平方根。x 必须是一个非负实数。

let squareRootOfNine = Math.sqrt(9);
console.log(squareRootOfNine); // 输出: 3

【十二】tan(x)

• 返回传入角度 x (弧度制) 的正切值。x 必须是一个以弧度表示的角度值。

let angleInRadians = Math.PI / 4;
let tangentValue = Math.tan(angleInRadians);
console.log(tangentValue); // 输出: 1 (因为 tan(π/4) = 1)

Ⅹ JavaScript之DOM/BOM

【1】什么是DOM/BOM

• 文档对象模型（Document Object Model, 简称 DOM）
• 浏览器对象模型（Browser Object Model, 简称 BOM）
• 是 JavaScript 与网页内容及浏览器环境进行交互的两种核心概念。

// DOM ： 文档对象模型（Document Object Model, 简称 DOM)
// 就是操作浏览器源码页面上的标签的对象

// 浏览器对象模型（Browser Object Model, 简称 BOM）
// 用来操作你的浏览器的对象.

【2】DOM

（1）概述

• 文档对象模型（DOM）是一个编程接口，它以树状结构来表示 HTML 或 XML 文档。
• 在 DOM 中，每个HTML元素、属性、文本节点等都被视为一个对象，通过JavaScript可以创建、查询、修改和删除这些对象。

（2）示例

• document.getElementById(id): 通过元素ID获取DOM元素对象。
• element.querySelector/pseudo-class: 根据CSS选择器或伪类选择DOM元素对象。
• element.appendChild(newElement): 向指定元素添加子元素。
• element.setAttribute(name, value): 设置元素属性值。
• element.innerText/innerHTML: 获取或设置元素内的文本内容或HTML内容。

【3】BOM

（1）概述

• 浏览器对象模型（BOM）则是浏览器提供的API集合，主要用于处理与浏览器环境相关的任务，如窗口管理、导航、cookie、location等。

（2）示例

• window.open(url[, name[, features]]): 打开新的浏览器窗口或tab访问指定URL。
• window.location.href: 获取当前页面的URL地址，并可用于更改页面位置。
• window.history.back(): 返回历史记录中的上一页。
• navigator.userAgent: 获取浏览器的信息，例如类型、版本等。

【4】总结

• DOM 和 BOM 是 JavaScript 开发中两个不可或缺的部分，分别负责对网页内容和浏览器环境进行深层次的操作，使得前端开发者能够实现丰富的交互功能和动态效果。

ⅩⅠWindow对象

• Window对象是JavaScript中表示浏览器窗口的全局对象，它提供了一系列方法来操作和管理窗口。

【一】open()

• 打开新窗口或者获取对一个已经存在的窗口的引用。
• 第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口的大小

window.open(url,target,features)
url : 指定的网址
target : 打开新标签页的方式 _blank 打开新窗口(默认) _self 原地打开
features : 指定打开窗口的参数 'height=400px,width=400px'

let newWindow = window.open("https://www.example.com", "_blank");
let newWindow = window.open("https://pic.netbian.com/", "_blank",'height=400px,width=400px');

【二】close()

• 关闭当前窗口。

window.close();

【三】setTimeout()

• 在指定的时间延迟后执行一次指定的函数或者一段代码。

setTimeout(function(){
  // 执行代码
}, 100); // 1秒后执行

// 例如
// 在指定的时间延迟后执行一次指定的函数或者一段代码。
setTimeout(function () {
    // 执行代码
    console.log(5555)
}, 100);

【四】setInterval()

• 以固定的时间间隔重复执行指定的函数或者一段代码。

setInterval(function(){
  // 执行代码
}, 200); // 每2秒执行一次

// 例如
//以固定的时间间隔重复执行指定的函数或者一段代码。
setInterval(function () {
    // 执行代码
    console.log("你真帅!")
}, 200); // 每2秒执行一次

【五】alert()

• 显示一个带有指定消息和一个确认按钮的警告框。

window.alert("Hello, World!");

【六】confirm()

• 显示一个带有指定消息和两个按钮（确认和取消）的对话框。

if (window.confirm("Are you sure?")) {
  // 用户点击了确认按钮
} else {
  // 用户点击了取消按钮
}

// 例如
// 显示一个带有指定消息和两个按钮（确认和取消）的对话框。
if (window.confirm("Are you sure?")) {
    // 用户点击了确认按钮
    window.alert(5555)
} else {
    // 用户点击了取消按钮
    window.alert(6666)
}

【七】prompt()

• 显示一个带有指定消息和一个文本输入框的对话框。

let name = window.prompt("Please enter your name:");

【八】innerHeight 属性

• 返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

let windowHeight = window.innerHeight;
console.log(windowHeight); // 输出当前窗口的视口高度

【九】innerWidth 属性

• 返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

let windowWidth = window.innerWidth;
console.log(windowWidth); // 输出当前窗口的视口宽度

【十】监听 resize 事件

• 需要注意的是，这两个属性返回的值会随着窗口的大小调整而改变
  • 因此如果需要监控窗口大小的改变，可以通过监听 resize 事件来实现。

直接监听当前页面的窗口大小

window.addEventListener("resize", function() {
  let windowHeight = window.innerHeight;
  let windowWidth = window.innerWidth;
  console.log("Window Height:", windowHeight);
  console.log("Window Width:", windowWidth);
});

• 在使用这两个属性时，可以根据返回的数值进行相应的布局或调整操作，以适应当前窗口的尺寸。

【十一】window.opener

• 是指打开当前窗口的那个窗口对象。它是 Window 对象的一个属性，用于在当前窗口中引用到打开它的父窗口或者来源窗口。
• 在以下情况下可以使用 window.opener

【1】场景一： window.open()

• 当前窗口是通过使用 JavaScript 的 window.open() 方法打开的弹出窗口时，可以使用 window.opener 来引用打开它的父窗口。
• 例如，在父窗口中的 JavaScript 代码中执行以下代码：

let popup = window.open("popup.html"); // 打开一个弹出窗口

• 然后，在弹出窗口 popup.html 中的 JavaScript 代码中，可以通过 window.opener 引用到父窗口：

let parentWindow = window.opener;
console.log(parentWindow); // 输出父窗口对象

【2】场景二： postMessage() 方法

• 当前窗口是通过其他窗口向其发送消息（使用 postMessage() 方法）时，可以使用 event.source 属性来获取消息来源窗口，并通过 window.opener 来引用该来源窗口。
• 例如，在来源窗口的 JavaScript 代码中，向当前窗口发送消息：

let currentWindow = window.open("current.html"); // 打开当前窗口

// 向当前窗口发送消息
currentWindow.postMessage("Hello", "http://example.com");

• 然后，在当前窗口 current.html 中的 JavaScript 代码中，通过监听 message 事件接收来自来源窗口的消息，并使用 event.source 和 window.opener 引用到来源窗口：

window.addEventListener("message", function(event) {
  let message = event.data;
  let sourceWindow = event.source;
  let openerWindow = window.opener;

  console.log("Message:", message);
  console.log("Source Window:", sourceWindow);
  console.log("Opener Window:", openerWindow);
});

ⅩⅡ Window子对象

如果是Window的子对象，Window可以不写

【一】window.document

• 此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
• 通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。

let pageTitle = window.document.title;
console.log(pageTitle);

【二】window.location

• 此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
• 通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。
• 例如，要在新标签页中打开一个 URL：

window.location.href = 'https://example.com';

【1】window.location.href

• 获取当前页面的完整 URL（包括协议、域名、路径等）。
• 示例：

let currentURL = window.location.href;
console.log(currentURL);

window.href = url // 跳转到目标地址

【2】window.location.protocol

• 获取当前页面的协议部分（例如 'http:' 或 'https:'）。
• 示例：

let protocol = window.location.protocol;
console.log(protocol);

【3】window.location.host

• 获取当前页面的主机（域名和端口号）部分。
• 示例：

let host = window.location.host;
console.log(host);

【4】window.location.hostname

• 获取当前页面的主机名部分。
• 示例：

let hostname = window.location.hostname;
console.log(hostname);

【5】window.location.port

• 获取当前页面的端口号部分。
• 示例：

let port = window.location.port;
console.log(port);

【6】window.location.pathname

• 获取当前页面的路径部分。
• 示例：

let pathname = window.location.pathname;
console.log(pathname);

【7】window.location.search

• 获取当前页面的查询参数部分（即 URL 中问号后面的内容）。
• 示例：

let searchParams = window.location.search;
console.log(searchParams);

【8】window.location.hash

• 获取当前页面的片段标识部分（即 URL 中井号后面的内容）。
• 示例：

let hash = window.location.hash;
console.log(hash);

【9】window.location.assign()

• 将当前页面重定向到指定的 URL。
• 示例：

// 将当前页面重定向到 example.com
window.location.assign("http://example.com");

【10】window.location.reload()*

• 重新加载当前页面。
• 示例：

// 重新加载当前页面
window.location.reload();

【三】window.history

• 此子对象用于操作浏览器的历史记录，包括向前和向后导航。
  • 通过 window.history，可以使用一些方法来在历史记录中向前或向后导航，以及获取当前历史记录的状态数量。
• 例如，要后退到上一个页面：

window.history.back();

【1】window.history.length

• 返回当前会话的历史记录条目数。
• 示例：

let historyLength = window.history.length;
console.log(historyLength);

【2】window.history.back()

• 加载上一个历史记录。相当于用户点击浏览器的后退按钮。
• 示例：

window.history.back();

【3】window.history.forward()

• 加载下一个历史记录。相当于用户点击浏览器的前进按钮。
• 示例：

window.history.forward();

【4】window.history.go()

• 根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页。
• 示例：

// 后退两个历史记录
window.history.go(-2);

// 前进一个历史记录
window.history.go(1);

// 重新加载当前页
window.history.go();

【5】window.history.pushState()

• 向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
• 示例：

// 添加新的历史记录状态
window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

【6】window.history.replaceState()

• 替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
• 示例：

// 替换当前历史记录状态
window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

【四】window.navigator

• 此子对象提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。
• 例如，要获取用户代理字符串

let userAgent = window.navigator.userAgent;
console.log(userAgent);

【1】window.navigator.userAgent

• 返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息。

该方法可以用来校验反爬程序

• 示例：

let userAgent = window.navigator.userAgent;
console.log(userAgent);

【2】window.navigator.platform*

• 返回操作系统平台，如 "Win32"、"MacIntel" 等。
• 示例：

let platform = window.navigator.platform;
console.log(platform);

【3】window.navigator.vendor

• 返回浏览器的厂商或供应商名称。
• 示例：

let vendor = window.navigator.vendor;
console.log(vendor);

【4】window.navigator.language

• 返回浏览器的首选语言，通常是用户操作系统的默认语言。
• 示例：

let language = window.navigator.language;
console.log(language);

【5】window.navigator.cookieEnabled

• 返回一个布尔值，表示浏览器是否启用了 cookie。
• 示例：

let cookieEnabled = window.navigator.cookieEnabled;
console.log(cookieEnabled);

【6】window.navigator.plugins

• 返回一个包含浏览器插件列表的 PluginArray 对象。
• 示例：

let plugins = window.navigator.plugins;
console.log(plugins);

ⅩⅢ 弹出框

• 弹出框是网页开发中常用的交互组件，用于显示警告、确认或提示信息，并与用户进行互动。
• 常见的弹出框类型包括警告框、确认框和提示框。

【一】警告框(alert)：

• 警告框用于向用户显示一条重要的警告信息，通常包含一个确定按钮用于关闭弹出框。
• 示例代码：

alert("这是一个警告框！");

【二】确认框(confirm)：

• 确认框用于向用户询问一个问题或确认某个操作，通常包含一个确定按钮和一个取消按钮。
• 示例代码：

if (confirm("你确定要删除吗？")) {
  // 用户点击了确认按钮
  // 执行删除操作
} else {
  // 用户点击了取消按钮
  // 执行取消操作
}

【三】提示框(prompt)：

• 提示框用于向用户展示一条信息，并等待用户输入数据，通常包含一个输入框和确定/取消按钮。
• 示例代码：

prompt("请输入您的姓名：", "默认值");

ⅩⅣ 计时器相关

• 既可以放在 body 内 又可以放在 head 内
• 毫秒为单位
  • 计时器在网页开发中经常用于实现定时触发某些操作的功能。
  • 根据需求，可以使用不同的方法来触发定时器。

【一】过一段时间触发(setTimeout)：

• 如果需要在经过一定的时间后触发某个操作

• • 可以使用setTimeout函数来设置定时器。

• 示例代码：

setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

function foo() {
  // 在延迟后执行的操作
}

setTimeout(foo, 5000); // 延迟5秒后执行

上述代码将在5秒钟后执行指定的函数。可以根据实际需要调整延迟的时间

【二】每隔一段时间触发一次(setInterval)

• 如果需要每隔一定的时间重复触发某个操作
  • 可以使用setInterval函数来设置定时器。
• 示例代码

setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

function bar() {
  // 每隔一段时间执行的操作
}

setInterval(bar, 2000); // 每2秒钟执行一次

• 上述代码将每隔2秒钟执行一次指定的函数。同样，可以根据实际需要调整时间间隔。

【三】清除定时器(clearTimeout/clearInterval)

【1】clearTimeout：

• clearTimeout函数用于取消使用setTimeout函数设置的定时器。
  • 通过传递setTimeout函数返回的计时器标识符作为参数，可以停止相应的定时器。
  • 如果没有及时调用clearTimeout取消定时器，定时器会按照预定的时间触发，造成不必要的操作。
• 示例代码：

var timer = setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

// 如果需要取消定时器
clearTimeout(timer);

【2】clearInterval

• clearInterval函数用于取消使用setInterval函数设置的定时器。
  • 通过传递setInterval函数返回的计时器标识符作为参数，可以停止相应的定时器。
  • 类似地，未及时调用clearInterval会导致定时器一直重复执行。
• 示例代码：

var timer = setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

// 如果需要取消定时器
clearInterval(timer);

注意，在调用clearTimeout或clearInterval函数时

需要将原先保存的计时器标识符作为参数传递给这两个函数，以确保取消正确的定时器

【四】案例:

function func2() {
        alert("123")
    }

    function show() {
        let t = setInterval(func2, 3000); // 每隔3s触发一次

        function inner() {
            clearInterval(t) // 清除定时器
        }
        
        setTimeout(inner, 9000) // 9s后触发
    }

    show()

• 给定的代码是用JavaScript编写的，定义了两个函数：
  • func2 和 show。
• func2 函数简单地显示一个带有消息 "123" 的弹窗。
• show 函数稍微复杂一些。
  • 它首先定义一个变量 t，并将其赋值为 setInterval 函数的返回值。
  • setInterval 函数设置了一个每300毫秒（或3秒）调用一次 func2 函数的定时器。
• 接下来，show 函数定义了一个名为 inner 的内部函数。
  • 这个内部函数用于使用 clearInterval 函数清除之前定义的定时器。
  • clearInterval 函数停止了 func2 函数的重复调用。
• 最后，show 函数使用 setTimeout 函数计划在900毫秒（或9秒）之后执行 inner 函数。
  • 这意味着，在9秒后，inner 函数将被调用，并通过清除定时器来停止 func2 函数的重复执行。
• 总结一下，show 函数设置了一个定时器，每3秒调用一次 func2 函数，但在9秒后，该定时器被清除，阻止了 func2 函数的进一步执行。

【五】注意：

【1】确保清除定时器

• 如果不再需要定时器，应当及时清除，以避免资源浪费。
• 可以使用clearTimeout或clearInterval函数来取消定时器。

【2】考虑浏览器兼容性

• 在使用定时器时，应注意不同浏览器对定时器的支持可能存在差异，可以使用各种前端框架或库提供的方法来处理兼容性问题。

【3】注意定时器的性能影响

• 频繁的定时器操作可能会对网页性能产生一定影响，特别是在移动设备上，所以应慎重使用大量的定时器。