大家好，我是讯享网，很高兴认识大家。



Map 与 Object

• Map 有序结构, key 任意类型; Object 无序结构, key 两种类型 (String、Symbol)
• Set 可以自动去重 (很多去重方法比较快的)
• Map 和 Set 比 Object Array 整体要执行更快

Map 与 Set 不同

• 初始化需要的值不一样，Map 需要的是一个二维数组，而 Set 需要的是一维 Array 数组

讯享网

• Map 的键是不能修改，但是键对应的值是可以修改的；Set 不能通过迭代器来改变 Set 的值，因为 Set 的值就是键
• Map 是键值对的存在，值也不作为健；而 Set 没有 value 只有 key，value 就是 key

Map 与 Set 相同

• Map 和 Set 都不允许键重复

Map、Set 的主要语法有哪些？

都有的语法是 、、

Map 有 方法，Set 没有

Map 的基本使用

讯享网

Set 的基本使用

使用 Set 去重

讯享网

[注]

Map、Set 数据结构都是 ES6 语法

Map、Set 相关语法

以下代码输出什么？

将上面代码修改下, 输出结果为 0 ~ 9

讯享网

扩展: let 有块作用域, var 没有块作用域

闭包、原型链、异步、深浅拷贝、Promise、变量提升

闭包的特点

• 一个是可以读取函数内部的变量
• 另一个就是让这些变量的值始终保存在内存中

通过直接设置, 数组长度即可

讯享网

DOM 与 BOM 的模型

讯享网

区别

DOM 文档对象模型

BOM 浏览器对象模型

普通事件绑定

• 如果给同⼀个元素绑定了两次或者多次相同类型的事件，那么后⾯的绑定会覆盖前⾯的绑定
• 利用开头的的事件
• 不支持事件流（捕获-目标-冒泡）

事件流绑定

• 如果说给同⼀个元素绑定了两次或者多次相同类型的事件，所有的绑定将会依次触发
• 支持事件流（捕获-目标-冒泡）
• 不加事件

讯享网

阻止默认事件:

阻止事件冒泡:

区别

• Document.onload 是在结构和样式加载完才执⾏ js
• window.onload：不仅仅要在结构和样式加载完，还要执⾏完所有的样式、图片这些资源文件，全部 加载完才会触发事件
• Document.ready 原⽣种没有这个⽅法， 中有

变量、对象、数组 只定义了, 未赋值

• ⼀个变量定义了却没有被赋值
• ⼀个对象上不存在的属性或者⽅法
• ⼀个数组中没有被赋值的元素

• Window
• document
• location (获取路由的主机名、端口等信息)
• screen (显示屏幕的信息, 浏览器浏览器最大时的宽高等信息)
• history (获取路由信息, url)
• navigator (获取浏览器信息, 通常用于判断浏览器名称)

在浏览器中存储 key/value 对, 没有过期时间

在浏览器中存储 key/value 对, 没有过期时间

• 的第⼀个参数使⽤字符串⽽非函数的话，会引发内存泄漏。

讯享网

前端常见内存泄漏及解决方案

与都是判断数据类型的方法，区别如下：

• 会返回一个变量的基本类型，返回的是一个布尔值
• 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
• 而 也存在弊端，它虽然可以判断基础数据类型（ 除外），但是引用数据类型中，除了 类型以外，其他的也无法判断

可以看到，上述两种方法都有弊端，并不能满足所有场景的需求

如果需要通用检测数据类型，可以采用 ，调用该方法，统一返回格式的字符串

讯享网

区别

• var 是 ES5 语法, let const 是 ES6 语法, “没有变量提升”；var 有变量提升
• var 和 let 是变量. 可修改; const 是常量, 不可修改
• let const 有块级作用域, var 没有

变量提升

ES5 中, 执行代码前, 回去找 var 定义的变量, 会把 var定义的变量先赋值为 undefined

块级作用域

var是函数作用域，let是块作用域

在函数中声明了var，整个函数内都是有效的，比如说在 for循环 内定义的一个 var变量，实际上其在for循环以外也是可以访问的

而 let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的

讯享网

当然，在判断语句中，定义的变量外部也无法访问

小结：块级作用域，在 花括号中定义的变量外部都无法直接访问

暂时性死区

讯享网

为什么会这样，因为 let const 与 var 有类似的 “变量提升”，但是 var 不同的是其执行上下文的创建阶段，只会创建变量，而不会被初始化 (即定义为)

并且 ES6 规定了其初始化过程中是执行上下文的执行阶段才被初始化，未被初始化，会报错 ()

小结：简单来说，let const 无法未声明就被使用，如果先被使用，再定义，就会报错，这就是暂时性死区

重复声明

var 可以重复声明，而 let、const 重复声明会报（已经变量已经声明）的错误！

[特殊]

浏览器控制的输出

讯享网

[扩展]

const 不能赋值, 为什么其属性可以被修改?

这是因为 const 声明的变量存储的是一个引用（也就是一个引用类型的内存地址指针），而不是对象本身。当我们修改 obj 的属性时，实际上是修改了对象本身，而不是修改了常量 obj 的值。因此，const 声明的变量仍然可以被修改，只是不能被重新赋值。

需要注意的是，如果我们尝试给 const 声明的变量重新赋值，就会抛出一个错误，例如：

在这个例子中，我们尝试给常量 obj 重新赋值，就会抛出一个错误，因为常量的值不能被重新赋值

函数提升

函数提升有两种：函数声明提升、函数表达式提升

函数声明提升

讯享网

js 在执行之前，会把 foo函数 提升到最前面，所以我们在 fun函数 定义之前就可以使用 fun函数

打印结果为 aa，说明以函数声明来定义函数时，可以在定义函数之前访问到定义的函数

函数表达式提升

讯享网

此种声明方式我们可以理解为 一个普通变量的提升，在js代码执行之前会把fun提升带最前面，在函数赋值之前，fun 是 undefined，如果调用fun(), 将会报错

再举个栗子来理解下：

此时打印的结果为报错，因为在js代码执行之前，会把fun提升到最前面，值为 undefined

不是一个函数，以函数的形式来进行调用时将会报错

变量提升与函数提升

强制: parseInt、parseFloat、toString 等

隐式: if、逻辑运算、==、+拼接字符串

区别

• 函数声明 function fn() {...}
• 函数表达式 const fn = function() {...}
• 函数声明会在代码执行前预加载 (类似变量提升), 而函数表达式不会

讯享网

讯享网

Split() 方法是切割成数组的形式

Join() 方法是将数组转换成字符串

join()：方法用于把数组中的所有元素放入一个字符串

指定分隔符方法 join("#")，其中 # 可以是任意

split()方法：用于把一个字符串分割成字符串数组，stringObject.split(a,b) 这是它的语法

讯享网

纯函数

• 不改变源数组 (没有副作用, 或者说不影响函数外部的数据)
• 返回一个数组

非纯函数

push、pop、shift、unshift

forEach

some every

reduce

区别

• 功能区别 (slice - 切片, splice - 剪切)
• 参数 和 返回值不同
• 是否纯函数？

讯享网

要点

• map 的参数和返回值
• parseInt 参数和返回值

区别

• get 一般用于查询操作, post 一般用户提交操作
• get 参数拼接在 url 中, post 放在请求体内 (数据体积可更大)
• 安全性: post 易于防止 CSRF

相同: 都改变 this 的指向

不同：

• 是否返回函数: bind 返回绑定 this 之后生成新函数, 便于稍后调用; apply、call 则是立即执行
• 第二个参数不同: call、bind 第二个参数是可以分多次传入, 而 apply 必须是一个数组

讯享网

需要绑定的元素很多, 不方便每个元素都去绑定, 那么就去它们的父元素上绑定, 这就是事件代理

闭包:

在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁

特征:

作用域和自由变量

重点:

自由变量的查找, 要在函数定义的地方 (而非执行的地方)

影响:

变量会常驻内存, 得不到释放, 闭包不要乱用

可能会造成内存泄漏, 但是闭包中的数据, 我们不知道什么时候会被释放, 所以不算内存泄漏

内存泄漏是指, 内存中的变量一直没被使用, 常驻在内存中

开发过程中什么时候用到闭包?

1. 使用异步请求的时候, 异步请求以函数作为参数进行传递, 这就是一个闭包
2. 还有就是 我们写防抖节流函数, 也是需要使用保存局部变量进行计数, 然后返回回调函数, 这也是闭包的使用
3. 函数柯里化, 也是一种闭包的使用, 函数作为返回值

任何闭包的使用场景的目的:

• 创建私有变量
• 延长变量的生命周期

区别

• {} 等同于 new Object(), 原型 Object.prototype
• Object.create(null) 没有原型
• Object.cteate({...}) 可指定原型

原理

Object.create 创建一个空对象, 然后把空对象原型指向到传入的对像的隐式原型上

讯享网

读代码

this 的指向问题

只有执行阶段才能判断 this 的指向

在对象函数执行时, this 指向当前对象

• this 指向执行阶段才能知道
• 自由变量的查找, 要在函数定义的地方

判读字符串以字母开头, 后面字母数字数字下划线, 长度 6-30

场景1

讯享网

场景2

trim

去掉字符串前后空白字符

讯享网

各种方式

• class 继承
• prototype 继承

两种方式

• try catch
• window.onerror

讯享网

知识点

• json 是一种数据格式, 本质是一段字符串
• json 格式和 JS 对象结构一致, 对 JS 语言更友好
• window.JSON 是一个全局对象: JSON.stringify、JSON.parse

两种方式

• 传统方式, 查找 location.search
• 新 API, URLSearchParams

讯享网

数组拍平

两种方式

• 传统方式, 遍历元素挨个比较、去重, 注意计算效率
• 使用 Set

讯享网

介绍

• 要想动画流程, 更新频率要 60帧/s, 即 16.67ms 更新一次视图
• setTimeout 要手动控制频率, 而 RAF 浏览器会自动控制
• 后台标签或隐藏 iframe 中, RAF 会暂停, 而 setTimeout 依然执行

原则

多使用内存、缓存, 减少计算、减少网络请求

方向

加载页面, 页面渲染, 页面操作流畅度

浅拷贝: 只复制对象指针, 新旧对象共享内存

深拷贝: 创造一样的对象, 不共享内存

深拷贝、浅拷贝 只针对 数组或者对象这些而已, 对于普通变量没有这个概念

深拷贝, 新对象修改, 不会导致旧对象修改

[扩展]

浅拷贝与深拷贝的区别 - 实现方法

1. 块级作用域
2. 箭头函数
3. 新的数组、对象操作 API
4. 解构, 可以避免在对象赋值时产生中间变量
5. 扩展运算符 [...arr]
6. 类 class
7. 迭代器
8. 装饰器
9. promise

async/await 是 ES7 的语法

解构的使用

讯享网

async / await 的使用

[扩展]

await 后面是一个普通函数的话, 返回的就是普通函数的返回值

理解 JavaScript 的 async/await

扩展运算符

错误实例

讯享网

错误所在

是剩余参数，剩余参数的值是一个包含所有剩余参数的数组，并且只能作为最后一个参数。上述示例中，剩余参数是第二个参数，这是不可能的，并会抛出语法错误

正确的使用方法，，扩展运算符只能放在最后的参数，用来接收剩余的参数

JS 是单线程的, 但是有 同步任务 和 异步任务

同步任务会进入主线程, 异步任务会进入任务队列, 当主线程执行完后, 就会把任务队列的任务读入主线程执行

如此反复循环的过程, 就是事件循环

当前元素的父元素也有事件的时候, 就需要去阻止事件冒泡

质数（Prime number），又称素数，指在大于1的自然数中，除了1和该数自身外，无法被其他自然数整除的数

方法一

写个标记, 然后循环做除看看是否除了 1和该数自身外, 有没有其他自然整数能被整除

讯享网

方法二

优化的方法, 循环次数取被检测数的平方根

1. 检索 API (indexOf、lastIndexOf、includes)

讯享网

2. 替换 API (replace、replaceAll)

3. 截取 API (substring、split、slice、trim)

讯享网

使用 Promise

语法糖本质上可以修改为

讯享网

在大部分情况下， 等价于 加上

三种状态: 、、 (未决定，履行，拒绝)

1.初始化，状态：pending

2.当调用resolve(成功)，状态：pengding=>fulfilled

3.当调用reject(失败)，状态：pending=>rejected

回调地狱

解决了 异步问题, 可以 异步转同步

讯享网

可以改变的

为什么呢?

因为对象是引用类型的, P中保存的仅是对象的指针, 这就意味着, const 仅保证指针不发生改变, 修改对象的属性不会改变对象的指针, 所以是被允许的

也就是说 const 定义的引用类型只要指针不发生改变, 其他的不论如何改变都是允许的

法一 (循环比较)

讯享网

法二 (转为字符串)

场景: 多个 Promise 请求, 如果只有一个出错的话, 那么整个就会抛出异常, 不会继续执行

讯享网

如果其中一个错误, 让成功的也能输出出来

使用 ES2020 (ES11) 的新语法 , 就能捕获正常和错误的返回

讯享网

讯享网

[小结]

和 从返回结果来看，它们 彼此相反 ：

• ：任意一个 被 ，就会立即被 ，并且 的是第一个抛出的错误信息，只有所有的 都 时才会 所有的结果
• ：任意一个 被 ，就会立即被 ，并且 的是第一个正确结果，只有所有的 都 时才会 所有的失败信息

另外，它们又有不同的 重点 ：

• 对所有实现都感兴趣。 相反的情况（至少一个拒绝）导致拒绝。
• 对第一个实现感兴趣。 相反的情况（所有拒绝）导致拒绝。

简单来说, 哪个状态先改变就返回哪个, 不管是 、还是 状态

方法接受一个数组作为参数，数组的每个成员都是一个 Promise 对象，并返回一个新的 Promise 对象

只有等到参数数组的所有 Promise 对象都发生状态变更（不管是还是），返回的 Promise 对象才会发生状态变更

讯享网

这个属性, 在 ES5 中就有了, 每个对象都有 、 方法

关键字将对象属性与函数进行绑定, 当属性被访问时, 对应函数被执行

关键字将对象属性与函数进行绑定，当改变属性值时，对应函数被执行

讯享网

区别：

1、new执行的函数，函数内部默认生成了一个对象 2、函数内部的this默认指向了这个new生成的对象 3、new执行函数生成的这个对象，是函数的默认返回值

只能判断基础数据类型, 复杂类型都为 object, 除了 function 返回 function

讯享网

适用复杂数据类型的判断, 对于 简单类型的 undefined、null、symbol 检测不出来

适用于所有类型的判断检测, 返回数据类型的字符串

讯享网

用于检测引用数据类型

[扩展]

JS 判断数据类型的 8 种方式

1. 创建一个 b.js 文件, 导出两个模块变量

讯享网

2. 创建一个 a.js 文件，引入 b.js 文件，暴露出的两个变量

在没有参数的情况下，两者的意义是一样的

后者是前者的简写

前端递增、后端递增 单独一行，没区别，直接执行

讯享网

当然如果，加入函数或者其他就有所不同了

复杂一点的例子

讯享网

命令是编译阶段执行的，在代码运行之前。因此这意味着被导入的模块会先运行，而导入模块的文件会后执行

这是 CommonJS 中和之间的区别。使用，您可以在运行代码时根据需要加载依赖项。 如果我们使用而不是，，，会被依次打印。

讯享网

将函数传入的参数转换为数组对象

使用示例

讯享网

区别：

1. ES6的模块是时加载，CommonJS是时加载
2. ES6的模块是加载，CommonJS是加载
3. ES6的模块是 ，CommonJS 是对模块的

相同：

1. ES6的模块 与 CommonJS的模块 都可以对引入的对象属性进行赋值

讯享网

结论：

返回属性 key，但不包括不可枚举的属性

返回所有属性 key

四舍五入，返回一个四舍五入之后的整数

向下取整，直接舍去小数部分

向上取整，小数部分直接舍去，并向正数部分进 1

如果 radix 为空，默认转换为 10 进制》

Number 中没有 方法