#|JavaScript高级（ES6） javascript|es6|前端|JavaScript

JS高级学习笔记（中）
文章目录

JS高级学习笔记（中）
- 类(ES6)
- - 类的构造函数
  - 类的实例方法
  - 类的静态方法（类方法）
- ES6类的继承 -- extends
- - super关键字
- JavaScript中的多态
- 对象字面量的增强
- let 和 const
- - let 和 const 的作用域提升
  - let 和 const 的块级作用域
- 字符串模板的基本使用
- 函数的默认参数
- 函数的剩余参数
- Symbol 的基本使用
- 浅拷贝和深拷贝
- Set 和 Map
- - Set的基本使用
  - Set 与 WeakSet
  - Map的基本使用
  - Map 与 WeakMap
- Proxy 和 Reflect
- - Proxy 的基本使用
  - Proxy 的 get 和 set 捕捉器
  - Reflect 的基本使用
  - Proxy 和 Reflect 共同完成代理
- Promise
- - resolve不同值的区别
  - then 方法
  - catch方法
  - finally 方法
  - resolve 方法
  - reject 方法
  - all 方法与 allSettled 方法
  - race 方法与 any 方法

类(ES6)

类本质上依然是前面所讲的构造函数、原型链的语法糖而已

类的构造函数
如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？

每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor；
当我们通过new操作符，操作一个类的时候会调用这个类的构造函数constructor；
每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常；

文章图片

类的实例方法

前面我们说到的实例方法，我们是希望放到原型上的，这样可以被多个创建出来的实例共享，这个时候可以直接在类中定义实例方法。
实例方法只能通过创建出来的实例才能调用

类的静态方法（类方法）

文章图片
ES6类的继承 – extends

文章图片

super关键字

执行 super,method(…)来调用一个父类方法
执行 supe(…)来调用一个父类 constructor

注意：在子类的构造函数中使用this 或者返回默认值之前，必须先通过 super 关键字调用父类的构造函数。
JavaScript中的多态总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现

同一种东西表现出不同的形态

对象字面量的增强

属性简写

文章图片

方法的简写

文章图片

计算属性名

文章图片

let 和 const

let和var都是用于声明一个变量
const 表示常量、衡量的意思（常变量）表示保存的数据一旦被赋值，就不能被修改

【#|JavaScript高级（ES6）】注意：let 和 const 不允许重复声明变量

let 和 const 的作用域提升
let、const和var的另一个重要区别是作用域提升：

var声明的变量是会进行作用域提升的（在声明之前被访问）；
但是如果我们使用let声明的变量，在声明之前访问会报错；
在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的

总结：let、const没有进行作用域提升，但是会在解析阶段被创建出来

let 和 const 的块级作用域
在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的。

文章图片

注意：引擎会对函数的声明进行特殊的处理，允许像var那样进行提升，所以这里外面依然可以访问。

字符串模板的基本使用 ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：

首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
其次，在模板字符串中，我们可以通过==${expression}==来嵌入动态的内容；

函数的默认参数

文章图片

注意：通常函数参数的默认值我们会将其放到最后

函数的剩余参数如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组。
剩余参数和arguments有什么区别呢？

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参；
arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；
剩余参数必须放到最后一个位置，否则会报错

Symbol 的基本使用 Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。
是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值。使用Symbol在对象中表示唯一的属性名

文章图片

注意：Symbol即使多次创建值，它们也是不同的，Symbol函数执行后每次创建出来的值都是独一无二的

浅拷贝和深拷贝

文章图片

文章图片

Set 和 Map Set的基本使用

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复
创建Set我们需要通过Set构造函数 const set = new Set()
Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重

Set常见的属性：

size：返回Set中元素的个数；

Set常用的方法：

add(value)：添加某个元素，返回Set对象本身；
delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值； forEach(callback, [, thisArg])：通过forEach遍历set；
另外Set是支持for of的遍历的。

Set 与 WeakSet
区别：

区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；

注意：WeakSet 是不能遍历的，存储到WeakSet中的对象是没办法获取
Map的基本使用
Map 用于存储映射关系，我们可以使用对象来存储映射关系，他们有什么区别：

事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
这种时候就可以使用Map

Map常见的属性：

size：返回Map中元素的个数；

Map常见的方法：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
clear()：清空所有的元素； ? forEach(callback, [, thisArg])：通过forEach遍历Map；

Map也可以通过for of进行遍历。
Map 与 WeakMap
区别：

区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

Proxy 和 Reflect Proxy类，是用于帮助我们创建一个代理的。
如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象），之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作
Proxy 的基本使用
步骤：

文章图片
Proxy 的 get 和 set 捕捉器
作用：监听某些具体的操作
set函数有四个参数：

target：目标对象（侦听的对象）；
property：将被设置的属性key；
value：新属性值；
receiver：调用的代理对象；

get函数有三个参数：

target：目标对象（侦听的对象）；
property：被获取的属性key；
receiver：调用的代理对象；

文章图片

更多 Proxy
Reflect 的基本使用
Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射
[reflect 和 object](比较 Reflect 和 Object 方法 - JavaScript | MDN (mozilla.org))

文章图片

注意：如果我们的源对象（obj）有setter、getter的访问器属性，那么可以通过receiver来改变里面的this

Proxy 和 Reflect 共同完成代理
好处：

代理对象的目的: 不再直接操作原对象
Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功
- receiver就是外层Proxy对象
- Reflect.set/get最后一个参数, 可以决定对象访问器setter/getter的this指向

Promise

promise 是一个类

在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor

这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject；
当我们调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数；
当我们调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数；

文章图片

Executor中确定我们的Promise状态：

通过resolve，可以兑现（fulfilled）Promise的状态，我们也可以称之为已决议（resolved）；
通过reject，可以拒绝（reject）Promise的状态；

注意：一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的

resolve不同值的区别

情况一：如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；
情况二：如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态：
情况三：如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据then方法的结果来决定Promise的状态

文章图片

文章图片

then 方法

文章图片

then方法接受两个参数：

fulfilled的回调函数：当状态变成fulfilled时会回调的函数；
reject的回调函数：当状态变成reject时会回调的函数；

注意：Promise 的 then 方法是可以被多次调用的

then方法本身是有返回值的，它的返回值是一个Promise，我们可以进行链式调用。我们知道
Promise是有三种状态的。那么 then 方法返回的 Promise 到底处于什么样的状态？

当then方法中的回调函数本身在执行的时候，那么它处于pending状态；
当then方法中的回调函数返回一个结果时，那么它处于fulfilled状态，并且会将结果作为resolve的参数；（上方解释）
- 情况一：返回一个普通的值；
- 情况二：返回一个Promise；
- 情况三：返回一个thenable值；
当then方法抛出一个异常时，那么它处于reject状态；

catch方法

文章图片

事实上catch方法也是会返回一个Promise对象的，所以catch方法后面我们可以继续调用then方法或者catch方法

文章图片
finally 方法
ES新增特性：finally表示无论Promise对象无论变成fulfilled还是rejected状态，最终都会被执行的代码。 finally方法是不接收参数的，因为无论前面是fulfilled状态，还是rejected状态，它都会执行。

文章图片

resolve 方法
resolve是Promise 的类方法。
场景：我们已经有一个现成的内容了，希望将其转成Promise来使用。例如下面的 studentList 数组。
resolve参数状态：

参数是一个普通的值或者对象
参数本身是Promise
参数是一个thenable

文章图片

reject 方法
rejecy 也是Promise 的类方法。只是会直接将Promise 的状态设置为reject 状态。Promise.reject的用法相当于new Promise，只是会调用reject.
无论Promise.reject 传入的参数是什么状态，都会直接作为reject状态的参数传递到 catch
all 方法与 allSettled 方法
all方法作用：将多个Promise包裹在一起形成一个新的Promise
新的 Promise 状态是由所有包裹的Promise 共同决定的：

当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组；
当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

缺陷：对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的
allSettled 方法作用：会将所有的 Promise 都有结果的时候，无论是fulfilled 还是rejected 时候，才会有最终的状态。并且这个 Promise 的结果一定是fulfilled 的。其返回的结果是一个数组，数组中存放着每一个Promise的结果，并且是对应一个对象的。这个对象包含status状态，以及对应的value值。

文章图片
race 方法与 any 方法
race方法作用：如果有一个Promise有结果，race方法可以决定最终的结果。即谁先有结果，就使用谁的结果。
any方法的作用：用法与race相似，但是any方法会等到一个fulfilled状态才决定Promise的状态。如果所有的状态都是reject ，那么最终会报一个AggregateError错误。
2022.07.10