乐趣区

关于前端:前端那些事六ES611

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

    -------------
退出移动版