javaScipt

古城微笑少年丶 2023-10-12 17:24 4阅读 0赞

#### javaScipt ####

*  一、JavaScript简介
 *  二、javaScript基础
 *   *  1、输入输出语法
     *  2、变量
     *  3、常量
     *  4、数据类型
     *   *  4.1、数字型 number
         *  4.2、字符串类型 string
         *  4.3、布尔类型 boolean
         *  4.4、未定义类型 undefined
         *  4.5、null 空类型
         *  4.6、typeof 检测变量数据类型
     *  5、数据类型转换
     *   *  5.1、隐式转换
         *  5.2、显示转换
     *  6、运算符
     *  7、分支语句
     *  8、数组
     *   *  8.0、对数组操作总结
         *  8.1、数组增 删 改 查 语法
         *  8.2、数组排序
         *  8.3、数组迭代
         *  8.4、数组切片
         *  8.4、数组查找与过滤
         *  8.5、数组长度
         *  8.6、数组合并
         *  8.7、数组计算
         *  8.8、数组连接成字符串
         *  8.9、数组扁平化操作
         *  8.10、数组去重
     *  9、函数
     *  10、对象
     *   *  10.1、对象的增 删 改 查语法
         *  10.2、遍历对象属性
         *  10.3、判断对象是否包含某个属性
         *  10.4、克隆对象
         *  10.5、对象转为字符串
 *  三、web APIs
 *   *  3.1、DOM
     *   *  1、获取DOM对象
         *  2、操作dom元素内容
         *  3、操作dom元素属性
         *  4、定时器-间歇函数
         *  5、事件监听（绑定）
         *  6、事件类型
         *  7、事件对象
         *  8、回调函数
         *  9、事件流
         *  10、事件委托
         *  11、日期对象
         *  12、节点操作
     *  3.2、BOM
     *   *  1、BOM(浏览器对象模型)
         *  2、定时器-延时函数
         *  3、JS 执行机制
         *  4、location对象
         *  5、navigator对象
         *  6、histroy对象
         *  7、本地存储
         *   *  7.1、localStorage
             *  7.2、sessionStorage
         *  8、正则表达式
 *  四、js进阶
 *   *  1、展开运算符
     *  2、箭头函数
     *  3、对象结构
     *  4、深浅拷贝
     *  5、异常处理
     *  6、防抖、节流

## 一、JavaScript简介 ##

JavaScript权威网站：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript]

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

**作用：**

*  网页特效 (监听用户的一些行为让网页作出对应的反馈)
 *  表单验证 (针对表单数据的合法性进行判断)
 *  数据交互 (获取后台的数据, 渲染到前端)
 *  服务端编程 (node.js)

**JavaScript的组成：**

*  ECMAScript:  
    规定了js基础语法核心知识。  
    比如：变量、分支语句、循环语句、对象等等
 *  Web APIs :  
    DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作  
    BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等  
    ![在这里插入图片描述][0d189ee8eadc44ed85060b3f3bc882d5.png]

## 二、javaScript基础 ##

### 1、输入输出语法 ###

**`1.1、输出语法`**

`语法1：`

document.write("输出测试")
     document.write("<h1>输出标题</h1>")

作用：向body内输出内容  
注意：如果输出的内容写的是标签，也会被解析成网页元素

![在这里插入图片描述][3e897c060830439990b38e1e957dda52.png]

`语法2：`

alert("页面弹出框")

作用：页面弹出警告对话框

![在这里插入图片描述][511d094fc3d642b0b08e2e7c9b4b2214.png]  
`语法3：`

console.log("控制台打印")

作用：控制台输出语法，程序员调试使用

![在这里插入图片描述][662eb511fb9248bdb5c08ab90e1e4224.png]

**`1.2、输入语法`**

prompt("请输入内容")

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

![在这里插入图片描述][f7b34d267c354256b7b86207b43e8c15.png]  
alert() 和 prompt() 它们会跳过页面渲染先被执行

### 2、变量 ###

let age = 18

let 和 var 区别：

var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。  
let 为了解决 var 的一些问题。

var 声明:  
可以先使用 在声明 (不合理)  
var 声明过的变量可以重复声明(不合理)  
比如变量提升、全局变量、没有块级作用域等等

结论：  
`var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let`

**数组的基本使用：**

let names =['小明','小红']

*  数组是按顺序保存，所以每个数据都有自己的编号
 *  计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
 *  在数组中，数据的编号也叫索引或下标
 *  数组可以存储任意类型的数据

![在这里插入图片描述][5fb76d97cdbd498aacc533f6b8486678.png]

### 3、常量 ###

**概念：** 使用 `const` 声明的变量称为“常量”

**使用场景：** 当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

// 常量
     const b = 12;
     console.log(b);
    
    // 下面这个会报错，常量不可以重新赋值
     const b = 12;
     b = 13;
     console.log(b);

建议： const 优先，尽量使用const，原因是：

*  const 语义化更好
 *  很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
 *  实际开发中也是，比如react框架，基本const

如果你还在纠结，那么我建议：

*  有了变量先给const，如果发现它后面是要被修改的，再改为let

### 4、数据类型 ###

**JS 数据类型整体分为两大类：**

![在这里插入图片描述][01a26b8365944ef4a93d36a922fd9f70.png]

#### 4.1、数字型 number ####

即我们数学中学习到的数字，可以是整数、小数、正数、负数。  
JavaScript 中的正数、负数、小数等 统一称为 数字类型。

![在这里插入图片描述][099ef24e21a1492fa021e98af09d48aa.png]

数字型经常处理数据。采用算术运算符，主要包括加、减、乘、除、取余（求模）。

*  \+：求和
 *  \-：求差
 *  \*：求积
 *  /：求商
 *  %：取模（取余数）
    
     *  开发中经常作为某个数字是否被整除

优先级：先乘除后加减，有括号先算括号里面的

#### 4.2、字符串类型 string ####

通过单引号（ ‘’） 、双引号（ “”）或反引号( \` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

![在这里插入图片描述][99c21d0c639b4a2dba6c9e38227dc4d7.png]

**注意事项：**

1.  无论单引号或是双引号必须成对使用
2.  单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
3.  必要时可以使用转义符 \\，输出单引号或双引号

--------------------

**字符串拼接：**

使用+ 运算符

![在这里插入图片描述][b96ec4137a8d45ecafa31e5d26fa99ff.png]

`模板字符串:`

使用模板字符串，可以直接拼接字符，书写更简单

// 字符型拼接
      document.write("大家好，我叫"+name+"，今年"+age +"岁")
      // 使用模板字符串
      document.write(`大家好，我叫${
          name},今年${
          age}岁`)

语法：

*  \`\` (反引号)
 *  内容拼接变量时，用 $\{ \} 包住变量

--------------------

#### 4.3、布尔类型 boolean ####

就只有两个值，true 和 false

表示肯定的数据用 true（真），表示否定的数据用 false（假）

![在这里插入图片描述][f4628ab03d06478780f64c799550e94e.png]

#### 4.4、未定义类型 undefined ####

只声明变量，不赋值的情况下，变量的默认值为 undefined

![在这里插入图片描述][4cacb771b219487d9f16fb83b5d1120d.png]

#### 4.5、null 空类型 ####

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

![在这里插入图片描述][5d0e2609424644dc930e9660f990927e.png]

**null 和 undefined 区别：**

*  undefined 表示没有赋值
 *  null 表示赋值了，但是内容为空

--------------------

#### 4.6、typeof 检测变量数据类型 ####

可以通过 `typeof`关键字检测数据类型

![在这里插入图片描述][8b0de35d557049a38b531fe61586d1fb.png]

### 5、数据类型转换 ###

把一种数据类型的变量转换成我们需要的数据类型

#### 5.1、隐式转换 ####

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

**注意事项：**

*  \+号作为正号解析可以转换成数字型
 *  任何数据和字符串相加结果都是字符串

除了+以外的算术运算符，比如 - \* / 等都会把数据转成数字类型  
![在这里插入图片描述][677cd4b8f8de4d778217dfaa537a66aa.png]

#### 5.2、显示转换 ####

自己写代码告诉系统该转成什么类型

*  转换为数字型
    
     *  Number(数据)
     *  parseInt(数据)，只保留整数
     *  parseFloat(数据)，可以保留小数

Number('11');
     parseInt('11');
     parseFloat('11.11');

*  转换为字符型:
    
     *  String(数据)
     *  变量.toString

// 定义数字型变量
    let age = 24;
    // 转换字符型方式1
    age.toString()
    // 转换字符型方式2
    String(age)

![在这里插入图片描述][03ab690f9baa4e9abe1102d385da3eed.png]

### 6、运算符 ###

**赋值运算符：**

*  =
 *  \+=
 *  \*=
 *  /=
 *  %=

示例：  
![在这里插入图片描述][cfd6518435614941ae3fed799d58071d.png]

--------------------

**一元运算符：**

自增，自减

*  num++
 *  num–

![在这里插入图片描述][d33e0d8286d5494284bf50bc27245a54.png]

--------------------

**比较运算符：**

*  .> ： 左边是否大于右边
 *  <： 左边是否小于右边
 *  .>=： 左边是否大于或等于右边
 *  <=： 左边是否小于或等于右边
 *  `==： 左右两边值是否相等`
 *  `===： 左右两边是否类型和值都相等`
 *  !=： 左右两边值是否不等
 *  !==： 左右两边是否不全等
 *  比较结果为boolean类型，即只会得到 true 或 false

字符串比较，是比较的字符对应的ASCII码  
![在这里插入图片描述][3ae41f5bde2c472083a06ae0d87d9c8d.png]

--------------------

**逻辑运算符：**

![在这里插入图片描述][c5900d675a434d789a6b175aa6ef5180.png]

### 7、分支语句 ###

*  If分支语句  
    ![在这里插入图片描述][a04305ba24934e0097bdb2c4e387d80e.png]  
    ![在这里插入图片描述][e5a74726b3314341a20bc2b5b905f436.png]
 *  三元运算符

![在这里插入图片描述][26fb9cfa5e364e6cb40f2663453c011b.png]

*  switch 语句  
    ![在这里插入图片描述][0b21844e568546648e6d425de8f35eb7.png]  
    找到跟小括号里数据全等的case值，并执行里面对应的代码  
    若没有全等 === 的则执行default里的代码

--------------------

**while 循环**

![在这里插入图片描述][043517926d634bd6b80e0dfa2ecbfe49.png]  
跟if语句很像，都要满足小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

### 8、数组 ###

数组：(Array)是一种可以按顺序保存数据的数据类型

![在这里插入图片描述][1ff523eb5a2a4d44908a3670e2adb19a.png]

#### 8.0、对数组操作总结 ####

对数组的操作  
JavaScript提供了许多用于操作数组的方法，以下是一些常见的数组操作方法：

1.  `push()`：向数组末尾添加一个或多个元素。
2.  `pop()`：从数组末尾移除并返回最后一个元素。
3.  `shift()`：从数组开头移除并返回第一个元素。
4.  `unshift()`：向数组开头添加一个或多个元素。
5.  `concat()`：将两个或多个数组合并成一个新数组。
6.  `slice()`：从数组中提取指定范围的元素，返回一个新数组。
7.  `splice()`：从数组中添加、删除或替换元素。
8.  `join()`：将数组中的所有元素连接成一个字符串。
9.  `indexOf()`：返回指定元素在数组中的第一个匹配位置的索引。
10. `lastIndexOf()`：返回指定元素在数组中的最后一个匹配位置的索引。
11. `includes()`：判断数组是否包含指定元素，返回布尔值。
12. `forEach()`：对数组中的每个元素执行指定的操作。
13. `map()`：对数组中的每个元素执行指定的操作，并返回一个新数组。
14. `filter()`：根据指定条件筛选数组中的元素，并返回一个新数组。
15. `reduce()`：对数组中的元素进行累积操作，返回一个累加结果。
16. `sort()`：对数组中的元素进行排序。
17. `reverse()`：颠倒数组中元素的顺序。
18. `some()`：判断数组中是否至少有一个元素满足指定条件，返回布尔值。
19. `every()`：判断数组中的所有元素是否都满足指定条件，返回布尔值。
20. `find()`：返回数组中满足指定条件的第一个元素。
21. `findIndex()`：返回数组中满足指定条件的第一个元素的索引。
22. `flat()`：将多维数组扁平化为一维数组。
23. `flatMap()`：对数组中的每个元素执行指定的操作，并将结果扁平化为一维数组。

这些方法提供了丰富的功能，可以方便地对数组进行增删改查等操作。根据具体的需求，选择合适的方法来操作数组。

#### 8.1、数组增 删 改 查 语法 ####

![在这里插入图片描述][88da6599a49340d7a58d63fe780c1637.png]

`查：`

通过下标获取：  
![在这里插入图片描述][1c2f2ab86bdd4ad288ca425936b8d4b5.png]  
用循环把数组中每个元素都访问到,一般会用for循环遍历

![在这里插入图片描述][58b157b41549474a89c9bb5b04915142.png]

--------------------

`改：`

改与查类似，直接根据下标修改。

例如：

let arr = [0,1,2]
     arr[0] = 1;
     console.log(arr)

![在这里插入图片描述][88a615fb7cde40cd9496f6d7cc2b51fa.png]

--------------------

`增：`

语法1：`数组.push()`  
将一个或多个元素添加到数组的**末尾**，并返回该数组的新长度

例如：  
![在这里插入图片描述][821650f88c4a49e2ae6855e6626085cd.png]

语法2：`数组.unshift`()  
将一个或多个元素添加到数组的**开头**，并返回该数组的新长度

例如：  
![在这里插入图片描述][b7bd776ab3434708810c079236fd3af4.png]

--------------------

`删：`

语法1：`数组. pop()`

从数组中删除最后一个元素，并返回该元素的值

![在这里插入图片描述][6df59528b30f4fb3821894109d2e4767.png]

语法2：`数组. shift()`

从数组中删除第一个元素，并返回该元素的值  
![在这里插入图片描述][734dfafecdaf46ea95239684bac725ef.png]

语法3：`arr.splice(操作的下标,删除的个数)`

例如：删除第一个下标  
![在这里插入图片描述][200b1c581a174546ab987d8a925c9801.png]

--------------------

#### 8.2、数组排序 ####

语法：`数组. sort()`

arr.sort() // 没有参数默认升序

示例：

![在这里插入图片描述][feb1c7beb7414c94b6fe00a55a9f250a.png]

#### 8.3、数组迭代 ####

1、使用`for`循环遍历数组：

for (let i = 0; i < arr.length; i++) {
         
       console.log(arr[i]); 
     }

使用`forEach`方法遍历数组：

arr.forEach(function(element) {
         
       console.log(element); 
     })

使用`map`方法对数组进行映射操作：

let arr = [1,2,3,4,5]
      let newArr = arr.map(function(element) {
         
      	return element * 2; 
      });
      console.log(newArr); //  [2, 4, 6, 8, 10]

#### 8.4、数组切片 ####

使用`slice`截取数组下标1和3之间的元素

let arr = [1,2,3,4,5]
      let subArr = arr.slice(1, 3);
      console.log(subArr); // [2, 3]

#### 8.4、数组查找与过滤 ####

使用`indexOf`方法查找第一个匹配元素的索引

let index = arr.indexOf(2);

使用`lastIndexOf`返回指定元素在数组中的最后一个匹配位置的索引

let index = arr.lastIndexOf(2);

使用`includes`方法检查数组是否包含某个元素，返回true或false

let isExist = arr.includes(2);

使用`filter`方法来过滤数组

let numbers = [1, 2, 3, 4, 5, 6];
    
    // 过滤出大于3的元素
    let filteredNumbers = numbers.filter(function(element) {
        
      return element > 3;
    });
    
    // 或 箭头函数简化代码
    
    let filteredNumbers = numbers.filter(element => element > 3);
    
    
    console.log(filteredNumbers); // 输出: [4, 5, 6]

#### 8.5、数组长度 ####

使用`length`属性获取数组长度

let numbers = [1, 2, 3, 4, 5, 6];
    let length = arr.length;  // 输出: 6

#### 8.6、数组合并 ####

使用`concat`方法合并数组

let numbers = [1, 2, 3, 4, 5, 6];
    
    let newArr = numbers.concat([7,8,9])
    
    console.log(newArr); // 输出：[1, 2, 3, 4, 5, 6, 7, 8, 9]

#### 8.7、数组计算 ####

`reduce`方法是JavaScript数组的一个高阶函数，它可以对数组中的每个元素应用一个回调函数，并将回调函数的返回值累积到一个累加器中，最终返回累加器的值。

**求总和：**

let numbers = [1, 2, 3, 4, 5];
    
    let sum = numbers.reduce(function(accumulator, currentValue) {
        
      return accumulator + currentValue;
    }, 0);
    
    console.log(sum); // 输出: 15

**计算最大值、最小值：**

let numbers = [1, 2, 3, 4, 5];
    
    // 最大值
    let max = numbers.reduce(function(accumulator, currentValue) {
        
      return Math.max(accumulator, currentValue);
    });
    console.log(max); // 输出: 5
    
    
    
    // 最小值
    let min = numbers.reduce(function(accumulator, currentValue) {
        
      return Math.min(accumulator, currentValue);
    });
    console.log(min); // 输出: 1

**计算平均值：**

let numbers = [1, 2, 3, 4, 5];
    
    let sum = numbers.reduce(function(accumulator, currentValue) {
        
      return accumulator + currentValue;
    }, 0);
    
    let average = sum / numbers.length;
    
    console.log(average); // 输出: 3

#### 8.8、数组连接成字符串 ####

使用`join`将数组中的所有元素连接成一个字符串

let numbers = [1, 2, 3, 4, 5, 6];
    
    let newArr = numbers.join(",")
    
    console.log(newArr); // 输出：1,2,3,4,5,6

#### 8.9、数组扁平化操作 ####

`flat()`方法用于将多维数组扁平化为一维数组。它接受一个可选的参数depth，用于指定扁平化的深度。如果不提供depth参数，默认为1，即只扁平化一层。如果depth参数为正整数，则会扁平化指定深度的层级。如果depth参数为Infinity，则会完全扁平化数组。

let arr = [1, 2, [3, 4], [5, [6, 7]]];
    let flatArr = arr.flat();
    
    console.log(flatArr); // 输出: [1, 2, 3, 4, 5, [6, 7]]
    
    // Infinity参数完全扁平化数组
    let flatArrInfinity = arr.flat(Infinity);
    
    console.log(flatArrInfinity); // 输出:  [1, 2, 3, 4, 5, 6, 7]

`flatMap()`方法结合了map()和flat()两个方法的功能

将对象数组中的某个属性提取出来：

#### 8.10、数组去重 ####

使用Set：

let arr = [1, 2, 2, 3, 4, 4, 5];
    let uniqueArr = [...new Set(arr)];
    
    console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]

使用reduce()和includes()：

let arr = [1, 2, 2, 3, 4, 4, 5];
    let uniqueArr = arr.reduce((result, value) => {
        
      if (!result.includes(value)) {
        
        result.push(value);
      }
      return result;
    }, []);
    
    console.log(uniqueArr); // 输出: [1, 2, 3, 4, 5]

### 9、函数 ###

function，是被设计为执行特定任务的代码块，就是把相同代码封装起来

![在这里插入图片描述][714f4fb0051547a9ba7de99e2780b909.png]

**函数调用：**  
![在这里插入图片描述][0c577084129e46a0ac34c15c55a6c571.png]

--------------------

**函数传参：**

![在这里插入图片描述][f2b99177ea9349c3a8ac9636b3fabb00.png]

例如：  
![在这里插入图片描述][0642825bffe3433084d1f382de07ef0e.png]

--------------------

**函数返回值：**

当函数需要返回数据出去时，用return关键字  
![在这里插入图片描述][f98219c5366641478aa3dcf6932f882d.png]

细节：

*  在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
 *  return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
 *  return函数可以没有 return，这种情况函数默认返回值为 undefined

--------------------

**作用域：**

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

![在这里插入图片描述][ce38237532694dfe8a0fc7d370a38242.png]  
如下，num2就会找不到，不在同一个作用域中  
![在这里插入图片描述][1aac41109c3a4f60b13f67832e41148c.png]

**访问原则：在能够访问到的情况下 先局部， 局部没有在找全局**

--------------------

**匿名函数：**

没有名字的函数, 无法直接使用。  
使用方式：

*  函数表达式
 *  立即执行函数

![在这里插入图片描述][cc06095318284413ae213348be7a70a2.png]  
使用场景：  
1、webApi 使用  
![在这里插入图片描述][85011663e29140f68589fb8f8e1e6de8.png]  
2、立即执行函数  
![在这里插入图片描述][fcb61031be6746069e800db55160f7a4.png]

### 10、对象 ###

对象（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合， 注意数组是有序的数据集合

用来描述某个事物，例如描述一个人

*  人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
 *  如果用多个变量保存则比较散，用对象比较统一

![在这里插入图片描述][e1a6dc64ac794d1daf63b7fc2cfa8f0c.png]

**对象的声明：**  
\{\} 是对象字面量

let 对象 = {
        }
    
    // 声明了一个person对象
    let person = {
        }
    
    let obj = {
         
     key1: value1,
     key2: value2 
    };

**对象有属性和方法组成：**

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

![在这里插入图片描述][51305325d39244af99a7180083f3af64.png]

*  属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔
 *  多个属性之间使用英文 , 分隔
 *  属性就是依附在对象上的变量（外面是变量，对象内是属性）
 *  属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横等

#### 10.1、对象的增 删 改 查语法 ####

![在这里插入图片描述][220e1520e00d471dbbafd5b1b7416eb1.png]  
`查：`

1、使用点操作符访问对象属性：

let value = obj.key;

例如：  
![在这里插入图片描述][c6a942dd1b7740739237ada62044cab6.png]2、使用方括号操作符访问对象属性：

let value = obj["key"];
    
    // 如
    let value = person["name"]

`改：`

使用点操作符或方括号操作符修改对象属性的值：

obj.key = newValue;

![在这里插入图片描述][b6be38f4f556428ca9b1fc2e1d81f85e.png]  
`增：`

对象.新值 即可添加属性

如下：往person对象添加了address属性  
![在这里插入图片描述][10b7b58d1f3a43e6a2f9580542d9e31d.png]  
`删：`

使用delete关键字删除对象的属性：

delete obj.key;

![在这里插入图片描述][1ef74683912d4efa9f1113a950d8c329.png]

#### 10.2、遍历对象属性 ####

使用`for...in`循环遍历对象的属性：

for (let key in obj) {
        
      console.log(key, obj[key]);
    }

使用 Object.keys() 方法获取对象的所有可枚举属性，并进行遍历：

const keys = Object.keys(obj);
    for (let key of keys) {
        
      // 使用 obj[key] 访问属性值
    }

如：  
![在这里插入图片描述][7164a49a22d74c5297ede73a100d04fb.png]

*  一般不用这种方式遍历数组、主要是用来遍历对象
 *  for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
 *  由于 k 是变量, 所以必须使用 \[ \] 语法解析
 *  一定记住： k 是获得对象的属性名， 对象名\[k\] 是获得 属性值

#### 10.3、判断对象是否包含某个属性 ####

使用`in`操作符判断对象是否包含某个属性：

if ("key" in obj) {
        
      // 属性存在
    }

使用 hasOwnProperty() 方法判断对象自身是否包含某个属性：

if (obj.hasOwnProperty('key')) {
        
      // 对象自身包含 key 属性
    }

如：  
![在这里插入图片描述][381944e6139945eea801f8eb4accd81b.png]

#### 10.4、克隆对象 ####

使用`Object.assign()`方法克隆对象：

let cloneObj = Object.assign({
        }, obj);

例如：  
![在这里插入图片描述][42a06272fa9c43688bd1f0e0e4b657d8.png]注意:  
如果personClone有属性值与 person对象一样，会使用person的属性值，如下，使用了person的name的值  
![在这里插入图片描述][1c71838f0e0743e3a69e5ad6a9295955.png]

使用扩展运算符（…）克隆对象：

let cloneObj = {
         ...obj };

例如下方：总结起来，…obj 的作用是将一个对象展开为一个新的对象，方便进行对象的浅拷贝和合并操作。  
![在这里插入图片描述][f2a9c526a5d7416e90959ebab8ff0ec5.png]

#### 10.5、对象转为字符串 ####

使用 `JSON.stringify()` 方法将对象转换为字符串

let s = JSON.stringify(person);

## 三、web APIs ##

**作用:** 就是使用 JS 去操作 html 和浏览器

**分类：** DOM (文档对象模型)、BOM（浏览器对象模型）

![在这里插入图片描述][04e7234a577740e5ae7e8eeb01e5b918.png]

### 3.1、DOM ###

#### 1、获取DOM对象 ####

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能

DOM树是什么

*  将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
 *  描述网页内容关系的名词
 *  作用：文档树直观的体现了标签与标签之间的关系  
    ![在这里插入图片描述][86505a3bb8d84ecb86710f766a43dc15.png]

DOM对象（重要）：

*  DOM对象：浏览器根据html标签生成的 JS对象
    
     *  所有的标签属性都可以在这个对象上面找到
     *  修改这个对象的属性会自动映射到标签身上
 *  DOM的核心思想
    
     *  把网页内容当做对象来处理
 *  document 对象
    
     *  是 DOM 里提供的一个对象
     *  所以它提供的属性和方法都是用来访问和操作网页内容的
     *  例：document.write()
     *  网页所有内容都在document里面

查找元素DOM元素就是利用 JS 选择页面中标签元素

**根据CSS选择器来获取DOM元素 (重点)：**

**1、选择第一个匹配的第一个元素**

document.querySelector('div');

返回值：

CSS选择器匹配的`第一个元素`,一个 HTMLElement对象。  
如果没有匹配到，则返回null。

示例：

![在这里插入图片描述][cae59881460d4a7fb4ed864beba74782.png]  
也可以使用:nth-child(2)来使用第几个  
![在这里插入图片描述][fffcb0b7a9c84335bdb60bfcc6637af6.png]

**2、匹配多个元素**

document.querySelectorAll("div");

![在这里插入图片描述][ed9fc21af6be466b9f6c80e8828d1450.png]

得到的是一个`伪数组`：

*  有长度有索引号的数组
 *  但是没有 pop()， push() 等数组方法
 *  想要得到里面的每一个对象，则需要遍历（for）的方式获得。

**3、其他获取DOM元素方法**

// 根据id获取一个元素
      let elementById = document.getElementById("nav");
      
      // 根据标签获取一类元素 获取页面所有的div
      let elementsByTagName = document.getElementsByTagName("div");
     
      // 根据类名获取元素 获取页面所有类名为w的
      let elementsByClassName = document.getElementsByClassName("box");

![在这里插入图片描述][05d14faa395146e19b08938805148a4e.png]

#### 2、操作dom元素内容 ####

如果想要修改标签元素的里面的内容，则可以使用如下几种方式：

1.  对象.innerText 属性
2.  对象.innerHTML 属性

`1、对象.innerText 属性：`

显示纯文本，不解析标签

1、对象.innerText获取出来的是div里的文本值

let htmlDivElement = document.querySelector("div");
    let innerText = htmlDivElement.innerText;
    console.log(innerText); // 输出了第一个div标签里的值 如上面代码输出123

2、修改对象的文本值：

let htmlDivElement = document.querySelector("div");
    htmlDivElement.innerText = "3333";

![在这里插入图片描述][22e00947ab0347789a46cbdcd1543b70.png]

`2、对象.innerHTML属性：`

会解析标签，多标签建议使用模板字符

例如：

let htmlDivElement = document.querySelector("div");
    htmlDivElement.innerHTML = "<h1> 一个标题 </h1>";

![在这里插入图片描述][47ba9dbbb620485192ee60a05d0ed82d.png]

元素.innerHTML 属性 能识别文本，能够解析标签  
如果还在纠结到底用谁，你可以选择innerHTML

#### 3、操作dom元素属性 ####

**1、可以通过 JS 设置/修改标签`元素属性`，比如通过 src更换 图片**

let img = document.querySelector("img");
    // 对象.样式属性 = 值
     img.src = '../../statics/img/56.png';
     img.title = '更换标题';

![在这里插入图片描述][cda767a3531040c3a077066bbc3915ce.png]

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

**2、通过 JS 设置/修改标签元素的`style样式属性`。**

let div = document.querySelector("div");
    // 对象.style.样式属性 = 值
    div.style.backgroundColor = "yellow";
    div.style.width = "300px";

![在这里插入图片描述][192191341ae949218b7cf925fa0d9bf0.png]

**3、如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名`className` 的形式。**

let div = document.querySelector("div");
     // 元素.className = 类名
     div.className = "back2"

**4、 通过 `classList` 操作类控制CSS**

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

元素.classList.add("类名")
    元素.classList.remove("类名")
    元素.classList.toggle("类名")

例如：  
![在这里插入图片描述][aeeccda9f0c344bc90c9fae226509b11.png]

**5、自定义属性**

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

自定义属性：

*  在html5中推出来了专门的data-自定义属性
 *  在标签上一律以data-开头
 *  在DOM对象上一律以dataset对象方式获取

![在这里插入图片描述][e723de7b46834a2fa98fdc9fccf20aa5.png]

#### 4、定时器-间歇函数 ####

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发  
例如：网页中的倒计时

语法：

setInterval(函数,间隔时间)

*  作用：每隔一段时间调用这个函数
 *  间隔时间单位是毫秒

示例：  
![在这里插入图片描述][835a137359d149ccb61d22a85354d293.png]

定时器函数可以开启和关闭定时器，通常满足一定条件再停止

`关闭定时器：`

let interval = setInterval(repeat,1000);  //定时器返回的是一个id数字
      // 关闭定时器
      clearInterval(interval)

#### 5、事件监听（绑定） ####

*  什么是事件？  
    事件是在编程时系统内发生的动作或者发生的事情  
    比如用户在网页上单击一个按钮
 *  什么是事件监听？  
    就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件

比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

**`事件监听：`**

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：

*  事件源： 那个dom元素被事件触发了，要获取dom元素
 *  事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
 *  事件调用的函数：要做什么事

let button = document.querySelector("button");
    // 监听点击
    button.addEventListener('click',function () {
        
       alert("被点击了")
     })

![在这里插入图片描述][5e8f0b79b01f4e78999471d70a76b353.png]  
注意：

1.  事件类型要加引号
2.  函数是点击之后再去执行，每次点击都会执行一次

#### 6、事件类型 ####

常见的事件类型还有：

**鼠标事件（Mouse Events）：**

*  click：当鼠标点击元素时触发。
 *  dblclick：当鼠标双击元素时触发。
 *  mousedown：当鼠标按下元素时触发。
 *  mouseup：当鼠标释放元素时触发。
 *  mousemove：当鼠标在元素上移动时触发。
 *  mouseover：当鼠标移动到元素上方时触发。
 *  mouseout：当鼠标移出元素时触发。
 *  mouseenter：当鼠标进入元素时触发，不会冒泡。
 *  mouseleave：当鼠标离开元素时触发，不会冒泡。
 *  contextmenu：当用户右键点击元素时触发上下文菜单。

**键盘事件（Keyboard Events）：**

*  keydown：当用户按下键盘上的任意键时触发。
 *  keyup：当用户释放键盘上的键时触发。
 *  keypress：当用户按下键盘上的字符键时触发。

**表单事件（Form Events）：**

*  submit：当用户提交表单时触发。
 *  input：当用户在输入字段中输入内容时触发。
 *  change：当用户更改输入字段的内容时触发。
 *  focus：当输入字段获得焦点时触发。
 *  blur：当输入字段失去焦点时触发。

**窗口事件（Window Events）：**

*  load：当页面完全加载时触发。
 *  unload：当页面被卸载时触发。
 *  resize：当窗口大小调整时触发。
 *  scroll：当页面滚动时触发。

**触摸事件（Touch Events）：**  
一般用于移动端

*  touchstart：当用户触摸屏幕时触发。
 *  touchmove：当用户在屏幕上滑动触摸时触发。
 *  touchend：当用户停止触摸屏幕时触发。
 *  touchcancel：当触摸事件被取消时触发。

**拖放事件（Drag and Drop Events）：**

*  dragstart：当元素开始被拖动时触发。
 *  drag：当元素正在被拖动时触发。
 *  dragend：当元素拖动结束时触发。
 *  dragenter：当拖动的元素进入目标元素时触发。
 *  dragleave：当拖动的元素离开目标元素时触发。
 *  dragover：当拖动的元素在目标元素上方移动时触发。
 *  drop：当拖动的元素在目标元素上方释放时触发。

**媒体事件（Media Events）：**

*  play：当媒体开始播放时触发。
 *  pause：当媒体暂停时触发。
 *  ended：当媒体播放结束时触发。
 *  volumechange：当媒体音量发生变化时触发。

**CSS动画和过渡事件（CSS Animation and Transition Events）：**

*  animationstart：当CSS动画开始时触发。
 *  animationend：当CSS动画结束时触发。
 *  animationiteration：当CSS动画重复播放时触发。
 *  transitionstart：当CSS过渡开始时触发。
 *  transitionend：当CSS过渡结束时触发。
 *  transitioncancel：当CSS过渡被取消时触发。

window.addEventListener

![在这里插入图片描述][88ccaf2db97245df9b88169b6380085f.png]

**mouseenter 和 mouseleave：**

mouseenter 和 mouseleave 是鼠标事件中的两个特殊事件类型，它们与 mouseover 和 mouseout 类似，但有一些区别。  
mouseenter 事件在鼠标进入元素时触发，但不会冒泡。也就是说，当鼠标进入元素的子元素时，不会触发 mouseenter 事件。只有当鼠标直接进入元素本身时，才会触发该事件。  
mouseleave 事件在鼠标离开元素时触发，同样不会冒泡。与 mouseenter 相反，当鼠标离开元素的子元素时，也会触发 mouseleave 事件。  
这两个事件通常用于处理鼠标进入和离开元素时的特定行为，例如显示或隐藏元素的内容、改变元素的样式等。

#### 7、事件对象 ####

事件对象是什么？

*  JavaScript中的事件对象（Event Object）是在事件触发时由浏览器自动创建的对象，它包含了与事件相关的信息和属性。通过事件对象，我们可以获取事件的类型、目标元素、鼠标位置等信息，并对事件进行处理。  
    在事件处理函数中，事件对象通常作为参数传递给函数。可以使用事件对象的属性和方法来获取和操作事件的相关信息。
 *  例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景：

*  可以判断用户按下哪个键，比如按下回车键可以发布新闻
 *  可以判断鼠标点击了哪个元素，从而做相应的操作

![在这里插入图片描述][72abced386ef45fd820eb3b1840a0fa6.png]

在事件绑定的回调函数的第一个参数就是事件对象，一般命名为event、ev、e  
事件对象

JavaScript事件对象（Event Object）提供了许多属性，用于获取与事件相关的信息。以下是一些常用的事件对象属性：

event.type：获取事件的类型，如 "click"、"keydown" 等。
    event.currentTarget：获取当前正在处理事件的元素。
    event.preventDefault()：阻止事件的默认行为。
    event.stopPropagation()：停止事件的传播，阻止事件冒泡。
    event.key：获取按下的键盘按键的键码。
    event.code：获取按下的键盘按键的标准键码值。它返回一个字符串，表示按下的按键的标准键码值。例如，按下字母键盘上的 "A" 键，event.code 的值将是 "KeyA"。
    event.shiftKey：判断是否按下了 Shift 键。返回一个布尔值，如果按下了 Shift 键，则为 true，否则为 false。
    event.ctrlKey：判断是否按下了 Ctrl 键。返回一个布尔值，如果按下了 Ctrl 键，则为 true，否则为 false。
    event.altKey：判断是否按下了 Alt 键。返回一个布尔值，如果按下了 Alt 键，则为 true，否则为 false。
    event.clientX 和 event.clientY：获取鼠标相对于浏览器窗口的水平和垂直坐标。
    event.pageX 和 event.pageY：获取鼠标相对于整个文档的水平和垂直坐标。
    event.target：获取触发事件的元素。
    event.target.value：获取表单元素的值（如输入框的文本值）。
    event.target.checked：获取复选框或单选框的选中状态。
    event.target.files：获取文件上传表单元素选择的文件列表。

**环境对象：**

![在这里插入图片描述][25f20e08ef064732a6c0f5e35626d8d2.png]  
环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境，【谁调用， this 就是谁】

#### 8、回调函数 ####

JavaScript中的回调函数是一种常见的编程模式，用于处理异步操作和事件处理。回调函数是一个作为参数传递给其他函数的函数，当满足特定条件或事件发生时，这个函数会被调用执行。

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为`回调函数`

回调函数的使用可以使代码更加灵活和可扩展，可以在异步操作完成后执行特定的逻辑，或者在事件触发后执行相应的处理。

![在这里插入图片描述][e6824f16f13c4c7daff438d18f7db5c6.png]

#### 9、事件流 ####

**1、事件流与两个阶段说明**

事件流指的是事件完整执行过程中的流动路径

![在这里插入图片描述][055c37f7da4d411c81d65ff68cdfbc80.png]  
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。  
实际工作都是使用事件冒泡为主

**2、事件捕获**

事件捕获概念：从DOM的根元素开始去执行对应的事件 (从外到里)

![在这里插入图片描述][617da631cc9f44949f80f06aa35000ff.png]  
事件捕获需要写对应代码才能看到效果

说明：

*  addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
 *  若传入false代表冒泡阶段触发，默认就是false
 *  若是用 L0 事件监听，则只有冒泡阶段，没有捕获

**3、事件冒泡**

**事件冒泡概念:** 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件，事件冒泡是默认存在的

![在这里插入图片描述][d3b580c03bbb4d00b257a52c5cb3def2.png]此时点击son，会依次弹出son、fa、document

**4、阻止冒泡**

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素  
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

![在这里插入图片描述][8a2cd1f771cf4be9bfb85edd3e7a5fe5.png]

![在这里插入图片描述][1beeb3d592c247eda626d0696f3b1041.png]  
注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转  
![在这里插入图片描述][6c609bf823764d2481e68a4d17696588.png]

**5、解绑事件**

on事件方式，直接使用null覆盖偶就可以实现事件的解绑

![在这里插入图片描述][eaefb454664d498ebe96c95f807a66cc.png]  
使用removeEventListener(事件类型, 事件处理函数, \[获取捕获或者冒泡阶段\]) 解绑  
![在这里插入图片描述][c728507b0ed24563b407285c63167663.png]  
注意：匿名函数无法被解绑

两种注册事件的区别

*  传统on注册（L0）
    
     *  同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
     *  直接使用null覆盖偶就可以实现事件的解绑
     *  都是冒泡阶段执行的
 *  事件监听注册（L2）
    
     *  语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
     *  后面注册的事件不会覆盖前面注册的事件(同一个事件)
     *  可以通过第三个参数去确定是在冒泡或者捕获阶段执行
     *  必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
     *  匿名函数无法被解绑

#### 10、事件委托 ####

如果同时给多个元素注册事件，我们怎么做的？  
难道要for循环注册事件？  
![在这里插入图片描述][5833ba0cf7fa4ab4a6fe5151c8789e6c.png]  
事件委托是利用事件流的特征解决一些开发需求的知识技巧，注册一次事件就能完成以上效果

*  优点：减少注册次数，可以提高程序性能
 *  原理：事件委托其实是利用事件冒泡的特点。
    
     *  给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事  
        件
 *  实现：事件对象.target. tagName 可以获得真正触发事件的元素

示例：  
![在这里插入图片描述][f48f257967944f12942a5dded9dfcf34.png]

#### 11、日期对象 ####

**1、实例化**

在代码中发现了 new 关键字时，一般将这个操作称为实例化

1、获取当前时间：

const date = new Date();
    console.log(date); //Sun Aug 06 2023 14:18:17 GMT+0800 (中国标准时间)

2、返回指定时间

const date1 = new Date("2023-08-06 12:00:00");
    console.log(date1); // Sun Aug 06 2023 12:00:00 GMT+0800 (中国标准时间)

**2、日期对象方法**

const date = new Date();
    console.log(date.getFullYear()); //2023

![在这里插入图片描述][f5a0fd49de494895b49394a6886b0d86.png]

**3、时间戳**

时间戳：是指1970年01月01日00时00分00秒起至现在的`毫秒数`，它是一种特殊的计量时间的方式

使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

三种方式获取时间戳：

// 方式一，使用 getTime() 方法
    const date = new Date();
    console.log(date.getTime());
    
    // 方式二，简写 +new Date()
    console.log(+new Date());
    
    // 方式三，使用 Date.now()
    console.log(Date.now());

#### 12、节点操作 ####

**1、DOM 节点**

DOM树里每一个内容都称之为节点

![在这里插入图片描述][5dbb162788ba4e4ab40f2e8d526c140f.png]  
**2、查找节点**

通过节点关系，不用写那么多的document

<div class="dad">
      <div class="baby">
        <div class="grandson">
    
        </div>
      </div>
    </div>
    <script>
      let baby = document.querySelector(".baby");
      console.log(baby);
    	// 父节点
      let parentNode = baby.parentNode; // 父节点，也就是dad的div,返回最近一级的父节点 找不到返回为null
    	// 子节点
      let childNodes = baby.childNodes; // 子节点，也就是grandson,获得所有子节点、包括文本节点（空格、换行）、注释节点等
      let children = baby.children; //(重点),仅获得所有元素节点
    	// 兄弟节点
      let nextElementSibling = baby.nextElementSibling; // 下一个兄弟节点
      let previousElementSibling = baby.previousElementSibling; // 上一个兄弟节点
    
    </script>

**3、增加节点**

1、插入到父元素的最后一个子元素  
父元素.appendChild(要插入的元素)

2、插入到父元素中某个子元素的前面  
父元素.insertBefore(要插入的元素,在哪个元素前面)

<ul>
    	<li>第一个</li>
    </ul>
    <script>
      // ul节点
      let ul = document.querySelector("ul");
      // 创建节点
      let li = document.createElement("li");
      li.innerHTML= "这是一个li";
      // 往ul节点下添加一个子节点
      ul.appendChild(li)
      // 往某个子元素前添加节点
      ul.insertBefore(li,ul.children[0])
    </script>

**4、克隆节点**

流程：复制一个原有的节点，把复制的节点放入到指定的元素内部

元素.li.cloneNode(布尔值);

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

*  若为true，则代表克隆时会包含后代节点一起克隆
 *  若为false，则代表克隆时不包含后代节点
 *  默认为false

**5、删除节点**

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素);

### 3.2、BOM ###

#### 1、BOM(浏览器对象模型) ####

BOM(Browser Object Model ) 是浏览器对象模型  
![在这里插入图片描述][4bc80d2c26ef4b7a9b9ae2aa359f7212.png]

*  window对象是一个全局对象，也可以说是JavaScript中的顶级对象
 *  像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
 *  所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
 *  window对象下的属性和方法调用的时候可以省略window

#### 2、定时器-延时函数 ####

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

**语法：**

setTimeout(回调函数,等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window。每一次调用延时器都会产生一个新的延时器

**清除延时函数：**

let timeout = setTimeout(回调函数,等待的毫秒数);
    clearTimeout(timeout) // 清除延时函数

#### 3、JS 执行机制 ####

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作  
DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之  
后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：  
如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个  
线程。于是，JS 中出现了同步和异步。

#### 4、location对象 ####

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

**常用属性和方法：**

*  href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转  
    ![在这里插入图片描述][a038014f303540eb87df5e281f97dc54.png]
 *  search 属性获取地址中携带的参数，符号 ？后面部分  
    ![在这里插入图片描述][e9bd6df18c104ebfb463f481de764b0f.png]
 *  hash 属性获取地址中的啥希值，符号 \# 后面部分  
    ![在这里插入图片描述][29c5f856aaa54e53b8744d0a00b82784.png]
 *  reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新  
    ![在这里插入图片描述][3d985ce9f62b4790be5eea62830b9efa.png]

#### 5、navigator对象 ####

navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：  
通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
    !(function () {
        
    const userAgent = navigator.userAgent
    // 验证是否为Android或iPhone
    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
    const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
    // 如果是Android或iPhone，则跳转至移动站点
    if (android || iphone) {
        
    location.href = 'http://m.itcast.cn' }
    })()

#### 6、histroy对象 ####

history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

![在这里插入图片描述][0d71dee9d1f24e5c8af3249e8e954ab3.png]

history.back();
    history.forward();
    history.go(1);
    history.go(-1);

![在这里插入图片描述][0d6581642f4b4deb873dc43c906dd000.png]

#### 7、本地存储 ####

*  数据存储在用户浏览器中
 *  设置、读取方便、甚至页面刷新不丢失数据
 *  容量较大，sessionStorage和localStorage约 5M 左右

##### 7.1、localStorage #####

*  可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
 *  可以多窗口（页面）共享（同一浏览器可以共享）
 *  以键值对的形式存储使用

**存储数据：**

localStorage.setItem(key, value)

**获取数据：**

localStorage.getItem(key)

**删除数据：**

localStorage.removeItem(key)

![在这里插入图片描述][a013e5d6ecc64252b210ea1662564ef9.png]

##### 7.2、sessionStorage #####

*  生命周期为关闭浏览器窗口
 *  在同一个窗口(页面)下数据可以共享
 *  以键值对的形式存储使用
 *  用法跟localStorage 基本相同

**存储数据：**

sessionStorage.setItem(key, value)

**获取数据：**

sessionStorage.getItem(key)

**删除数据：**

sessionStorage.removeItem(key)

--------------------

**存储复杂数据类型：**

本地只能存储字符串,无法存储复杂数据类型  
![在这里插入图片描述][ea5c833384624444897c98b4128eeaf5.png]

*  解决：需要将复杂数据类型转换成JSON字符串,在存储到本地
 *  语法：JSON.stringify(复杂数据类型)  
    ![在这里插入图片描述][86a38e97ada34303a2a097c56eefc65e.png]

因为本地存储里面取出来的是字符串，不是对象，无法直接使用

![在这里插入图片描述][a3b90878637a4686bef35709e3784f80.png]

#### 8、正则表达式 ####

正则表达式在 JavaScript中的使用场景：

*  例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
 *  过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

**常用语法：**

/ / 是正则表达式字面量

const reg = /文字/;

1、`reg.test(str)`判断是否有符合规则的字符串： 如果正则表达式与指定的字符串匹配 ，返回true，否则false

const str = "这是一段文字";
    
    const reg = /文字/;
    
    console.log(reg.test(str)); // true

2、`reg.exec(str)` 方法 在一个指定字符串中执行一个搜索匹配，如果匹配成功，exec() 方法返回一个数组，否则返回null

const str = "这是一段文字";
    
    const reg = /文字/;
    
    console.log(reg.exec(str)); // ['文字', index: 4, input: '这是一段文字', groups: undefined]

**元字符:**

1、边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

*  `^` 表示匹配行首的文本
 *  `$` 表示匹配行尾的文本

如果 ^ 和 $ 在一起，表示必须是精确匹配

![在这里插入图片描述][f4d5feb79ca54223b834cab893e26beb.png]

2、量词 （表示重复次数），设定某个模式出现的次数

*  `*` 重复零次或更多次
 *  `+` 重复一次或更多次
 *  `?` 重复零次或一次
 *  `{n}` 重复n次
 *  `{n,}` 重复n次或更多次
 *  `{n,m}` 重复n到m次

![在这里插入图片描述][7f897bb281c54eccbc9b27040e23a432.png]

![在这里插入图片描述][599e49d123af4bcb8365cc5cfadbebfa.png]

## 四、js进阶 ##

### 1、展开运算符 ###

展开运算符(…),将一个数组进行展开

![在这里插入图片描述][108f759f4ffe4fb9b5ed07a387a38644.png]

### 2、箭头函数 ###

无参  
![在这里插入图片描述][32d208b55524409b94eb012c0f3d676d.png]  
带参数

如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值  
![在这里插入图片描述][b9c6471a0d8f40bcbcf543bdeefe57ec.png]

### 3、对象结构 ###

![在这里插入图片描述][81c845be6b064db3af396e4b52cb0eae.png]

### 4、深浅拷贝 ###

**浅拷贝**

浅拷贝拷贝的是地址

1.  拷贝对象：Object.assgin() / 展开运算符 \{…obj\} 拷贝对象
2.  拷贝数组：Array.prototype.concat() 或者 \[…arr\]

**深拷贝**

深拷贝：拷贝的是对象，不是地址

常见方法：

1.  通过递归实现深拷贝
2.  lodash/cloneDeep
3.  通过JSON.stringify()实现

### 5、异常处理 ###

![在这里插入图片描述][58f178888b8845f4a20c1ec35f2021bd.png]  
总结：

1.  throw 抛出异常信息，程序也会终止执行
2.  throw 后面跟的是错误提示信息
3.  Error 对象配合 throw 使用，能够设置更详细的错误信息

我们可以通过`try / catch` 捕获错误信息（浏览器提供的错误信息） try 试试 catch 拦住 finally 最后

![在这里插入图片描述][9f20bff1b28e40d396b4bbe638792e7b.png]

总结：

1.  try…catch 用于捕获错误信息
2.  将预估可能发生错误的代码写在 try 代码段中
3.  如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息
4.  finally 不管是否有错误，都会执行

### 6、防抖、节流 ###

**防抖**

防抖：单位时间内，频繁触发事件，只执行最后一次。（其实就是延迟多少毫秒后再调用）

使用场景：搜索框搜索输入只需用户最后一次输入完，再发送请求。手机号、邮箱验证输入检测

示例：鼠标在盒子上移动数字就加1

不加防抖的代码，会出现数字疯狂加  
![在这里插入图片描述][aedabc35df1e448fa5bc69f84c20d6a1.png]实现方式：

1.  lodash提供的防抖来处理
2.  手写一个防抖函数

lodash 示例：

官网：https://www.lodashjs.com/

![在这里插入图片描述][d8141431f9934bf5b7a2ddd520b1dee9.png]  
手写核心思路：  
利用定时器实现，当鼠标滑过，判断有没有定时器，还有就清除，以最后一次滑动为准开启定时器  
⑥： 如果有定时器，则清除定时器  
⑦: 否则开启定时器， 在设定时间内，调用函数

![在这里插入图片描述][e7b30446af1f44209917188dee5eadd5.png]

**节流**

节流：单位时间内，频繁触发事件，只执行一次。（其实就是多少毫秒内，最多只能执行一次调用）

场景：防止用户频繁点击一个按钮，多次调用请求。

实现方式：

1.  lodash提供的防抖来处理
2.  手写一个防抖函数

lodash方式示例:  
![在这里插入图片描述][f92cde066c8e483693b9cbb29e54f097.png]  
手写核心思路：  
核心就是利用定时器（setTimeout）来实现  
1、声明一个定时器变量  
2、当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器  
3、如果没有定时器则开启定时器，存在变量里面

![在这里插入图片描述][7962d0bb2e0c41d492a7297bdc8f55f1.png]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
[0d189ee8eadc44ed85060b3f3bc882d5.png]: https://img-blog.csdnimg.cn/0d189ee8eadc44ed85060b3f3bc882d5.png
[3e897c060830439990b38e1e957dda52.png]: https://img-blog.csdnimg.cn/3e897c060830439990b38e1e957dda52.png
[511d094fc3d642b0b08e2e7c9b4b2214.png]: https://img-blog.csdnimg.cn/511d094fc3d642b0b08e2e7c9b4b2214.png
[662eb511fb9248bdb5c08ab90e1e4224.png]: https://img-blog.csdnimg.cn/662eb511fb9248bdb5c08ab90e1e4224.png
[f7b34d267c354256b7b86207b43e8c15.png]: https://img-blog.csdnimg.cn/f7b34d267c354256b7b86207b43e8c15.png
[5fb76d97cdbd498aacc533f6b8486678.png]: https://img-blog.csdnimg.cn/5fb76d97cdbd498aacc533f6b8486678.png
[01a26b8365944ef4a93d36a922fd9f70.png]: https://img-blog.csdnimg.cn/01a26b8365944ef4a93d36a922fd9f70.png
[099ef24e21a1492fa021e98af09d48aa.png]: https://img-blog.csdnimg.cn/099ef24e21a1492fa021e98af09d48aa.png
[99c21d0c639b4a2dba6c9e38227dc4d7.png]: https://img-blog.csdnimg.cn/99c21d0c639b4a2dba6c9e38227dc4d7.png
[b96ec4137a8d45ecafa31e5d26fa99ff.png]: https://img-blog.csdnimg.cn/b96ec4137a8d45ecafa31e5d26fa99ff.png
[f4628ab03d06478780f64c799550e94e.png]: https://img-blog.csdnimg.cn/f4628ab03d06478780f64c799550e94e.png
[4cacb771b219487d9f16fb83b5d1120d.png]: https://img-blog.csdnimg.cn/4cacb771b219487d9f16fb83b5d1120d.png
[5d0e2609424644dc930e9660f990927e.png]: https://img-blog.csdnimg.cn/5d0e2609424644dc930e9660f990927e.png
[8b0de35d557049a38b531fe61586d1fb.png]: https://img-blog.csdnimg.cn/8b0de35d557049a38b531fe61586d1fb.png
[677cd4b8f8de4d778217dfaa537a66aa.png]: https://img-blog.csdnimg.cn/677cd4b8f8de4d778217dfaa537a66aa.png
[03ab690f9baa4e9abe1102d385da3eed.png]: https://img-blog.csdnimg.cn/03ab690f9baa4e9abe1102d385da3eed.png
[cfd6518435614941ae3fed799d58071d.png]: https://img-blog.csdnimg.cn/cfd6518435614941ae3fed799d58071d.png
[d33e0d8286d5494284bf50bc27245a54.png]: https://img-blog.csdnimg.cn/d33e0d8286d5494284bf50bc27245a54.png
[3ae41f5bde2c472083a06ae0d87d9c8d.png]: https://img-blog.csdnimg.cn/3ae41f5bde2c472083a06ae0d87d9c8d.png
[c5900d675a434d789a6b175aa6ef5180.png]: https://img-blog.csdnimg.cn/c5900d675a434d789a6b175aa6ef5180.png
[a04305ba24934e0097bdb2c4e387d80e.png]: https://img-blog.csdnimg.cn/a04305ba24934e0097bdb2c4e387d80e.png
[e5a74726b3314341a20bc2b5b905f436.png]: https://img-blog.csdnimg.cn/e5a74726b3314341a20bc2b5b905f436.png
[26fb9cfa5e364e6cb40f2663453c011b.png]: https://img-blog.csdnimg.cn/26fb9cfa5e364e6cb40f2663453c011b.png
[0b21844e568546648e6d425de8f35eb7.png]: https://img-blog.csdnimg.cn/0b21844e568546648e6d425de8f35eb7.png
[043517926d634bd6b80e0dfa2ecbfe49.png]: https://img-blog.csdnimg.cn/043517926d634bd6b80e0dfa2ecbfe49.png
[1ff523eb5a2a4d44908a3670e2adb19a.png]: https://img-blog.csdnimg.cn/1ff523eb5a2a4d44908a3670e2adb19a.png
[88da6599a49340d7a58d63fe780c1637.png]: https://img-blog.csdnimg.cn/88da6599a49340d7a58d63fe780c1637.png
[1c2f2ab86bdd4ad288ca425936b8d4b5.png]: https://img-blog.csdnimg.cn/1c2f2ab86bdd4ad288ca425936b8d4b5.png
[58b157b41549474a89c9bb5b04915142.png]: https://img-blog.csdnimg.cn/58b157b41549474a89c9bb5b04915142.png
[88a615fb7cde40cd9496f6d7cc2b51fa.png]: https://img-blog.csdnimg.cn/88a615fb7cde40cd9496f6d7cc2b51fa.png
[821650f88c4a49e2ae6855e6626085cd.png]: https://img-blog.csdnimg.cn/821650f88c4a49e2ae6855e6626085cd.png
[b7bd776ab3434708810c079236fd3af4.png]: https://img-blog.csdnimg.cn/b7bd776ab3434708810c079236fd3af4.png
[6df59528b30f4fb3821894109d2e4767.png]: https://img-blog.csdnimg.cn/6df59528b30f4fb3821894109d2e4767.png
[734dfafecdaf46ea95239684bac725ef.png]: https://img-blog.csdnimg.cn/734dfafecdaf46ea95239684bac725ef.png
[200b1c581a174546ab987d8a925c9801.png]: https://img-blog.csdnimg.cn/200b1c581a174546ab987d8a925c9801.png
[feb1c7beb7414c94b6fe00a55a9f250a.png]: https://img-blog.csdnimg.cn/feb1c7beb7414c94b6fe00a55a9f250a.png
[714f4fb0051547a9ba7de99e2780b909.png]: https://img-blog.csdnimg.cn/714f4fb0051547a9ba7de99e2780b909.png
[0c577084129e46a0ac34c15c55a6c571.png]: https://img-blog.csdnimg.cn/0c577084129e46a0ac34c15c55a6c571.png
[f2b99177ea9349c3a8ac9636b3fabb00.png]: https://img-blog.csdnimg.cn/f2b99177ea9349c3a8ac9636b3fabb00.png
[0642825bffe3433084d1f382de07ef0e.png]: https://img-blog.csdnimg.cn/0642825bffe3433084d1f382de07ef0e.png
[f98219c5366641478aa3dcf6932f882d.png]: https://img-blog.csdnimg.cn/f98219c5366641478aa3dcf6932f882d.png
[ce38237532694dfe8a0fc7d370a38242.png]: https://img-blog.csdnimg.cn/ce38237532694dfe8a0fc7d370a38242.png
[1aac41109c3a4f60b13f67832e41148c.png]: https://img-blog.csdnimg.cn/1aac41109c3a4f60b13f67832e41148c.png
[cc06095318284413ae213348be7a70a2.png]: https://img-blog.csdnimg.cn/cc06095318284413ae213348be7a70a2.png
[85011663e29140f68589fb8f8e1e6de8.png]: https://img-blog.csdnimg.cn/85011663e29140f68589fb8f8e1e6de8.png
[fcb61031be6746069e800db55160f7a4.png]: https://img-blog.csdnimg.cn/fcb61031be6746069e800db55160f7a4.png
[e1a6dc64ac794d1daf63b7fc2cfa8f0c.png]: https://img-blog.csdnimg.cn/e1a6dc64ac794d1daf63b7fc2cfa8f0c.png
[51305325d39244af99a7180083f3af64.png]: https://img-blog.csdnimg.cn/51305325d39244af99a7180083f3af64.png
[220e1520e00d471dbbafd5b1b7416eb1.png]: https://img-blog.csdnimg.cn/220e1520e00d471dbbafd5b1b7416eb1.png
[c6a942dd1b7740739237ada62044cab6.png]: https://img-blog.csdnimg.cn/c6a942dd1b7740739237ada62044cab6.png
[b6be38f4f556428ca9b1fc2e1d81f85e.png]: https://img-blog.csdnimg.cn/b6be38f4f556428ca9b1fc2e1d81f85e.png
[10b7b58d1f3a43e6a2f9580542d9e31d.png]: https://img-blog.csdnimg.cn/10b7b58d1f3a43e6a2f9580542d9e31d.png
[1ef74683912d4efa9f1113a950d8c329.png]: https://img-blog.csdnimg.cn/1ef74683912d4efa9f1113a950d8c329.png
[7164a49a22d74c5297ede73a100d04fb.png]: https://img-blog.csdnimg.cn/7164a49a22d74c5297ede73a100d04fb.png
[381944e6139945eea801f8eb4accd81b.png]: https://img-blog.csdnimg.cn/381944e6139945eea801f8eb4accd81b.png
[42a06272fa9c43688bd1f0e0e4b657d8.png]: https://img-blog.csdnimg.cn/42a06272fa9c43688bd1f0e0e4b657d8.png
[1c71838f0e0743e3a69e5ad6a9295955.png]: https://img-blog.csdnimg.cn/1c71838f0e0743e3a69e5ad6a9295955.png
[f2a9c526a5d7416e90959ebab8ff0ec5.png]: https://img-blog.csdnimg.cn/f2a9c526a5d7416e90959ebab8ff0ec5.png
[04e7234a577740e5ae7e8eeb01e5b918.png]: https://img-blog.csdnimg.cn/04e7234a577740e5ae7e8eeb01e5b918.png
[86505a3bb8d84ecb86710f766a43dc15.png]: https://img-blog.csdnimg.cn/86505a3bb8d84ecb86710f766a43dc15.png
[cae59881460d4a7fb4ed864beba74782.png]: https://img-blog.csdnimg.cn/cae59881460d4a7fb4ed864beba74782.png
[fffcb0b7a9c84335bdb60bfcc6637af6.png]: https://img-blog.csdnimg.cn/fffcb0b7a9c84335bdb60bfcc6637af6.png
[ed9fc21af6be466b9f6c80e8828d1450.png]: https://img-blog.csdnimg.cn/ed9fc21af6be466b9f6c80e8828d1450.png
[05d14faa395146e19b08938805148a4e.png]: https://img-blog.csdnimg.cn/05d14faa395146e19b08938805148a4e.png
[22e00947ab0347789a46cbdcd1543b70.png]: https://img-blog.csdnimg.cn/22e00947ab0347789a46cbdcd1543b70.png
[47ba9dbbb620485192ee60a05d0ed82d.png]: https://img-blog.csdnimg.cn/47ba9dbbb620485192ee60a05d0ed82d.png
[cda767a3531040c3a077066bbc3915ce.png]: https://img-blog.csdnimg.cn/cda767a3531040c3a077066bbc3915ce.png
[192191341ae949218b7cf925fa0d9bf0.png]: https://img-blog.csdnimg.cn/192191341ae949218b7cf925fa0d9bf0.png
[aeeccda9f0c344bc90c9fae226509b11.png]: https://img-blog.csdnimg.cn/aeeccda9f0c344bc90c9fae226509b11.png
[e723de7b46834a2fa98fdc9fccf20aa5.png]: https://img-blog.csdnimg.cn/e723de7b46834a2fa98fdc9fccf20aa5.png
[835a137359d149ccb61d22a85354d293.png]: https://img-blog.csdnimg.cn/835a137359d149ccb61d22a85354d293.png
[5e8f0b79b01f4e78999471d70a76b353.png]: https://img-blog.csdnimg.cn/5e8f0b79b01f4e78999471d70a76b353.png
[88ccaf2db97245df9b88169b6380085f.png]: https://img-blog.csdnimg.cn/88ccaf2db97245df9b88169b6380085f.png
[72abced386ef45fd820eb3b1840a0fa6.png]: https://img-blog.csdnimg.cn/72abced386ef45fd820eb3b1840a0fa6.png
[25f20e08ef064732a6c0f5e35626d8d2.png]: https://img-blog.csdnimg.cn/25f20e08ef064732a6c0f5e35626d8d2.png
[e6824f16f13c4c7daff438d18f7db5c6.png]: https://img-blog.csdnimg.cn/e6824f16f13c4c7daff438d18f7db5c6.png
[055c37f7da4d411c81d65ff68cdfbc80.png]: https://img-blog.csdnimg.cn/055c37f7da4d411c81d65ff68cdfbc80.png
[617da631cc9f44949f80f06aa35000ff.png]: https://img-blog.csdnimg.cn/617da631cc9f44949f80f06aa35000ff.png
[d3b580c03bbb4d00b257a52c5cb3def2.png]: https://img-blog.csdnimg.cn/d3b580c03bbb4d00b257a52c5cb3def2.png
[8a2cd1f771cf4be9bfb85edd3e7a5fe5.png]: https://img-blog.csdnimg.cn/8a2cd1f771cf4be9bfb85edd3e7a5fe5.png
[1beeb3d592c247eda626d0696f3b1041.png]: https://img-blog.csdnimg.cn/1beeb3d592c247eda626d0696f3b1041.png
[6c609bf823764d2481e68a4d17696588.png]: https://img-blog.csdnimg.cn/6c609bf823764d2481e68a4d17696588.png
[eaefb454664d498ebe96c95f807a66cc.png]: https://img-blog.csdnimg.cn/eaefb454664d498ebe96c95f807a66cc.png
[c728507b0ed24563b407285c63167663.png]: https://img-blog.csdnimg.cn/c728507b0ed24563b407285c63167663.png
[5833ba0cf7fa4ab4a6fe5151c8789e6c.png]: https://img-blog.csdnimg.cn/5833ba0cf7fa4ab4a6fe5151c8789e6c.png
[f48f257967944f12942a5dded9dfcf34.png]: https://img-blog.csdnimg.cn/f48f257967944f12942a5dded9dfcf34.png
[f5a0fd49de494895b49394a6886b0d86.png]: https://img-blog.csdnimg.cn/f5a0fd49de494895b49394a6886b0d86.png
[5dbb162788ba4e4ab40f2e8d526c140f.png]: https://img-blog.csdnimg.cn/5dbb162788ba4e4ab40f2e8d526c140f.png
[4bc80d2c26ef4b7a9b9ae2aa359f7212.png]: https://img-blog.csdnimg.cn/4bc80d2c26ef4b7a9b9ae2aa359f7212.png
[a038014f303540eb87df5e281f97dc54.png]: https://img-blog.csdnimg.cn/a038014f303540eb87df5e281f97dc54.png
[e9bd6df18c104ebfb463f481de764b0f.png]: https://img-blog.csdnimg.cn/e9bd6df18c104ebfb463f481de764b0f.png
[29c5f856aaa54e53b8744d0a00b82784.png]: https://img-blog.csdnimg.cn/29c5f856aaa54e53b8744d0a00b82784.png
[3d985ce9f62b4790be5eea62830b9efa.png]: https://img-blog.csdnimg.cn/3d985ce9f62b4790be5eea62830b9efa.png
[0d71dee9d1f24e5c8af3249e8e954ab3.png]: https://img-blog.csdnimg.cn/0d71dee9d1f24e5c8af3249e8e954ab3.png
[0d6581642f4b4deb873dc43c906dd000.png]: https://img-blog.csdnimg.cn/0d6581642f4b4deb873dc43c906dd000.png
[a013e5d6ecc64252b210ea1662564ef9.png]: https://img-blog.csdnimg.cn/a013e5d6ecc64252b210ea1662564ef9.png
[ea5c833384624444897c98b4128eeaf5.png]: https://img-blog.csdnimg.cn/ea5c833384624444897c98b4128eeaf5.png
[86a38e97ada34303a2a097c56eefc65e.png]: https://img-blog.csdnimg.cn/86a38e97ada34303a2a097c56eefc65e.png
[a3b90878637a4686bef35709e3784f80.png]: https://img-blog.csdnimg.cn/a3b90878637a4686bef35709e3784f80.png
[f4d5feb79ca54223b834cab893e26beb.png]: https://img-blog.csdnimg.cn/f4d5feb79ca54223b834cab893e26beb.png
[7f897bb281c54eccbc9b27040e23a432.png]: https://img-blog.csdnimg.cn/7f897bb281c54eccbc9b27040e23a432.png
[599e49d123af4bcb8365cc5cfadbebfa.png]: https://img-blog.csdnimg.cn/599e49d123af4bcb8365cc5cfadbebfa.png
[108f759f4ffe4fb9b5ed07a387a38644.png]: https://img-blog.csdnimg.cn/108f759f4ffe4fb9b5ed07a387a38644.png
[32d208b55524409b94eb012c0f3d676d.png]: https://img-blog.csdnimg.cn/32d208b55524409b94eb012c0f3d676d.png
[b9c6471a0d8f40bcbcf543bdeefe57ec.png]: https://img-blog.csdnimg.cn/b9c6471a0d8f40bcbcf543bdeefe57ec.png
[81c845be6b064db3af396e4b52cb0eae.png]: https://img-blog.csdnimg.cn/81c845be6b064db3af396e4b52cb0eae.png
[58f178888b8845f4a20c1ec35f2021bd.png]: https://img-blog.csdnimg.cn/58f178888b8845f4a20c1ec35f2021bd.png
[9f20bff1b28e40d396b4bbe638792e7b.png]: https://img-blog.csdnimg.cn/9f20bff1b28e40d396b4bbe638792e7b.png
[aedabc35df1e448fa5bc69f84c20d6a1.png]: https://img-blog.csdnimg.cn/aedabc35df1e448fa5bc69f84c20d6a1.png
[d8141431f9934bf5b7a2ddd520b1dee9.png]: https://img-blog.csdnimg.cn/d8141431f9934bf5b7a2ddd520b1dee9.png
[e7b30446af1f44209917188dee5eadd5.png]: https://img-blog.csdnimg.cn/e7b30446af1f44209917188dee5eadd5.png
[f92cde066c8e483693b9cbb29e54f097.png]: https://img-blog.csdnimg.cn/f92cde066c8e483693b9cbb29e54f097.png
[7962d0bb2e0c41d492a7297bdc8f55f1.png]: https://img-blog.csdnimg.cn/7962d0bb2e0c41d492a7297bdc8f55f1.png