2023-03-16

ES全称为ECMAScript,它是由国际标准化组织ECMA(全称:European Computer Manufacturers Association)欧洲计算机制造商协会制定的一项脚本语言的标准化规范。JavaScript就实现了这套标准。ES6中的6代表的是版本,从2015年6月份发布的版本及其后续版本统称为ES6,从2015年开始,每年的6月份都会发布新版本。目前各大浏览器产商也都已经支持ES6。

ES6的新特性有哪些?

1.新增了块级作用域(let,const)

2.提供了定义类的语法糖(class)

3.新增了一种基本数据类型(Symbol)

4.新增了变量的解构赋值

5.函数参数允许设置默认值,引入了rest参数,新增了箭头函数。

6.数组新增了一些API,如isArray / from / of 方法;数组实例新增了 entries(),keys() 和 values() 等方法。

7.对象和数组新增了扩展运算符

8.ES6新增了模块化(import / export)

9.ES6新增了Set和Map数据结构。

10.ES6原生提供Proxy构造函数,用来生成Proxy实例

11.ES6新增了生成器(Generator)和遍历器(Iterator)

数组解构:

解构:分解数据结构。

赋值:为变量赋值。

解构赋值:从数组或者对象中提取值,按照对应的位置,对变量赋值(在数组解构中,只 要解构的目标可以遍历,就可以实现解构赋值)。

1:数组解构赋值的特点:

在数组解构中,左边用中括号包裹任意个变量,右边则是一个真实的数组,按照 一 一 对应的关系进行赋值,在赋值过程中有以下几种情况:

1.1:声明的变量数量与数组的元素数量一致:

1.2:声明的变量的数量大于数组的元素的数量:

1.3:声明的变量的数量小于数组的元素的数量:

1.4:使用剩余运算符进行解构赋值:

1.5:可遍历对象 例如:字符串:

let艮const的区别:

let:ES6新增的块级作用域

1:使用let声明的变量具有块级作用域:,只能在当前声明的代码块中使用,必须要先声明再使用

2:具有暂时性死区特性。

const:ES6中新增的常量(常量:值(内存地址)不可更改的量)。特点如下:

3.1:具有块级作用域的特点,只能在当前声明的代码块中使用,必须要先声明再使用。

3.2:声明常量时必须赋值,如果不赋值报错:Missing initializer in const declaration(在const声明中未初始化)。

  3.3:const声明的常量不可更改。

  3.4:使用const声明的常量如果是基本数据类型(比如:数字、字符串),一旦赋值,值不可以更改;如果是引用数据类型(数组,对象),不能重新赋值,但是可以更改数据结构内部的值(比如修改对象中的属性)

箭头函数:

1:箭头函数:ES6新增的定义函数的方式。

2:作用:用来简化函数定义的语法。

3:箭头函数的特点:

3.1:可以将箭头函数赋值给一个变量,变量名字就是函数的名字,通过变量名字调用函数。

3.2:如果函数体中只有一行代码,且代码的执行结果就是返回值,可以省略大括号。

3.3:如果形参只有一个,可以省略小括号(如果没有形参,小括号不能省略)。

promise的理解:

一、什么是Promise

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可以获取其成功或失败的结果。

二、为什么要使用promise

最重要也是最主要的一个场景就是ajax和axios请求。通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,但是我们下一步要执行的代码依赖于上一次请求返回值,这个时候我们就需要等待,结果出来了之后才知道怎么样继续下去。

三、promise的好处

1.可以避免多层异步调用嵌套问题(回调地狱)

2.Promise 对象提供了简洁的API,使得控制异步操作更加容易(js执行机制导致的异步问题)

这两点在我ES6专栏的相关文章有很详细的介绍,这里就不展开了

四、promise的三种状态

Promise对象有三种状态,他们分别是:

1.pending: 等待中,或者进行中,表示还没有得到结果

2.resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行

3.rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行

这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆

五、promise的用法

1.promise的实例方法

①then()得到异步任务的正确结果

②catch()获取异常信息

③finally()成功与否都会执行(尚且不是正式标准)

注意:then方法可以接受两个函数,第一个函数为promise状态为成功的回调函数,第二个函数为promise状态为失败的回调函数(可以不写,一般用catch方法捕获promise状态为失败的异常信息)

2.promise的对象方法(p1,p2,p3为promise的实例对象)

①Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果

Promise.all( [p1,p2,p3] ) .then ( (result) => {consoleog (result)

})

②Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果

Promise.race ( [p1,p2,p3] ).then ( (result)=>{

console. log (result)

})

六、promise的特点

1.在Promise对象的构造函数中,将一个函数作为第一个参数。

2.而Promise对象的构造函数的第一个参数中的这个函数,就是用来处理Promise的状态变化,这个函数的第一个参数表示promise的状态为成功,第二个参数表示promise的状态为失败,这两个参数(名字可以自己命名)都为一个函数,他们的作用分别是将promise状态修改为resolved(成功)和rejected(失败)。

6.Promise.catch()方法

①catch()函数只有一个回调函数,意味着如果Promise对象状态为失败就会调用catch()方法并且调用回调

//catch()函数只有一个回调函数,意味着如果Promise对象状态为失败就会调用catch()方法并且调用回调函数

七、总结

1.promise其实就是一个对象或者说是构造函数

2.promise的出现(es6) 就是解决异步编程和回调地狱等问题,async和await的出现(ES8)就是基于promise的一种解决异步编程的终极解决方案(简化代码等等)

3.在前端中,ajax和axios都会用到异步编程,axios更是基于promise的,所以一定要掌握promise以及用async和await搭配promise的使用

async的理解:

. 解释async和await

async是异步的简写,用于声明一个函数是异步执行。await用于等待一个异步方法执行完毕。

await只能用于async函数中


Promise 的特点——无等待,所以在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且不会阻塞后面的语句。

3. await等待

因为 async 函数返回一个 Promise 对象,所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数,但要清楚,它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象,它可以等任意表达式的结果,所以,await 后面实际是可以接普通函数调用或者直接量的。


我是直接变量 我是promise对象

4.await到底能干啥

await 等到了它要等的东西,一个 Promise 对象,或者其它值,然后呢?await 是个运算符,用于组成表达式,await 表达式的运算结果取决于它等的东西。

如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。如果它等到的是一个 Promise 对象,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。

        使用await计算和,最终的输出结果为80,也就是说await等待函数执行完毕才会继续往下走。


  在回调函数中使用await,回调函数必须使用async才可否则会报错

es6出现解决了什么问题:


异步编程

ES6 前异步编程的解决方式:

回调函数

事件监听

发布/订阅

自定义promise

Promise

ES6提供了原生的Promise对象,统一了用法和标准。

对象的状态不受外界影响。能够方便地获取异步操作的状态、赋予对应操作。

一旦状态改变,就不会再变,任何时候都可以得到这个结果。

缺点

无法取消Promise,一旦新建它就会立即执行,无法中途取消。

如果不设置回调函数,或在catch中再次抛出错误。Promise内部抛出的错误,不会反应到外部。

当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Generator

Generator 函数形式上与普通函数无异,特征有二

function关键字与函数名之间有一个星号;

函数体内部使用yield表达式,来表明函数执行的状态。

意义:

可以交出函数的执行权(即暂停执行)

函数体内外的数据交换

可以在 Generator 函数运行的不同阶段,调整函数行为。包括从外部向内部注入不同的值,控制返回和抛出错误。

async

(ES2017 标准引入)

从理解上来说,async函数相当于把Generator 函数的星号(*)替换成async,将yield替换成await。

但相比较generate而言,内置执行器,有更易于理解的语义。

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。async函数内部return语句返回的值,会成为then方法回调函数的参数。

当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

减少全局变量和方法

比如,ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面。 逐步减少全局性方法,使得语言逐步模块化。

代码作用域

变量的声明方式

增加let,const的变量声明方式,不存在变量提升,不允许重复声明,使语言使用更加严谨。

块级作用域

使得变量的作用域更利于管理,也使得立即执行函数表达式不再必要了。

箭头函数

让this绑定定义时所在的作用域,而不是指向运行时所在的作用域,也使得表达更加简洁。

语法糖

ES6推出了模版字符串,使得多行字符串及夹杂变量的字符串写起来更加方便。

对象增加属性名表达式与简洁表示法。

增加遍历器机制,为各种不同的数据结构提供统一的访问机制。

增加解构的语法,取值更直观方便。

增加class关键字来定义类,过去,生成实例对象的传统方法是通过构造函数。不再和传统面向对象语言有大的差异。且支持extends。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • 1、es5和es6的区别,说一下你所知道的es6ECMAScript5,即ES5,是ECMAScript的第五次修...
    猴逃逃阅读 5,175评论 0 1
  • . 前端面试题 let 与 var 的区别? let 1.有局部作用域 var 1.声明提前 。2...
    天天下雨阅读 178评论 0 0
  • let 和 const 循环语句中,每次循环都会创建一个新的代码块作用域 var a = [];for (let ...
    _于曼丽_阅读 192评论 0 0
  • 1.箭头函数有哪些特性1、箭头函数是匿名函数,不绑定自己的this,arguments,super,new.tar...
    猴逃逃阅读 197评论 0 0
  • 前言 针对面试的 JavaScript 知识点整理 1.介绍一下js的数据类型有哪些,值是如何存储的 JavaSc...
    Moon_f3e1阅读 227评论 0 0