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年发布)
-------------
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。