在 JavaScript 中，let、var 和 const 是用于声明变量的关键字，它们之间有一些区别。

1. var：var 是 JavaScript 最早引入的变量声明关键字。使用 var 声明的变量具有函数作用域，意味着变量在声明它的函数内可见。如果在函数内部使用 var 声明变量，它将成为该函数的局部变量。如果在函数外部使用 var 声明变量，它将成为全局变量。此外，使用 var 声明的变量可以在其声明之前被访问（变量提升）。
2. let：let 是在 ECMAScript 6（ES6）中引入的关键字。与 var 不同，let 声明的变量具有块级作用域，意味着变量在声明它的块（例如，{}）内可见。块是由一对花括号 {} 包围的代码段。使用 let 声明的变量不会被提升到其声明之前，这意味着在声明之前访问 let 变量会导致引用错误。
3. const：const 也是在 ES6 中引入的关键字。const 声明的变量也具有块级作用域，与 let 相同。
   1. 不同的是，使用 const 声明的变量必须被初始化，并且一旦被赋值后就不能再修改其值。这意味着 const 声明的变量是常量，对其进行重新赋值会导致错误。

总结一下：

• 使用 var 声明的变量具有函数作用域，可以在其声明之前访问，并且可以被重新赋值。

  • function exampleVar() {var x = 10;if (true) {var x = 20; // 同一个变量 xconsole.log(x); // 输出 20}console.log(x); // 输出 20
    }
    exampleVar();

• 使用 let 声明的变量具有块级作用域，不会被提升，可以在其声明之前访问，并且可以被重新赋值。

  • function exampleLet() {let x = 10;if (true) {let x = 20; // 不同的变量 xconsole.log(x); // 输出 20}console.log(x); // 输出 10
    }
    exampleLet();

• 使用 const 声明的变量具有块级作用域，不会被提升，必须被初始化，并且不能被重新赋值。

  • function exampleConst() {const x = 10;if (true) {const x = 20; // 不同的常量 xconsole.log(x); // 输出 20}console.log(x); // 输出 10
    }
    exampleConst();

在编写 JavaScript 代码时，推荐使用 let 和 const 来声明变量，因为它们提供了更严格的作用域规则和不可变性，有助于减少意外的错误和提高代码可维护性。

函数

【1】前言

** 函数在 JavaScript 中非常重要，它们使得代码可以模块化、可重用，并提供了一种组织和结构化代码的方式。您可以定义自己的函数来执行所需的任务，并根据需要调用它们。**

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

【2】以下是定义和使用函数的基本语法：

// 定义一个函数
function 函数的名称(函数的值, 函数的值, ...) {// 函数体，执行特定的任务或计算// 可以使用参数进行计算// 可以使用 return 语句返回一个值
}// 调用函数
var result = 函数的名称(值1, 值2, ...);

• functionName 是函数的名称，可以根据需要自定义。
• parameter1, parameter2, ... 是函数的参数列表，用于接收传递给函数的值。参数是可选的，可以没有参数。
• function body 是函数体，包含函数要执行的代码。在函数体中，可以使用参数进行计算，并且可以使用 return 语句返回一个值。如果没有 return 语句，则函数将返回 undefined。
• argument1, argument2, ... 是函数调用时传递给函数的实际值。

以下是一个简单的函数示例：

// 定义一个函数，计算两个数的和
function addNumbers(a, b) {var sum = a + b;return sum;
}// 调用函数，并将结果存储在变量中
var result = addNumbers(5, 3);
console.log(result); // 输出：8

在这个示例中，addNumbers 是一个函数，接受两个参数 a 和 b。函数体中计算了 a 和 b 的和，并使用 return 语句返回了结果。在调用函数时，传递了实际的参数值 5 和 3，并将返回的结果存储在变量 result 中。

。**

【3】函数的调用

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

1. 有参函数：

有参函数接受一个或多个参数，并在函数体内使用这些参数进行操作或计算。

function addNumbers(a, b) {var a = 5var b = 8var sum = a + b;console.log("The sum is: " + sum);
}// 调用有参函数
addNumbers(5, 10); // 输出：The sum is: 15

在上面的例子中，addNumbers是一个有参函数，它接受两个参数 a 和 b，并计算它们的和。在函数体内，我们将结果打印到控制台。

2. 无参函数：

无参函数不接受任何参数，它们在函数体内执行一些特定的操作或计算。

function sayHello() {console.log("Hello, world!");
}// 调用无参函数
sayHello(); // 输出：Hello, world!

在上面的例子中，sayHello是一个无参函数，它不接受任何参数，只是在函数体内打印了一条问候语。

【4】普通函数和 ES6 函数（箭头函数）在语法和功能上的区别。

1. 语法格式：

• 普通函数的语法格式如下：

function functionName(parameter1, parameter2) {// 函数体
}

• ES6 函数（箭头函数）的语法格式如下：

const functionName = (parameter1, parameter2) => {// 函数体
}

2. this 的指向：

• 普通函数中的 this 关键字指向函数被调用时的上下文。具体的指向取决于函数的调用方式，如通过对象调用、作为构造函数调用、使用 call() 或 apply() 方法调用等。
• ES6 函数（箭头函数）中的 this 关键字指向定义时的上下文，而不是运行时的上下文。箭头函数没有自己的 this，它继承了外层作用域的 this 值。

3. arguments 对象：

• 普通函数内部可以使用 arguments 对象来访问传递给函数的参数列表，它是一个类数组对象。
• ES6 函数（箭头函数）没有自己的 arguments 对象，如果需要访问参数列表，可以使用剩余参数语法 ...args 来获取参数的数组。

4. 返回值：

• 普通函数可以使用 return 关键字来返回一个值。如果没有显式指定返回值，则函数返回 undefined。
• ES6 函数（箭头函数）可以使用 return 关键字来返回一个值，或者可以省略 return 关键字并直接返回一个表达式的结果。

5. 构造函数：

• 普通函数可以作为构造函数使用，通过 new 关键字创建实例对象。

// 定义构造函数
function Person(name, age) {this.name = name;this.age = age;
}// 使用构造函数创建实例对象
const person = new Person('mao', 30);
console.log(person.name); // 输出: mao
console.log(person.age); // 输出: 30

​ 使用普通函数的方法作为对象的方法示例：

// 定义一个对象
const obj = {name: 'mao',greet: function() {console.log('Hello, ' + this.name);}
};// 调用对象的方法
obj.greet(); // 输出: Hello, mao

• ES6 函数（箭头函数）不能用作构造函数，不能通过 new 关键字创建实例对象。

// 使用箭头函数作为对象的方法
const obj = {name: 'John',greet: () => {console.log('Hello, ' + this.name); // 注意：箭头函数中的 this 指向的是定义时的上下文，这里的 this 不是 obj 对象}
};// 调用对象的方法
obj.greet(); // 输出: Hello, undefined

【4】函数的返回值

【1】返回值机制

​ JavaScript 的返回值机制是指函数在执行完毕后，可以通过 return 语句将一个值返回给调用者。

注意事项：

• return 语句： 使用return关键字可以在函数中指定要返回的值。当汉子执行到 return 语句时，函数会立即执行，并将指定的值作为函数的返回值返回给调用者。
• 返回值类型：JavaScript的函数可以返回任何有效的数据类型，包括数字、字符串、布尔值、数组、对象等。函数可以根据需要进行适当的计算和处理，并返回相应的结果。
• 单一返回值：每个函数只能返回一个值。如果需要返回多个值，可以使用数组、对象或其他数据结构来封装多个值，并将其作为单个返回值返回。
• undefined：如果函数没有明确的 return 语句或者 return 后面没有指定返回值，函数将默认返回 undefined。
• 返回值的使用：调用函数时，可以将返回值赋给一个变量，以便进一步使用或处理。返回值可以用于输出到控制台、进行条件判断、进行数学运算等等。

function add(a, b) {return a + b;
}let result = add(66, 5); 
// 调用 add 函数，并将返回值赋给 result 变量
console.log(result);
// 71

【2】终止函数执行

提前结束函数的执行流程。

function stopExecution() {if (false) { // 假设某个条件不成立return; // 结束函数执行}console.log('This line will not be executed');
}
stopExecution(); // 不输出任何内容，函数直接结束

​ 注意：stopExecution();只能用在函数末尾使用并不能在函数代码中是使用只能用return写一个返回值。

【5】函数的数据类型

​ 在JavaScript中，函数被视为一种特殊的数据类型，可以被分配给变量、作为参数传递给其他函数，或者从函数中返回。JavaScript中的函数类型被称为"function"（）。

1. 函数是一等公民：函数可以像其他数据类型（如字符串、数字等）一样被赋值给变量、作为参数传递给其他函数，以及作为函数的返回值。

2. 函数可以拥有属性和方法：由于函数是对象，所以可以向函数对象添加属性和方法。

3. 函数可以被分配给变量：

var myFunction = function() {// 函数体
};

在上面的示例中，函数被分配给了变量myFunction，你可以通过该变量来调用函数。

2. 函数可以作为参数传递给其他函数：

function performOperation(callback) {// 执行某些操作callback();
}function myFunction() {console.log("Hello, world!");
}performOperation(myFunction);

在上面的示例中，performOperation函数接受一个回调函数作为参数，并在执行某些操作后调用该回调函数。

3. 函数可以从函数中返回：

function createMultiplier(factor) {return function(number) {return number * factor;};
}var double = createMultiplier(2);
console.log(double(5)); // 输出 10

在上面的示例中，createMultiplier函数返回了一个新的函数，该函数将传入的number与factor相乘。通过调用createMultiplier并将其结果赋值给变量double，我们创建了一个乘以2的函数。然后，我们调用double(5)，得到了10作为输出。

具体示例：

// 函数作为参数传递
function calculate(operation, a, b) {return operation(a, b);
}function add(x, y) {return x + y;
}function subtract(x, y) {return x - y;
}console.log(calculate(add, 5, 3)); // 输出 8
console.log(calculate(subtract, 5, 3)); // 输出 2// 函数作为返回值
function createGreeter(greeting) {return function(name) {console.log(greeting + ", " + name + "!");};
}var sayHello = createGreeter("Hello");
var sayGoodbye = createGreeter("Goodbye");sayHello("Alice"); // 输出 "Hello, Alice!"
sayGoodbye("Bob"); // 输出 "Goodbye, Bob!"

function greet(name) {console.log('nihao, ' + name);
}// 函数赋值给变量
const nian = greet;
nian('gril');
// nihao, gril// 函数作为对象的方法
greet.bai = 'music';
console.log(greet.bai);
// music

【6】arguments对象

【1】什么是arguments对象

​ 每个函数都有一个特殊的对象arguments，它包含了函数被调用时传递的参数信息。arguments对象类似于一个数组，但它并不是一个真正的数字，而是一个类数组对象。

特点

• 访问参数：可以使用索引来访问传递给函数的参数。例如，arguments[0] 访问第一个参数，arguments[1] 访问第二个参数，以此类推。
• 长度属性：arguments.length 属性可以获取函数接收到的参数个数。
• 遍历参数：可以使用 for 循环或其他迭代方式遍历 arguments 对象中的参数。

function sum() {let total = 0;for (let i = 0; i < arguments.length; i++) {total += arguments[i];}return total;
}console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(4, 5, 6, 7)); // 输出：22

总结：

​ arguments 对象是 JavaScript 函数内部的一个特殊对象，用于访问传递给函数的参数信息。它可以通过索引、长度属性和遍历来使用。

【7】函数的递归

• 函数的内部可以调用函数自己本身，这种做法称为递归
• 函数递归需要考虑好结束递归的条件，不然会出现死递归导致程序崩溃，内存溢出
• 递归一般是解决数学中的问题

【8】作用域

• 变量起作用的范围
• 函数内部是一个作用域
• 作用域也可以用一对大括号包裹起来，在es6以前是没有块级作用域这个概念，在后续es6中补充
• 变量退出作用域会自动销毁，全局变量只有关闭浏览器才会销毁

​ JavaScript 中的作用域决定了变量和函数的可见性和可访问性范围。全局作用域在整个程序中可访问，函数作用域在函数内部可访问，块级作用域在代码块内部可访问。词法作用域使得变量的作用域在函数定义时就确定了。

var globalVariable = "Global"; // 全局作用域function outer() {var outerVariable = "Outer"; // 函数作用域if (true) {var blockVariable = "Block"; // 块级作用域（在 ES6 之前）let blockScopedVariable = "Block Scoped"; // 块级作用域（使用 let 声明）const constantVariable = "Constant"; // 块级作用域（使用 const 声明）}console.log(globalVariable); // 可访问console.log(outerVariable); // 可访问console.log(blockVariable); // 可访问（在 ES6 之前）console.log(blockScopedVariable); // 不可访问console.log(constantVariable); // 不可访问
}outer();

【9】参数和函数的作用域

• 函数的参数是局部变量，只能在函数内部使用
• 函数内部的变量也是局部变量
• 可以理解为函数体本身是一个独立的作用域

对象

【1】什么是对象

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

​ JavaScript 中的对象是一种非常重要的数据类型，可以存储多个属性和方法，并且可以通过点号或方括号运算符来访问属性。

【2】对象的创建

【1】对象字面量（obj）

• 直接使用花括号 {} 来创建一个空对象，或者初始化对象时在花括号内直接指定键值对。

var obj = {}

1. 对象字面量语法：使用花括号 {} 来定义对象，并在其中指定属性和对应的值。例如：

const person = {name:'nishibushisha',age: 18,gender:'male'
}
console.log(person.age) // 18

2. 构造函数：使用构造函数创建对象。构造函数是一个普通的函数，使用 new 关键字来创建对象实例。例如：

function mei(name, age, gender) {this.name = name;this.age = age;this.gender = gender;
}var nian = new mei("mao", 18, "male");
console.log(nian.age,nian.gender,nian.gender);
// 18 male male
console.log(new mei("mao", 18, "male"));
// mei { name: 'mao', age: 18, gender: 'male' }

3. Object.create() 方法：使用 Object.create() 方法创建一个新对象，以现有对象作为原型。例如：

var bian = Object.create(null);
bian.name = "mao";
bian.age = 30;
bian.gender = "male";console.log( bian.name);
// mao

4. ES6 类（Class）语法：使用类来创建对象。类是一种特殊的构造函数，使用 class 关键字定义，并使用 new 关键字来创建对象实例。例如：

class Person {constructor(name, age, gender) {this.name = name;this.age = age;this.gender = gender;}
}var person = new Person("John", 30, "male");

常用方法

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join(‘+’)，seq是连接符	将数组元素连接成字符串
.concat(val, …) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach() #讲了函数再说	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

【3】对象的调用

在 JavaScript 中，你可以通过以下几种方式来调用对象的属性和方法：

1. 点符号（.）：使用对象名后跟一个点和属性或方法名的方式来调用。例如：

var person = {name: "John",age: 30,gender: "male",sayHello: function() {console.log("Hello!");}
};console.log(person.name);  // 输出: "John"
console.log(person.age);   // 输出: 30
person.sayHello();         // 输出: "Hello!"

2. 方括号（[]）：使用对象名后跟方括号，内部包含属性或方法名的字符串来调用。这种方式可以动态地传递属性或方法名。例如：

var person = {name: "mao",age: 18,gender: "male",sayHello: function() {console.log("nimasil!");}
};console.log(person["name"]);      // 输出: "mao"
console.log(person["age"]);       // 输出: 18
person["sayHello"]();              // 输出: "nimasil!"var propertyName = "gender";
console.log(person[propertyName]); // 输出: "male"

3. ES6 解构赋值：使用解构赋值语法可以直接从对象中提取属性并赋值给变量。例如：

var person = {name: "mao",age: 18,gender: "male"
};var { name, age, gender } = person;
console.log(name);    // 输出: "mao"
console.log(age);     // 输出: 18
console.log(gender);  // 输出: "male"

for...of 循环遍历数组的示例

var arr = [1, 2, 3, 4, 5];for (var i of arr) {console.log(i);
}
//1
// 2
// 3
// 4
// 5

【4】日期对象Date

Date对象

创建Date对象

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  //方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  //方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

​ JavaScript 中的日期对象是 Date 对象，它用于处理日期和时间。你可以使用 new Date() 构造函数来创建一个日期对象。以下是一些常见的用法：

// 创建一个表示当前日期和时间的日期对象
var currentDate = new Date();// 创建一个指定日期和时间的日期对象
var specificDate = new Date("2022-01-01");// 创建一个指定年、月、日的日期对象
var customDate = new Date(2022, 0, 1);// 创建一个指定年、月、日、时、分、秒的日期对象
var dateTime = new Date(2022, 0, 1, 12, 30, 0);

Date 对象提供了许多方法来获取和设置日期的各个部分，例如年、月、日、小时、分钟、秒等。以下是一些常用的方法：

var date = new Date();var year = date.getFullYear();     // 获取年份（四位数）
var month = date.getMonth();        // 获取月份（0-11，注意是从 0 开始）
var day = date.getDate();           // 获取日期（1-31）
var day = date.getDay();			// 获取星期
var hour = date.getHours();         // 获取小时（0-23）
var minute = date.getMinutes();     // 获取分钟（0-59）
var second = date.getSeconds();     // 获取秒数（0-59）
var millisecond = date.getMilliseconds(); // 获取毫秒数（0-999）date.setFullYear(2023);            // 设置年份
date.setMonth(11);                 // 设置月份（0-11）
date.setDate(25);                  // 设置日期
date.setHours(10);                 // 设置小时
date.setMinutes(30);               // 设置分钟
date.setSeconds(0);                // 设置秒数
date.setMilliseconds(0);           // 设置毫秒数

方法	描述
getDate()	返回月中的第几天（从 1 到 31）。
getDay()	返回星期几（0-6）。
getFullYear()	返回年份。
getHours()	返回小时（从 0-23）。
getMilliseconds()	返回毫秒（0-999）。
getMinutes()	返回分钟（从 0-59）。
getMonth()	返回月份（从 0-11）。
getSeconds()	返回秒数（从 0-59）。
getTime()	返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
getTimezoneOffset()	返回 UTC 时间与本地时间之间的时差，以分钟为单位。
getUTCDate()	根据世界时，返回月份中的第几天（从 1 到 31）。
getUTCDay()	根据世界时，返回星期几（0-6）。
getUTCFullYear()	根据世界时，返回年份。
getUTCHours()	根据世界时，返回小时（0-23）。
getUTCMilliseconds()	根据世界时，返回毫秒数（0-999）。
getUTCMinutes()	根据世界时，返回分钟（0-59）。
getUTCMonth()	根据世界时，返回月份（0-11）。
getUTCSeconds()	根据世界时，返回秒数（0-59）。
getYear()	已弃用。请改用 getFullYear() 方法。
now()	返回自 1970 年 1 月 1 日午夜以来的毫秒数。
parse()	解析日期字符串并返回自 1970 年 1 月 1 日以来的毫秒数。
setDate()	设置 Date 对象中月的某一天。
setFullYear()	设置日期对象的年份
setHours()	设置日期对象的小时。
setMilliseconds()	设置日期对象的毫秒数。
setMinutes()	设置日期对象的分钟数。
setMonth()	设置日期对象的月份。
setSeconds()	设置日期对象的秒数。
setTime()	将日期设置为 1970 年 1 月 1 日之后/之前的指定毫秒数。
setUTCDate()	根据世界时，设置 Date 对象中月份的一天。
setUTCFullYear()	根据世界时，设置日期对象的年份。
setUTCHours()	根据世界时，设置日期对象的小时。
setUTCMilliseconds()	根据世界时，设置日期对象的毫秒数。
setUTCMinutes()	根据世界时，设置日期对象的分钟数。
setUTCMonth()	根据世界时，设置日期对象的月份。
setUTCSeconds()	根据世界时，设置日期对象的秒数。
setYear()	已弃用。请改用 setFullYear() 方法。
toDateString()	将 Date 对象的日期部分转换为可读字符串。
toGMTString()	已弃用。请改用 toUTCString() 方法。
toISOString()	使用 ISO 标准将日期作为字符串返回。
toJSON()	以字符串形式返回日期，格式为 JSON 日期。
toLocaleDateString()	使用区域设置约定将 Date 对象的日期部分作为字符串返回。
toLocaleTimeString()	使用区域设置约定将 Date 对象的时间部分作为字符串返回。
toLocaleString()	使用区域设置约定将 Date 对象转换为字符串。
toString()	将 Date 对象转换为字符串。
toTimeString()	将 Date 对象的时间部分转换为字符串。
toUTCString()	根据世界时，将 Date 对象转换为字符串。
UTC()	根据 UTC 时间，返回自 1970 年 1 月 1 日午夜以来的日期中的毫秒数。
valueOf()	返回 Date 对象的原始值。

格式化时间

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

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

【5】JSON对象

【python中】

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

  • dumps 序列化
  • loads 反序列化

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

import json# 将 Python 对象转换为 JSON 字符串
data = {'name': 'mao','age': 18,'city': 'New York'
}
json_str = json.dumps(data)
print(json_str)# 将 JSON 字符串转换为 Python 对象
json_str = '{"name": "mao", "age": 18, "city": "New York"}'
data = json.loads(json_str)
print(data)

【JavaScript中】

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

// 将 JavaScript 对象转换为 JSON 字符串
var data = {name: 'John',age: 30,city: 'New York'
};
var jsonStr = JSON.stringify(data);
console.log(jsonStr);// 将 JSON 字符串转换为 JavaScript 对象
var jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
var data = JSON.parse(jsonStr);
console.log(data);

【6】正则对象 RegExp

正则对象（RegExp）是在 JavaScript 中用于处理正则表达式的对象。它提供了一组方法和属性，用于执行正则表达式的匹配、替换和其他操作。

要创建一个正则对象，你可以使用字面量表示法或构造函数表示法。以下是两种创建正则对象的示例：

使用字面量表示法：

var regex = /pattern/flags;

let reg1 = /正则表达式/

使用构造函数表示法：

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

var regex = new RegExp('pattern', 'flags');

其中，pattern 是正则表达式的模式，可以是简单的字符串或包含特定语法的模式。flags 是一个可选的标志，用于指定正则表达式的行为，例如全局匹配、忽略大小写等。

下面是一个示例，展示了如何使用正则对象进行匹配和替换：

var str = 'Hello, world!';
var regex = /world/i; // 不区分大小写匹配 "world"// 使用正则对象进行匹配
var match = str.match(regex);
console.log(match); // 输出: ["world"]// 使用正则对象进行替换
var replacedStr = str.replace(regex, 'JavaScript');
console.log(replacedStr); // 输出: "Hello, JavaScript!"

常用的正则方法的介绍：

1. exec(): 该方法在字符串中执行正则表达式的匹配，并返回匹配结果的数组。如果找到匹配，则返回一个数组，其中第一个元素是匹配到的文本，后续元素是捕获组的匹配结果。如果未找到匹配，则返回 null。

var str = 'Hello, world!';
var regex = /world/i;
var match = regex.exec(str);
console.log(match); // 输出: ["world", index: 7, input: "Hello, world!", groups: undefined]

2. test(): 该方法用于测试字符串是否匹配正则表达式。如果匹配成功，则返回 true，否则返回 false。

var str = 'Hello, world!';
var regex = /world/i;
var isMatch = regex.test(str);
console.log(isMatch); // 输出: true

3. match(): 该方法在字符串中执行正则表达式的匹配，并返回匹配结果的数组。如果找到匹配，则返回一个数组，其中包含所有匹配到的文本。如果未找到匹配，则返回 null。

var str = 'Hello, world!';
var regex = /o/g;
var matches = str.match(regex);
console.log(matches); // 输出: ["o", "o"]

4. replace(): 该方法在字符串中执行正则表达式的替换，并返回替换后的新字符串。可以使用字符串或函数作为替换值。

var str = 'Hello, world!';
var regex = /world/i;
var replacedStr = str.replace(regex, 'JavaScript');
console.log(replacedStr); // 输出: "Hello, JavaScript!"

5. split(): 该方法根据正则表达式将字符串分割为数组，并返回数组。可以使用正则表达式或字符串作为分隔符。

var str = 'Hello,world!';
var regex = /,/i;
var arr = str.split(regex);
console.log(arr); // 输出: ["Hello", "world!"]

这些方法只是正则对象提供的一部分功能，还有其他方法可用于更高级的正则表达式操作。如果你想了解更多细节，请查阅 JavaScript 中正则表达式的文档。

希望这些介绍对你有帮助！如果你还有其他问题，请随时提问。

DOM/BOM

【1】DOM/BOM

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

BOM（浏览器对象模型）是JavaScript提供的用于操作浏览器窗口和文档的API集合。它提供了一组对象和方法，用于访问和控制浏览器窗口、历史记录、定时器、对话框等。

BOM的核心对象是window对象，它表示浏览器中的窗口或框架。window对象提供了许多属性和方法，用于操作当前窗口的各个方面。下面是一些常用的BOM对象和其功能：

【2】window对象

window 对象是 JavaScript 在浏览器环境中的全局对象，提供了许多方法和属性，用于操作和控制浏览器窗口。下面是一些常见的 window 对象的使用方法：

1. 打开新窗口或标签页：

window.open('https://www.example.com', '_blank');

2. 关闭当前窗口或标签页：

window.close();

3. 弹出警告框：

window.alert('Hello, world!');

4. 弹出对话框，接收用户输入：

var result = window.prompt('Please enter your name:');
console.log(result);

5. 设置定时器，延迟执行函数：

window.setTimeout(function() {console.log('Delayed function');
}, 2000);  // 2秒后执行

6. 取消之前设置的定时器：

var timerId = window.setTimeout(function() {console.log('Delayed function');
}, 2000);window.clearTimeout(timerId);

7. 将窗口滚动到指定位置：

window.scrollTo(0, 0);  // 滚动到页面顶部

8. 打印当前窗口的内容：

window.print();

9. 获取当前窗口的 URL 信息：

var url = window.location.href;
console.log(url);

10. 修改当前窗口的 URL：

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

【3】查找标签

​ 如果你想在 JavaScript 中查找特定的 HTML 标签，可以使用 document 对象的相关方法。document 对象表示当前窗口或标签页中的文档，提供了许多方法来访问和操作文档中的元素。

以下是一些常用的方法来查找标签：

1. 通过标签名查找元素：

var elements = document.getElementsByTagName('tagname');

这将返回一个类似数组的对象（NodeList），包含了所有具有指定标签名的元素。你可以通过索引访问其中的元素，例如 elements[0]。

2. 通过类名查找元素：

var elements = document.getElementsByClassName('classname');

这将返回一个类似数组的对象（NodeList），包含了所有具有指定类名的元素。

3. 通过 ID 查找元素：

var element = document.getElementById('id');

这将返回具有指定 ID 的元素对象。由于 ID 在文档中应该是唯一的，因此返回的是单个元素对象。

4. 通过选择器查找元素：

var element = document.querySelector('selector');

这将返回匹配指定选择器的第一个元素对象。

var elements = document.querySelectorAll('selector');

这将返回一个类似数组的对象（NodeList），包含了所有匹配指定选择器的元素。

【4】节点操作

• 节点操作是指在文档对象模型（DOM）中对节点进行创建、获取、修改、删除等操作。
• 以下是几种常见的节点操作：

【1】创建节点：

• createElement(tagName): 创建一个具有指定标签名的元素节点。
• createTextNode(text): 创建一个包含指定文本内容的文本节点。
• createDocumentFragment(): 创建一个空的文档片段节点，可用于高效地插入多个节点。

【2】获取节点：

• getElementById(id): 根据元素的id属性获取对应的元素节点。
• getElementsByTagName(tagName): 根据元素的标签名获取一组元素节点。
• getElementsByClassName(className): 根据元素的类名获取一组元素节点。
• querySelector(selector): 使用CSS选择器获取匹配的第一个元素节点。
• querySelectorAll(selector): 使用CSS选择器获取匹配的所有元素节点。

【3】修改节点

• node.appendChild(childNode): 将一个节点作为父节点的最后一个子节点添加到指定节点。
• parent.removeChild(childNode): 从父节点中移除指定子节点。
• node.replaceChild(newNode, oldNode): 使用新节点替换旧节点。
• node.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。

【4】属性操作：

• element.getAttribute(attribute): 获取指定属性的值。
• element.setAttribute(attribute, value): 设置指定属性的值。
• element.removeAttribute(attribute): 移除指定属性。

【5】文本操作

• node.textContent: 获取或设置节点的文本内容。
• node.innerHTML: 获取或设置节点的HTML内容。

【案例】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="d1"> div<p id="p1"> div > p</p><span> div > span </span>
</div>
</body>
</html>

（1）通过DOM操作动态的创建img标签

• 并且给标签加属性
• 最后将标签添加到文本中

这个操作只是作用域当前页面，并没有对原始文件生效

刷新后就会消失相关的效果

let imgEle = document.createElement("img");
// undefined
imgEle
// <img>// 向标签内添加图片链接
imgEle.src="111.jpg";
// '111.jpg'
imgEle
// <img src="111.jpg">// 向图片内设置自定义属性
imgEle.setAttribute("name","dream");
// undefined
imgEle
// <img src="111.jpg" name="dream">// 向图片内设置默认属性
imgEle.setAttribute("title","一张图片");
// undefined
imgEle
// <img src="111.jpg" name="dream" title="一张图片">// 向div标签下面塞入img标签
let divEle = document.getElementById("d1");
// undefined
divEle.appendChild(imgEle)
// undefined

• createElement
• setAttribute
• appendChild

（2）创建a标签

• 设置属性
• 设置文本
• 添加到标签内部
  • 添加到指定标签的上面

let aEle = document.createElement("a");
// undefinedaEle
// <a></a>// 设置默认属性：链接地址
aEle.href = "https://www.mzitu.com/"
// 'https://www.mzitu.com/'aEle
// <a href="https://www.mzitu.com/"></a>// 设置文本内容
aEle.innerText = "点我有你好看"
// '点我有你好看'aEle
// <a href="https://www.mzitu.com/">点我有你好看</a>// 将a标签插入到指定位置
let divEle = document.getElementById("d1");
// undefined
let pEle = document.getElementById("p1")
// undefined
divEle.insertBefore(aEle,pEle)
// <a href="https://www.mzitu.com/">点我有你好看</a>

• innerText
• insertBefore

【6】Math对象（类似与Python的内置函数）

• Math：不需要new来创建对象，直接使用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)      返回角的正切。

【7】补充innerText/innerHTML

// 只拿标签内的文本 -- 不识别 html标签
divEle.innerText
// 'div 点我有你好看\n\ndiv > p\n\ndiv > span'// 拿标签内的全部内容和标签 -- 识别 html标签
divEle.innerHTML
/* ' div\n    <a href="https://www.mzitu.com/">点我有你好看</a><p id="p1"> div &gt; p</p>\n    <span> div &gt; span </span>\n' */ 

innerText和innerHTML是用于在网页中更新文本内容的两种方法。

它们都可以用于修改HTML元素中的文本，但有一些关键的区别。

（1）innerText

• innerText属性用于设置或返回指定元素中的文本内容，不包括HTML标记。
• 当使用innerText属性时，所有HTML标记都将被视为纯文本并被直接显示在页面上。
• 这意味着如果在innerText中包含HTML标记，那么标记将被作为普通文本显示而不会被解析。
• 此外，innerText属性是只读的，即使尝试修改该属性的值也不会有任何效果。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>var element = document.getElementById("myElement");console.log(element.innerText); // 输出："This is bold text."element.innerText = "Updated text"; // 尝试修改innerText但不会生效
</script>

（2）innerHTML

• innerHTML属性用于设置或返回指定元素的HTML内容，可以包含HTML标记和文本。
• 与innerText不同，使用innerHTML属性时，所有HTML标记都会被解析并在页面上正确渲染。
  • 这意味着可以通过innerHTML属性来添加、修改或删除HTML元素及其属性。
• 需要注意的是，innerHTML属性可以导致代码注入攻击，因此使用时需谨慎验证并过滤用户输入。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>var element = document.getElementById("myElement");console.log(element.innerHTML); // 输出："This is <strong>bold</strong> text."element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML会动态更新页面中的内容
</script>

（3）总结

• innerText用于操作元素中的纯文本内容，不解析HTML标记，且是只读属性。
• innerHTML用于操作元素中的HTML内容，可以包含HTML标记

【八】获取值操作

【1】获取属性值

• 可以使用getAttribute()方法来获取HTML元素的属性值。
• 该方法需要传入属性名作为参数，并返回属性对应的值。

// 示例：获取id为myElement的元素的src属性值
var element = document.getElementById("myElement");
var srcValue = element.getAttribute("src");
console.log(srcValue);

【2】获取文本内容：

• 可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。
• 这些属性会返回元素内包含的文本，但存在一些差异：
• innerText：返回元素的纯文本内容，不包括HTML标记。
• innerHTML：返回元素的HTML内容，包括HTML标记。
• textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

// 示例：获取id为myElement的div元素的文本内容
var element = document.getElementById("myElement");
var textContent = element.textContent;
console.log(textContent);

【3】获取用户输入值

• 对于表单元素（如input、select、textarea等）
• 可以通过获取其value属性来获取用户输入的值。

// 示例：获取id为myInput的input元素的值
var input = document.getElementById("myInput");
var inputValue = input.value;
console.log(inputValue);

【4】获取文件

• 当用户选择一个或多个文件后

  • 可以通过访问.files属性来获取这些文件的信息。

• .files
  

  属性返回一个FileList对象

  • 其中包含了所选文件的列表。
  • 可以通过遍历该列表来处理每个文件。

• 以下是一个简单的示例，演示如何使用.files属性获取用户选择的文件：

// 获取文件选择框的DOM元素
var fileInput = document.getElementById("fileInput");// 添加change事件监听器，以便在用户选择文件后执行操作
fileInput.addEventListener("change", function() {// 获取选择的所有文件var files = fileInput.files;// 遍历文件列表，并处理每个文件for (var i = ; i < files.length; i++) {var file = files[i];console.log("文件名：" + file.name);console.log("文件类型：" + file.type);console.log("文件大小（字节）：" + file.size);console.log("最后修改时间：" + file.lastModified);}
});

• 在以上示例中，我们首先获取具有

  id="fileInput"
  

  的文件选择框的DOM元素，并为其添加了一个change事件监听器。

  • 当用户选择文件后，change事件将被触发。

• 在事件处理程序中，我们使用

  .files
  

  属性获取选择的文件列表，并遍历该列表。

  • 对于每个文件，我们输出了一些基本信息，如文件名、文件类型、文件大小和最后修改时间。

需要注意的是，.files属性在非IE浏览器中提供了广泛的支持

但在IE浏览器中需要使用.value属性来获取文件路径并进行相关处理。

【九】属性操作

【1】class属性操作

（1）介绍

• .classList() 是JavaScript中用于获取HTML元素的类名列表的方法。
• 它返回一个DOMTokenList对象，该对象包含了元素的所有类名。

（2）使用示例

var element = document.getElementById("myElement");
var classList = element.classList;// 检查是否包含某个类名
if (classList.contains("myClass")) {console.log("myElement包含myClass类名");
}// 添加类名
classList.add("newClass");// 移除类名
classList.remove("oldClass");// 切换类名（如果存在则移除，否则添加）
classList.toggle("active");

（3）注意事项

• classList是只读的，不能直接赋值。
• classList是一个动态的列表，会实时反映元素的当前类名状态。
• 可以通过遍历classList来访问每个类名，或者使用length属性获取类名数量。
• classList方法在大多数现代浏览器中都得到了支持。
• 如果需要兼容旧版浏览器，可以考虑使用polyfill库来模拟classList功能。

【2】标签样式

• 看案例

【案例】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1 {height: 400px;width: 400px;border-radius: 50%;}.bg_red {background-color: red;}.bg_green {background-color: green;}</style>
</head>
<body>
<div id="d1" class="d1 bg_green bg_red"></div>
</body>
</html>

• 类属性操作

let divEle = document.getElementById("d1");
// undefined// （1） 查看当前类标签下的所有属性
divEle.classList
/* DOMTokenList(3) ['d1', 'bg_green', 'bg_red', value: 'd1 bg_green bg_red'] */ // 移除当前类标签下的某个属性
divEle.classList.remove("bg_green")
// undefined// 添加当前类标签下的某个属性
divEle.classList.add("bg_green")
// undefined// 校验当前标签下是否包含某个属性
divEle.classList.contains("d1")
true
divEle.classList.contains("d2")
false// 当前标签下有这个属性则移除，没有这个属性则添加
divEle.classList.toggle("bg_red");
// false
divEle.classList.toggle("bg_red");
// true
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.d1 {height: 400px;width: 400px;border-radius: 50%;}.bg_red {background-color: red;}.bg_green {background-color: green;}</style>
</head>
<body>
<div id="d1" class="d1 bg_green bg_red"></div>
<p>花天酒地，花前月下</p>
</body>
</html>

• 标签样式

let pEle = document.getElementsByTagName("p")[0]
// undefined// 修改标签样式中的颜色
pEle.style.color = "red";
// 'red'// 修改标签样式中的字体大小
pEle.style.fontSize = "28px"
// '28px'// 修改标签样式中的背景颜色
pEle.style.backgroundColor = "green"
// 'green'

【十】事件

• 在计算机编程中
  • 事件（Event）是指在程序执行期间发生的特定操作或状态变化。
  • 事件可以来自用户的交互操作（如点击、鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）。
  • 事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作。

【1】鼠标事件：

• click：鼠标点击事件。
• mouseover：鼠标悬停在元素上的事件。
• mouseout：鼠标离开元素的事件。
• mousedown：鼠标按下事件。
• mouseup：鼠标松开事件。
• mousemove：鼠标移动事件。

【2】键盘事件

• keydown：键盘按下事件。
• keyup：键盘松开事件。
• keypress：键盘按键被按下并松开事件。

【3】表单事件：

• submit：表单提交事件。
• change：表单值改变事件。
• focus：表单元素获取焦点事件。
• blur：表单元素失去焦点事件。

【4】文档加载事件：

• load：页面完全加载完成事件。
• unload：页面关闭或离开事件。

【5】定时器事件

• setTimeout：在指定的延迟时间后触发事件。
• setInterval：每隔一定时间触发事件。

【6】自定义事件：

• 开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【7】示例代码：

var button = document.getElementById("myButton");button.addEventListener("click", function(event) {alert("按钮被点击了！");
});

• 以上示例代码中，当id为"myButton"的按钮被点击时，会触发点击事件，并弹出一个提示框。

【十一】绑定事件的两种方式

【1】传统的事件属性绑定

• 这种方式是通过在HTML标签中直接添加事件属性来实现事件绑定。
  • 例如，我们可以在一个按钮的onclick属性中指定一个JavaScript函数，当按钮被点击时，该函数会被调用。
• 示例代码：

<button onclick="myFunction()">点击我</button><script>function myFunction() {alert("按钮被点击了！");}
</script>

• 在上述示例中，当按钮被点击时，会调用名为myFunction的JavaScript函数，并弹出一个提示框。
• 这种方式简单直观，适用于简单的事件绑定需求，但对于复杂的交互场景，建议使用下面介绍的现代事件监听绑定方式。

【2】现代的事件监听绑定

• 这种方式是通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器。
  • HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。
• 示例代码：

<button id="myButton">点击我</button><script>var button = document.getElementById("myButton");button.addEventListener("click", function() {alert("按钮被点击了！");});
</script>

• 在上述示例中，通过

  getElementById
  

  方法获取id为"myButton"的按钮元素，然后使用

  addEventListener
  

  方法绑定了一个点击事件监听器。

  • 当按钮被点击时，会执行回调函数，并弹出一个提示框。

• 使用现代的事件监听绑定方式，可以更灵活地添加、移除或修改事件监听器，同时也可以实现多个事件监听器同时响应一个事件的目的。

【3】小结

• 无论选择哪种事件绑定方式，都应根据具体情况来确定使用哪种方法。
• 传统的事件属性绑定简单易用，适合简单的事件绑定场景；
• 现代的事件监听绑定更加灵活和可控，适用于复杂的交互需求。