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年发布)

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

江文艺
1k 声望67 粉丝