作为一个前端开发者,感觉需要学习的东西贼多,ES6刚学会用没多久,又得学习了解ES7/ES8新增的东西,这里是看了大佬们文章的一点点总结以及摘抄的内容,给自己当笔记使用

内容转载自:https://www.cnblogs.com/zhuanzhuanfe/p/7493433.html#undefined

https://www.cnblogs.com/leungUwah/p/7932912.html  // async和await的用法

ES7新增内容有:Array.prototype.includes()、求幂运算符 (**)、前端异步async()/await()等等

一、Array.prototype.includes()

Array.prototype.includes()即在数组中查找某个元素是否存在,返回值为Boolean,存在返回true,反之为false,如下:

let ary = ['a', 'b', 'c', 1, 2, 3];
ary.prototype.includes(2); // true
ary.prototype.includes('f'); // false

其实Array.prototype.includes()的参数有两个,第一个参数为我们要查找的目标元素,第二个参数则是开始查询的数组索引值(默认为0),如果传入第二个参数,则从此下标值开始查询目标元素。如下:

let ary = ['a', 'b', 'c', 1, 2, 3];
ary.prototype.includes('b'); // true,从下标0开始往后进行查找
ary.prototype.includes(2, 2); // true
ary.prototype.includes('b', 2); // false

Array.prototype.includes()跟JavaScript的indexOf()比较相似,但是他们之间也是有些许区别

共同点:(1)比如都是通过索引值逐个去查询目标元素;(2)都是使用全等符(===)进行判断

不同点:(1)indexOf()返回的是目标元素在数组中的位置(如果找不到则返回 -1),Array.prototype.includes()则是判断目标元素在该数组中是否存在;

(2)Array.prototype.includes()可以对NaN进行判断,因为在Array.prototype.includes()中,它认为NaN === NaN是成立的,故返回值为true;但是在indexOf()中,NaN !== NaN,所以如果使用indexOf()寻找数组中的值为NaN元素无法找到,返回值为-1

适用场景:(1)如果只是判断目标元素是否存在于数组中,则优先使用Array.prototype.includes();如果需要知道目标元素在数组中的位置,则使用indexOf()

(2)如果需要判断数组中值为NaN的元素,只能使用Array.prototype.includes();

二、幂运算符(**)

JavaScript中,幂运算一般都是使用Math.pow(m, n),表示m的n次方,如下:

Math.pow(3, 2); // 即3的2次方等于9

在ES7中,可以使用幂运算符**进行幂运算,如下:

let a = 3;
a **== 2 // 9,即 a = a**2, 此时a等于3的2次方,即为9了

三、前端异步async()/await()

什么是async、await?

async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。并且await只能在async函数中使用

通常async、await都是跟随Promise一起使用的。为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么);

await得到Promise对象之后就等待Promise接下来的resolve或者reject。

来看一段简单的代码:

async function testSync() {
const response = await new Promise(resolve => {
setTimeout(() => {
resolve("async await test...");
}, 1000);
});
console.log(response);
}
testSync();//async await test...

就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的,也更容易让人理解。

async、await的串行、并行处理

串行:即等待前一个await执行完成后执行另一个await,

借用大佬的代码:

async function asyncAwaitFn(str) {
return await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str)
}, 1000);
})
} const serialFn = async () => { //串行执行 console.time('serialFn')
console.log(await asyncAwaitFn('string 1'));
console.log(await asyncAwaitFn('string 2'));
console.timeEnd('serialFn')
} serialFn();

这里可以看到串行执行完毕耗时2秒多了。

并行:即先执行多个async方法,然后再运行await操作,代码如下:

async function asyncAwaitFn(str) {
return await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str)
}, 1000);
})
}
const parallel = async () => { //并行执行
console.time('parallel')
const parallelOne = asyncAwaitFn('string 1');
const parallelTwo = asyncAwaitFn('string 2') //直接打印
console.log(await parallelOne)
console.log(await parallelTwo) console.timeEnd('parallel') }
parallel()

可以看到并行执行结束总共耗时1秒多,比串行快了很多

async、await的错误处理

JavaScript异步请求肯定会有请求失败的情况,上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。

在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

async function catchErr() {
try {
const errRes = await new Promise((resolve, reject) => {
setTimeout(() => {
reject("http error...");
}, 1000);
);
//平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
// console.log(errRes.status, errRes.statusText);
} catch(err) {
console.log(err);
}
}
catchErr(); //http error...

其实使用async、await的主要目的是为了使原始Promise的then处理的整个异步请求代码变得更加简洁清爽。

ES7/ES8 语法学习的更多相关文章

  1. 细解JavaScript ES7 ES8 ES9 新特性

    题记:本文提供了一个在线PPT版本,方便您浏览 细解JAVASCRIPT ES7 ES8 ES9 新特性 在线PPT ver 本文的大部分内容译自作者Axel Rauschmayer博士的网站,想了解 ...

  2. Golang 语法学习笔记

    Golang 语法学习笔记 包.变量和函数. 包 每个 Go 程序都是由包组成的. 程序运行的入口是包 main. 包名与导入路径的最后一个目录一致."math/rand" 包由 ...

  3. Swift高级语法学习总结(转)

    Swift高级语法学习总结 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如果有参数和返回值直接写在两个括号里就可以了 1.2 参 ...

  4. Swift基础语法学习总结(转)

    Swift基础语法学习总结 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...

  5. Swift高级语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如 ...

  6. Swift基础语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...

  7. Robot Framework语法学习(一)

    Robot Framework语法学习: 一.变量的声明.赋值与使用 1.变量标识符:每个变量都可以用  变量标识符 ${变量名} 来表示. 2.变量声明:可以在TestSuite上点右键或者在Edi ...

  8. MarkDown语法 学习笔记 效果源码对照

    MarkDown基本语法学习笔记 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 下面将对Markdown的基本使用做一个介绍 目 ...

  9. 毕业设计 之 五 PHP语法学习笔记

    毕业设计 之 四 PHP语法学习笔记 作者:20135216 平台:windows10 软件:XAMPP,DreamWeaver 说明:该笔记是对网站编程语言的详细学习 一.PHP基础 0. 关于环境 ...

随机推荐

  1. js事件处理程序详解,html事件处理程序,dom0级事件处理程序,dom2级事件处理程序

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/24/js%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e ...

  2. spring security 学习三-rememberMe

    功能:登录时的“记住我”功能 原理: rememberMeAuthenticationFilter在security过滤器链中的位置,在请求走认证流程是,当前边的filter都不通过时,会走remem ...

  3. PHP中unset和null的比较

    起因 因为感兴趣于unset($var)和$var=null的区别,于是找了一个stackoverflow高分问题及答案,翻译以供参考. 注:以下的问题和答案翻译自http://stackoverfl ...

  4. androidstudio 2.3.3 jni过程汇总(2):2、使用so文件

    2.使用so文件 1.在java文件中System.loadLibrary加载包,并且引入native方法. 2.在app/src/main/下新建jniLibs文件夹,将so包带arm文件夹形式导入 ...

  5. Java创建线程后,调用start()方法和run()的区别

    1) start方法: 用start方法来启动线程,真正实现了多线程运行,这时无需等待run方法体代码执行完毕而直接继续执行下面的代码.通过调用Thread类的start()方法来启动一个线程,这时此 ...

  6. Sublime Text添加gcc编译器

    { "shell_cmd" : "gcc $file_name -o ${file_base_name}", "working_dir" : ...

  7. 特种设备TSG 认证流程

    特种设备许可,也叫安全注册(原为AZ安全注册认可),现为TS.国家为了防止和减少事故,保障人民群众生命和财产安全,促进经济发展而强制实施的安全监察.它的作用相当于欧盟的“CE”认证,但比“CE”认证更 ...

  8. Dart编程实例 - 类型测试操作符is

    Dart编程实例 - 类型测试操作符is void main() { int n = 2; print(n is int); } 本文转自:http://codingdict.com/article/ ...

  9. C存储类

    C 存储类 存储类定义 C 程序中变量/函数的范围(可见性)和生命周期.这些说明符放置在它们所修饰的类型之前.下面列出 C 程序中可用的存储类: auto register static extern ...

  10. (转载)js引擎的执行过程(二)

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...