前端那些事六(ES6-11)
Posted 江文艺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端那些事六(ES6-11)相关的知识，希望对你有一定的参考价值。
ES6文档：https://es6.ruanyifeng.com/#docs/set-map
ES6（2015年发布）
------------
版本变动最多，加入许多语法特性；
兼容性：label 可以把ES6编译成ES5。
ES6 声明变量的六种方法：
ES5 只有两种声明变量的方法：var命令和function命令。
ES6除了添加let和const命令，后面章节还会提到，
另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有6种声明变量的方法。
let变量声明
const声明常量，值不能修改
解构赋值：
解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。
简化对象写法
箭头函数（=>）以及声明
箭头函数有几个使用注意点。
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，不具有prototype原型对象，不可以使用new命令，否则会抛出一个错误。
没有arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
不可以使用yield命令，因此箭头函数不能用作 Generator 函数
箭头函数都是匿名函数
箭头函数三种简化方式
this的静态特性：
不能作为构造函数 实例化对象：
不能使用 arguments 变量：
简化实例：
箭头函数适合与this无关的回调，比如：定时器 数组的方法回调
箭头函数不适合与this有关的回调，比如：事件回调、对象的方法
允许给函数参数赋默认值
rest参数
扩展运算符
扩展运算符
扩展运算符能将「数组」转换为逗号分隔的「参数序列」;
扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
扩展运算符的运用
数组的合并：[...数组1, ...数组2]
数组的克隆：[...数组]
将伪数组转为真数组：
新数据类型Symbol
ES6引入一个新数据类型Symbol来标识独一无二的值，是一种类似于字符串的数据类型。
Symbol特点：
Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据进行运算
Symbol定义的对象属性不能使用for...in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。
在for...in迭代中不可枚举，object.getOwnPropertyNames() 不会返回symbol对象的属性，可以通过object.getOwnPropertySymbols() 获取。
Symbol创建
使用Symbol给对象添加属性或方法
Symbol的内置属性
数组
Map：映射 一对一
reduce：汇总 一堆出来一个 算总数，平均数
filter：过滤器
forEach：循环遍历（迭代）
字符串
新方法 startsWith endsWith
字符串模板 ``（反引号）
面向对象
class类
区别：
类不存在变量提升
this 的指向
ES6的面向对象：
1、增加class关键字，构造器和类分开了
2、 class里面直接加方法
class类的继承extends，super
super：超类 == 父类
面向对象 - 实例
模块化，组件化
JSX == babel ==browser.js
JSON
JSON对象
JSON.stringify()：json转字符串
JSON.parse()： 字符串转json
json的简写，方法简写
名字和值(key和value)一样的时候，可以值保留一个。
对象的简写
promise
https://mp.weixin.qq.com/s?__...
特点：
promise的状态一经改变就不能再更改，不允许返回。
promise.all 全部成功才调用成功方法，有一个没成功就调用失败方法
promise.race 竞赛，所有实例里第一个返回的状态，是成功就走成功
promise.any 有一个成功就成功，全部失败才失败
promise.allSettled 包装一组实例，记录所有状态返回。
finally 所有状态都会走
实现retry https://blog.csdn.net/qq_40420294/article/details/101920789
异步：操作之间没什么关系，可以同时进行多个操作 缺点 代码更复杂
同步：操作直接是相关的 同时只能做一件事 代码更简单
ajax请求 异步
优点：
Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。
promise 消除异步操作 用同步一样的方式来书写异步
.then可以链式调用，解决回调地狱的问题，解决异步的问题，new了
缺点：
不方便调用、一旦执行无法停止，状态改变后无法改变。
不容易定位错误信息
Promise.then()基本使用：
Promise.all()：解析多个请求
全部成功才调用成功方法，有一个没成功就调用失败方法
Promise.race()：解析多个请求
竞赛，所有实例里第一个返回的状态，是成功就走成功
generator
generator是一个普通函数，两个特征：function和函数名之间有*，内部使用yield表达式。
generator函数和普通函数的区别：generator函数中途可以停止
yield：暂时放弃执行
next()
Proxy 拦截，代理器（vue3原理）
数组的key是他本身
重载（overload）：用自己的定义覆盖了语言的原始定义
所要代理目标对象 ， 配置对象
Proxy实例的方法：
get()：目标对象 拦截器 proxy本身
set 目标对象 属性名 属性值 实例本身
apply 目标对象 目标对象上下文 数组
has 目标对象 属性名
construst 拦截构造函数
迭代器（Iterator）：自定义遍历数据
任何数据只要部署Iterator接口，就可以完成遍历操作，主要供for...of消费。
Set
WeakSet
WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。
Map
ES6提供了Map数据结构，它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用[扩展运算符]和[for ... of...]进行遍历。
Map的属性和方法：
size 返回Map的元素个数
set 增加一个新元素，返回当前Map
get 返回键名对象的键值
has 检测Map中是否包含某个元素，返回boolean值
clear 清空集合，返回undefined
ES7（2016年发布）
------------ES8（2017年发布）
------------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会阻塞代码
async await和promis的区别：
相同点：都是优化异步编程体验的解决方案；
不同点：
promise是应用层的解决方案，它有一个规范，不同的语言也可以实现，它只能异步的处理错误，在js里本质是一个对象
async/await是语言层的解决方案，可以让用户像编写同步代码一样，通过try/catch可以同步地处理错误。
promise解决回调地狱的问题，async/await返回的是一个promise对象，解决promise里不停.then的问题
ES9（2018年发布）
------------ES10（2019年发布）
-------------ES11（2020年发布）
-------------
以上是关于前端那些事六(ES6-11)的主要内容，如果未能解决你的问题，请参考以下文章