JS查漏补缺

品风 ₯ 未醉

已于 2022-03-01 23:21:01 修改

阅读量1.4k

点赞数 4

分类专栏： js学习笔记文章标签： javascript 正则表达式前端

于 2022-01-18 21:51:18 首次发布

本文链接：https://blog.csdn.net/weixin_48342617/article/details/122556041

版权

js学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数字类型的区别（堆栈底层机制）

在这里插入图片描述

从堆栈的角度理解下面的代码：注意变量和值是分开创建的

let a=12;
let b=a;
a=13
console.log("b="+b)=>12
console.log("a="+a)=>13

在这里插入图片描述

内存嵌套：会导致内存溢出
在这里插入图片描述

在这里插入图片描述

数据类型检测

在这里插入图片描述

基于typeof的检测结果：
基于instanceof

对象数据类型

属性名

在这里插入图片描述

首先属性名都是字符串或数字只不过我们书写的时候习惯省略了双引号，所以使用[]获取相应的的键值的时候，得使用字符串不然它会认为你的是一个变量如果找不到该变量，会报错
其次如果你的键是数字那你只能通过使用【】的方式来获取键值

let person={
    name:"jsj"
}
//console.log(person[name])=>undefined
console.log(person["name"])=>jsj

删除属性

在这里插入图片描述

数组

数组的基本结构

在这里插入图片描述
其次由于数组是特殊的对象说一数组一样也是可以使用.来获取属性，细想一下数组无非就是键位数字的对象

函数

匿名函数和立即执行函数

在这里插入图片描述
立即执行函数的原理：就类似于A(),前面的小过号就是函数，后面的小过号就是让函数执行，所以后面的小过号自然可以加上参数

函数执行的底层

在这里插入图片描述
函数内部的代码在创建的时候是以字符串的形式保存在堆内存中，没有任何的意义，只有在执行的时候才会转化为代码

arguments

在这里插入图片描述
但需要注意的是arrguments里面保存的不易定就是同一类数据，就跟数组可以保存不同类型的数据是同一个道理

正则表达式

对于正则表达式的理解

对正则表达式的理解：正则表达式就是某种规则，这种规则可以作用域字符串，判断字符串式否满足该正则规则，或者说可以获取符合该规则的字符串
在这里插入图片描述
上面代码中/\d+/的意思就是：一连串的数字

创建正则表达式

在这里插入图片描述
创建正则表达式有两种方法：
1：使用字面量模式
2：使用构造函数：需要传递两个字符串作为参数，但要注意转义

元字符

在这里插入图片描述

修饰符

在这里插入图片描述

元字符详细解析

在这里插入图片描述

常用的正则表达式

在这里插入图片描述

字面量与构造函数创建表达式的区别

在这里插入图片描述

正则的捕获

在这里插入图片描述

也就是说只有当前的正则表达式与当前字符串匹配之后，才能进行捕获

捕获的懒惰性

在这里插入图片描述

怎么解决：加上全局修饰符 g
在这里插入图片描述
使用reg.test后同样会影响reg.exes()的lastIndex,因为都是reg同一个正则

我们可以自己写一个函数来获取所有符合正则表达式的字符串，但没必要因为字符串中已经有了现成的方法match()

分组捕获

在这里插入图片描述
也就是说匹配后，如果不想要捕获该分组的话可以在该分组内加上？：

在这里插入图片描述

使用match也无法一次获取多个小分组的信息，所以只能自己写一个函数来求

在这里插入图片描述

分组引用也就是说：可以通过/加数字表示多个一样的分组

正则表达之取消贪婪性

在这里插入图片描述
贪婪性指的是：\d+为什么就直接匹配上了2019而不是2，20，201，这就是正则的贪婪性，怎么取消贪婪性在量词元字符的后面加上？

？的作用总结：

正则捕获的其他捕获方法：

Test也能捕获（本意是匹配）
主要是利用了匹配后$1-$9里面保存的分组信息
在这里插入图片描述

如果replace里面的的第2个参数为函数，则replace中正则表达式匹配了几次，那个函数就会执行几次，并且reg还会将匹配到的分组信息传递给该函数（大分组，小分组），例子如下：

元素对象的深一层理解

在这里插入图片描述

在这里插入图片描述
这里主要考察的就是返回值的类型问题，如果返回值是对象类型修改自然有效，如果是值类型修改自然无效

面向对象

单例模式

在这里插入图片描述

在这里插入图片描述
高级单例模式：其实是利用了闭包的保护机制，闭包里面的属性和方法就不会和外部的其他的属性和方法冲突

工厂设计模式

在这里插入图片描述

构造函数执行的基本操作

同步和异步编程

定时器

setTimeout:设置号后的一段时间执行一次
setInterval:每隔一段时间执行一次
在这里插入图片描述

浏览器渲染原理

在这里插入图片描述

对上面这幅图的解释：首先我我们的浏览器是多线程的，每开一个页面就回添加一个进程，可是每个页面中只会有一个线程取渲染渲染页面，可是当js中遇到某些标签是就会开启异步编程

在这里插入图片描述
当主线程渲染完html,生成了dom树后就会去执行其他线程所取回来的代码，生成css树，然后将两颗树结合

异步编程执行流程：
例子1：
在这里插入图片描述
下面的代码还是按照上面的流程执行：

下面的代码中即使定时器中的时间到后，也需要主线程不被占用才能执行

上面代码回输出0 2 5 6

Promise

在这里插入图片描述

AJAX中的串行并行

在这里插入图片描述
首先是ajax请求中的串行操作，因为我们发送下一个请求时基于上一个请求的结果所以我们不可能采取同步，只能采取异步，首先时串行操作，我们把下一个请求放在上一个请求的回调中，一次类推，代码如下：

在这里插入图片描述

在上面的题目中添加一个要求获取语文等成绩的排名
下面是ajax的并行操作，三个请求同时发送可是我们通过一个回调函数和变量来判断三个请求是否完成了，只有三个请求都完成了我们才执行要做的事情
在这里插入图片描述

Promise的EXECUTOR和状态

在这里插入图片描述

上面案例中的Promise状态

在这里插入图片描述

then,catch,finally方法

在这里插入图片描述
参考了js中的异常捕捉

其中最重要的点就是在执行异步操作时，线程并不会等待异步操作万册灰姑娘，而时直接执行then方法，到时间池中构建回调成功的操作以及四百后要执行的操作
在这里插入图片描述

例子如下：
在这里插入图片描述
如果then中不想写失败的回调就需要使用catch抓取错误

其中finallly函数中是一定回执行的操作

then链

由于then函数返回的同样是promise的实力所以该实例一样可以使用then方法
由此就可以形成then链，其中pro2中的状态使用pro1中的then的函数决定的，只要then中的任何一个方法执行了，它的状态都是fuifilled
在这里插入图片描述

在这里插入图片描述

解决AJAX中的串行和并行

在这里插入图片描述

在这里插入图片描述

现在项目中的使用的方式：ajax串行

解决ajax并行
在这里插入图片描述

在这里插入图片描述

注意重点：

上面的请求都是基于jquery中的ajax发送的请求，所以上面的代码需要我们自己封装promise，哪有没有现成的ajax库是基于promise，我们可以直接使用？有的那就是axios,他娘的学了半天的封装结果有现成的

axios

在这里插入图片描述

get的基本使用

之前已经写过一篇关于axios的文章了，想要了解详情直接去看那篇文章

常用的配置项
在这里插入图片描述
例子如下：

在这里插入图片描述

post的基本使用：

与get的组要区别就是post请求项服务器传递参数时不需要使用params,直接作为i第2个参数传递过去即可，但需要使用transformRequest将data中的数据转换格式
在这里插入图片描述

async

题目：要求设置两个定时器，两个定时器输出的内容相隔1毫秒
在这里插入图片描述
使用：es7 中的新语法实现

也就是说效果等效于：只有await所修饰的代码执行完了，才能向下走

首先对上面代码的解释：被async修饰的函数会将返回结果包装成promise实例，所以只然可以使用then函数将返回结果输出