前端那些事六(ES6-11)

ES6文档：https://es6.ruanyifeng.com/#docs/set-map

1. ES6（2015年发布）

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

版本变动最多，加入许多语法特性；

兼容性：label 可以把ES6编译成ES5。

ES6 声明变量的六种方法：

• ES5 只有两种声明变量的方法：var命令和function命令。

• ES6除了添加let和const命令，后面章节还会提到，

• 另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有6种声明变量的方法。

1. let变量声明

2. const声明常量，值不能修改

3. 解构赋值：

解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

1. 简化对象写法

2. 箭头函数（=>）以及声明

箭头函数有几个使用注意点。

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

2. 不可以当作构造函数，不具有prototype原型对象，不可以使用new命令，否则会抛出一个错误。

3. 没有arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数

5. 箭头函数都是匿名函数

6. 箭头函数三种简化方式

7. this的静态特性：

8. 不能作为构造函数 实例化对象：

9. 不能使用 arguments 变量：

10. 简化实例：

• 箭头函数适合与this无关的回调，比如：定时器 数组的方法回调

• 箭头函数不适合与this有关的回调，比如：事件回调、对象的方法

1. 允许给函数参数赋默认值

2. rest参数

3. 扩展运算符

4. 扩展运算符

扩展运算符能将「数组」转换为逗号分隔的「参数序列」;

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

1. 扩展运算符的运用

• 数组的合并：[...数组1, ...数组2]

• 数组的克隆：[...数组]

• 将伪数组转为真数组：

1. 新数据类型Symbol

ES6引入一个新数据类型Symbol来标识独一无二的值，是一种类似于字符串的数据类型。

Symbol特点：

1. Symbol的值是唯一的，用来解决命名冲突的问题

2. Symbol值不能与其他数据进行运算

3. Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

4. 在for...in迭代中不可枚举，object.getOwnPropertyNames() 不会返回symbol对象的属性，可以通过object.getOwnPropertySymbols() 获取。

5. Symbol创建

6. 使用Symbol给对象添加属性或方法

7. Symbol的内置属性

8. 数组

9. Map：映射 一对一

10. reduce：汇总 一堆出来一个 算总数，平均数

11. filter：过滤器

12. forEach：循环遍历（迭代）

13. 字符串

14. 新方法 startsWith endsWith

15. 字符串模板 ``（反引号）

16. 面向对象

17. class类

区别：

1. 类不存在变量提升

2. this 的指向

ES6的面向对象：

1、增加class关键字，构造器和类分开了

2、 class里面直接加方法

1. class类的继承extends，super

super：超类 == 父类

1. 面向对象 - 实例

模块化，组件化

JSX == babel ==browser.js

1. JSON

2. JSON对象

• JSON.stringify()：json转字符串

• JSON.parse()： 字符串转json

1. json的简写，方法简写

• 名字和值(key和value)一样的时候，可以值保留一个。

• 对象的简写

1. promise

https://mp.weixin.qq.com/s?__...

特点：

1. promise的状态一经改变就不能再更改，不允许返回。

2. promise.all  全部成功才调用成功方法，有一个没成功就调用失败方法

3. promise.race  竞赛，所有实例里第一个返回的状态，是成功就走成功

4. promise.any 有一个成功就成功，全部失败才失败

5. promise.allSettled  包装一组实例，记录所有状态返回。

6. finally 所有状态都会走

7. 实现retry https://blog.csdn.net/qq_40420294/article/details/101920789

• 异步：操作之间没什么关系，可以同时进行多个操作 缺点 代码更复杂

• 同步：操作直接是相关的 同时只能做一件事 代码更简单

• ajax请求 异步

优点：

• Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。

• promise 消除异步操作 用同步一样的方式来书写异步

• .then可以链式调用，解决回调地狱的问题，解决异步的问题，new了

缺点：

• 不方便调用、一旦执行无法停止，状态改变后无法改变。

• 不容易定位错误信息

1. Promise.then()基本使用：

2. Promise.all()：解析多个请求

全部成功才调用成功方法，有一个没成功就调用失败方法

1. Promise.race()：解析多个请求

竞赛，所有实例里第一个返回的状态，是成功就走成功

1. generator

• generator是一个普通函数，两个特征：function和函数名之间有*，内部使用yield表达式。

• generator函数和普通函数的区别：generator函数中途可以停止

• yield：暂时放弃执行

1. next()

2. Proxy 拦截，代理器（vue3原理）

数组的key是他本身

重载（overload）：用自己的定义覆盖了语言的原始定义

所要代理目标对象 ， 配置对象

Proxy实例的方法：

1. get()：目标对象  拦截器  proxy本身

2. set 目标对象 属性名 属性值 实例本身

3. apply 目标对象 目标对象上下文  数组

4. has 目标对象 属性名

5. construst 拦截构造函数

6. 迭代器（Iterator）：自定义遍历数据

7. 任何数据只要部署Iterator接口，就可以完成遍历操作，主要供for...of消费。

8. Set

9. WeakSet

WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。

1. Map

ES6提供了Map数据结构，它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用[扩展运算符]和[for ... of...]进行遍历。

Map的属性和方法：

1. size 返回Map的元素个数

2. set 增加一个新元素，返回当前Map

3. get 返回键名对象的键值

4. has 检测Map中是否包含某个元素，返回boolean值

5. clear 清空集合，返回undefined

6. ES7（2016年发布）

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

7. ES8（2017年发布）

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

8. async await

https://www.zhihu.com/question/39571954

• 概念：async函数就是generator函数的语法糖。async函数，就是将generator函数的*换成async，将yield替换成await。

• 异步编程的终极解决方案。

• await后面的是同步任务，await下面的是微任务 ，.then是微任务

• 函数执行时，一旦遇到await就会返回。等到触发的异步操作完成（并且调用栈清空），再接着执行函数体内后面的语句。

• async/await是基于Promise实现的，async函数的返回值是promise对象

• promise对象的结果由async函数执行的返回值决定。

优点：

• async和await两种语法结合可以让异步代码像同步代码一样

• 解决链式调用，不需要像Promise一样一直.then，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码。

缺点：

• 可能导致性能问题，因为await会阻塞代码

1. async await和promis的区别：

相同点：都是优化异步编程体验的解决方案；

不同点：

• promise是应用层的解决方案，它有一个规范，不同的语言也可以实现，它只能异步的处理错误，在js里本质是一个对象

• async/await是语言层的解决方案，可以让用户像编写同步代码一样，通过try/catch可以同步地处理错误。

• promise解决回调地狱的问题，async/await返回的是一个promise对象，解决promise里不停.then的问题

1. ES9（2018年发布）

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

2. ES10（2019年发布）

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

3. ES11（2020年发布）

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