不积跬步,无以至千里【4】【ES6】
1. let、const、var的区别
2. 块级作用域
块作用域由 { }包括,let和const具有块级作用域,var不存在块级作用域。块级作用域解决了ES5中的两个问题:
内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量
3. 暂时性死区
在使用let、const命令声明变量之前,该变量都是不可用的。这在语法上,称为暂时性死区 let a = a/const a = a(会报错)
4. 解构赋值
5. 箭头函数和普通函数的区别(this的指向)
a、箭头函数没有自己的this
箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域的上一层继承this。
所以箭头函数中this的指向在它在定义时已经确定了,之后不会改变。
b、call()、apply()、bind()等方法不能改变箭头函数中this的指向
箭头函数的this指向要么是window,要么是他的外层
c、箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。
6. Symbol概念和作用
数据类型,不是函数,表示不会重复的值
--------------------
7. Set和Map数据结构
7.1、Set
a、概念
ES6 提供了新的数据结构 Set(集合)(是一个对象类型)。它类似于数组,但成员的值都是唯一的,
集合实现了 iterator 接口,所以可以使用『扩展运算符』(…)和『for…of…』进 行遍历
b、集合的属性和方法
size:返回集合的元素个数
add增加一个新元素,返回当前集合(一次只能加一个)
delete删除一个元素,返回Boolean值
has 检测集合中是否包含某个元素,返回 boolean 值
clear 清空集合,返回 undefined
7.2、Map
a、概念
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。
但是“键” 的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
Map 也实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。
若给map赋初始值,可以以数组形式,数组里面的也都为数组形式:const m = new Map([array(2),array(2)]);这样形成一个对象中包含两对键值对,
第一个数组中前一个为键名,后一个为键值,第二个数组同理。
b、Map的属性和方法
size 返回 Map 的元素个数(键值对个数)
set 增加一个新元素,返回当前 Map
delete 删除键值对,返回boolean 值
get 返回键名对象的键值
has 检测 Map 中是否包含某个元素,返回 boolean 值
clear 清空集合,返回 undefined
8. weakset 与WeakMap
weakset WeakSet 只能储存对象引用,不能存放值,而 Set 对象都可以。
WeakMap 对象也是一组键值对的集合,其中的键是弱引用的。其键必须是对象,原始数据类型不能作为key值,而值可以是任意的
9. Proxy
--------------------
10.Promise(Promise的链式调用,Promise的状态、Promise的方法)
10.1、在构造 Promise 的时候,构造函数内部的代码是立即执行的
Promise本身是同步的立即执行函数,当在executor中执行resolve()或者reject()的时候, 此时是异步操作,也就是说promise中函数体内部的非异步操作正常顺序执行,resolve()和reject()异步操作为promise实例对象的返回结果,这个返回结果后面的then或者catch需要用,所以then和catch要放到异步任务中等待所有同步任务执行完毕之后再按顺序(或者如果有定时器,需要遵循定时器的时间)执行。
10.2、Promise是异步编程的一种解决方案 解决了地狱回调的问题
它是一个对象,可以获取异步操作的消息,他的出现大大改善了异步编程的困境,避免了地狱回调,它比传统的解决方案回调函数和事件更合理和更强大。
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理
10.3、Promise的实例有三个状态 无法取消Promise,一旦新建它就会立即执行,无法中途取消
Pending(进行中)
Resolved(已完成)
Rejected(已拒绝)
10.4、Promise的实例有两个过程 一旦从进行状态变成为其他状态就永远不能更改状态了
pending -> fulfilled : Resolved(已完成)
pending -> rejected:Rejected(已拒绝)
10.5、原型方法 then、catch、finally、all、race
a、它的原型上定义了一个 then 方法,使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务,会在本轮事件循环的末尾执行
b、all()方法
Promise.all([p1,p2...])
---all方法可以完成并行任务, 它接收一个数组,数组的每一项都是一个promise对象。
---当数组中所有的promise的状态都达到resolved的时候,all方法的状态就会变成resolved,如果有一个状态变成了rejected,那么all方法的状态就会变成rejected
---当所有的子Promise都成功完成,该Promise完成,返回值是全部值的数组,这个数组按顺序保存着每一个promise对象resolve执行时的值
---如果有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果
c、race()方法
Promise.race([p1,p2...])
---race方法和all一样,接受的参数是一个每项都是promise的数组,但是与all不同的是,当最先执行完的事件执行完之后,就直接返回该promise对象的值。
---如果第一个promise对象状态变成resolved,那自身的状态变成了resolved;反之第一个promise变成rejected,那自身状态就会变成rejected
实际应用:
race 就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,
不管结果本身是成功状态还是失败状态。当要做一件事,超过多长时间就不做了,可以用这个方法来解决
10.6、Promise的特点
a、对象的状态不受外界影响。
promise对象代表一个异步操作,有三种状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也是promise这个名字的由来——“承诺”
b、一旦状态改变就不会再变,任何时候都可以得到这个结果。
promise对象的状态改变,只有两种可能:从pending变为fulfilled,从pending变为rejected。这时就称为resolved(已定型)。如果改变已经发生了,你再对promise对象添加回调函数,也会立即得到这个结果。这与事件(event)完全不同,事件的特点是:如果你错过了它,再去监听是得不到结果的
10.7、Promise的缺点
无法取消Promise,一旦新建它就会立即执行,无法中途取消
如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
11.Generator及其异步方面的应用
12.async函数和await
12.1、async
async函数返回的是一个Promise 对象,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象,async 函数返回的是一个 Promise 对象,所以在最外层不能用 await 获取其返回值的情况下,当然应该用原来的方式:then() 链来处理这个 Promise 对象
async函数返回的是一个promise对象:
可以用then()方法或者catch()方法来处理async函数(promise对象):
12.2、async/await其实是Generator 的语法糖,它能实现的效果都能用then链来实现,它是为优化then链而开发出来的。从字面上来看,async是“异步”的简写,await则为等待,所以很好理解async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
12.3、promise(async函数)异步任务只针对promise(async函数)中调用的then()方法或者catch()方法等里面的函数执行,promise(async函数)中的同步任务正常执行,不会阻塞,此时then或者catch方法里面的代码会放到异步任务队列中,待页面所有同步任务完成后再按照顺序(或时间顺序)执行
12.4、有await的async函数,会暂时阻碍await下面所有代码的执行,在async函数中并且在await前面的代码(以及await紧跟着的那个异步函数也会正常运行)会正常运行,待await等待到他后面异步函数的结果之后,再执行await下面的代码。
注意:await在没有等待到它后面的异步函数的结果时只是阻碍async函数中且在await下面的代码的执行,
async函数中且在await前面、await后面紧跟着的那个异步任务的代码,以及async函数之后的代码不会受到影响,会正常运行
13. class基本语法及继承
https://blog.csdn.net/Slueia/article/details/110395517
14. 模块加载方案比较(CommonJS和ES6的Module)
不同点
1.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
2.CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载
3.CommonJS是对模块的浅拷贝,ES6 Module是对模块的引入,即ES6 Module只存只读,不能改变其值,具体点就是指针指向不能变,类似const 。
4.import的接口是read-only(只读状态),不能修改其变量值。 即不能修改其变量的指针指向,但可以改变变量内部指针指向。可以对commonJS重新赋值(改变指针指向),但是对ES6 Module赋值会编译报错。
相同点
CommonJS和ES6 Module都可以对引⼊的对象进行赋值,即对对象内部属性的值进行改变
15. Iterator和for...of(Iterator遍历器的实现)
https://blog.csdn.net/weixin_40013817/article/details/103400007
posted on 2022-12-15 17:07 二月龙抬头之伏龙翔天 阅读(181) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析