es7,8 临门一脚。
ES7
1.Array.prototype.includes()
includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false.
1.基本用法:
['a', 'b', 'c'].includes('a') // true
['a', 'b', 'c'].includes('d') // false
2.接收俩个参数:要搜索的值和搜索的开始索引
['a', 'b', 'c', 'd'].includes('b') // true
['a', 'b', 'c', 'd'].includes('b', 1) // true
['a', 'b', 'c', 'd'].includes('b', 2) // false
3.与ES6中的indexOf()
比较
有些时候是等效的
['a', 'b', 'c'].includes('a') //true
['a', 'b', 'c'].indexOf('a') > -1 //true
var arr = [1, 2, 3]
var a = 1;
arr.includes(a) //true
arr.indexOf(a) //0
- 在判断 +0 与 -0 时,被认为是相同的。
[1, +0, 3, 4].includes(-0) //true
[1, +0, 3, 4].indexOf(-0) //1
- 只能判断简单类型的数据,对于复杂类型的数据,比如对象类型的数组,二维数组,这些,是无法判断的.
var arr = [1, [2, 3], 4]
arr.includes([2, 3]) //false
arr.indexOf([2, 3]) //-1
优缺点比较
- 简便性
includes()
返回的是布尔值,能直接判断数组中存不存在这个值,而indexOf()
返回的是索引,这一点上前者更加方便。
精确性
两者都是采用
===
的操作符来作比较的,不同之处在于:对于NaN
的处理结果不同。我们知道js中
NaN === NaN
的结果是false,indexOf()
也是这样处理的,但是includes()
不是这样的。let demo = [1, NaN, 2, 3] demo.indexOf(NaN) //-1
demo.includes(NaN) //true
总结:
由于它对NaN的处理方式与indexOf不同,假如你只想知道某个值是否在数组中而并不关心它的索引位置,建议使用includes()。如果你想获取一个值在数组中的位置,那么你只能使用indexOf方法。
2.求幂运算符
基本用法:
3 ** 2 //9
效果同
Math.pow(3, 2) //9
由于是运算符,所以可以和 +=
一样的用法
var b = 3;
b **= 2;
console.log(b); //9
ES8
1.async await
异步函数async function()
1.1作用
避免有更多的请求操作,出现多重嵌套,也就是俗称的“回调地狱”
this.$http.jsonp('/login', (res) => {
this.$http.jsonp('/getInfo', (info) => {
// do something
})
})
因此提出了ES6的Promise,将回调函数的嵌套,改为了链式调用:
var promise = new Promise((resolve, reject) => {
this.login(resolve);
})
.then(() => {
this.getInfo()
})
.catch(() => {
console.log('Error')
})
1.2声明方式
异步函数存在以下四种使用形式:
- 函数声明:
async function foo() {}
- 函数表达式:
const foo = async function() {}
- 对象的方式:
let obj = { async foo() {} }
- 箭头函数:
const foo = async () => {}
1.3支持返回Promise和同步的值
async用于定义一个异步函数,该函数返回一个Promise。
如果async函数返回的是一个同步的值,这个值将被包装成一个理解resolve的Promise,等同于return Promise.resolve(value)
。
await用于一个异步操作之前,表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。
//async await
//返回Promise
let timer = async function timer() {
return new Promise((reslove, reject) => {
setTimeout(() => {
reslove('a');
}, 1000);
})
}
timer().then(result => {
console.log(result);
}).catch(err => {
console.log(err.message);
})
//返回同步的值
let sayHello = async function sayHello() {
let hi = 'hello world'//等同于return Promise.resolve(hi);
return hi
}
sayHello().then(res => {
console.log(res)
}).catch(err => {
console.log(err.message);
})
1.4对异常的处理
首先来看下
Promise
中对异常的处理
1.使用reject
let promise = new Promise((reslove, reject) => {
setTimeout(() => {
reject('promise使用reject抛出异常')
}, 1000)
})
promise().then(res => {
console.log(res)
})
.catch(err => {
console.log(err) //'promise使用reject抛出异常'
})
2.使用new Error()
let promise = new Promise((reslove, reject) => {
throw new Error('promise使用Error抛出异常') //使用throw异常不支持放在定时器中
})
promise().then(res => {
console.log(res)
})
.catch(err => {
console.log(err.message) //'promise使用Error抛出异常'
})
3.reject
一个new Error()
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('promise抛出异常'));
}, 1000);
})
promise.then(res => {
console.log(res);
})
.catch(err => {
console.log(err.message); //'promise抛出异常'
})
async
对异常的处理也可以直接用.catch()
捕捉到
//async抛出异常
let sayHi = async sayHi => {
throw new Error('async抛出异常');
}
sayHi().then(res => {
console.log(res);
})
.catch(err => {
console.log(err.message);
})
和Promise链的对比:
我们的async函数中可以包含多个异步操作,其异常和Promise链有相同之处,如果有一个Promise被reject()那么后面的将不会再进行。
let count = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('promise故意抛出异常')
}, 1000);
})
}
let list = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([1, 2, 3])
}, 1000);
})
}
let getList = async () => {
let c = await count()
console.log('async') //此段代码并没有执行
let l = await list()
return { count: c, list: l }
}
console.time('start');
getList().then(res => {
console.log(res)
})
.catch(err => {
console.timeEnd('start')
console.log(err)
})
//start: 1000.81494140625ms
//promise故意抛出异常
可以看到上面的案例,async
捕获到了一个错误之后就会立马进入.catch()
中,不执行之后的代码
1.5并行
上面的案例中,async采用的是串行处理
count()和list()是有先后顺序的
let c = await count()
let l = await list()
实际用法中,若是请求的两个异步操作没有关联和先后顺序性可以采用下面的做法
let res = await Promise.all([count(), list()])
return res
//res的结果为
//[ 100, [ 1, 2, 3 ] ]
案例详情为:
let count = ()=>{
return new Promise((resolve,reject) => {
setTimeout(()=>{
resolve(100);
},500);
});
}
let list = ()=>{
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve([1,2,3]);
},500);
});
}
let getList = async ()=>{
let result = await Promise.all([count(),list()]);
return result;
}
console.time('begin');
getList().then(result => {
console.timeEnd('begin'); //begin: 505.557ms
console.log(result); //[ 100, [ 1, 2, 3 ] ]
}).catch(err => {
console.timeEnd('begin');
console.log(err);
});
我们将count()和list()使用Promise.all()“同时”执行,这里count()和list()可以看作是“并行”执行的,所耗时间将是两个异步操作中耗时最长的耗时。
最后得到的结果是两个操作的结果组成的数组。我们只需要按照顺序取出数组中的值即可。
1.6与Generator的关系
先来回顾一下ES6中Generator
函数的用法:
function* getList() {
const c = yield count()
const l = yield list()
return 'end'
}
var gl = getList()
console.log(gl.next()) // {value: Promise, done: false}
console.log(gl.next()) // {value: Promise, done: false}
console.log(gl.next()) // {value: 'end', done: true}
虽然Generator将异步操作表示得很简洁,但是流程管理却不方便(即何时执行第一阶段、何时执行第二阶段)。此时,我们便希望能出现一种能自动执行Generator函数的方法。我们的主角来了:async/await。
ES8引入了async函数,使得异步操作变得更加方便。简单说来,它就是Generator函数的语法糖。
let getList = async () => {
const c = await count()
const l = await list()
}
es7,8 临门一脚。的更多相关文章
- 蚂蚁金服寒泉子:JVM源码分析之临门一脚的OutOfMemoryError完全解读
➠更多技术干货请戳:听云博客 概述 OutOfMemoryError,说的是java.lang.OutOfMemoryError,是JDK里自带的异常,顾名思义,说的就是内存溢出,当我们的系统内存严重 ...
- JVM源码分析之临门一脚的OutOfMemoryError完全解读
概述 OutOfMemoryError,说的是java.lang.OutOfMemoryError,是JDK里自带的异常,顾名思义,说的就是内存溢出,当我们的系统内存严重不足的时候就会抛出这个异常(P ...
- Linux下安装pip(遇到了python2.6升级为python2.7道路上的坑,原因已经找到,只差临门一脚了,以后补上)
1.先说一下什么是pippip 是“A tool for installing and managing Python packages.”,也就是说pip是python的软件安装工具2.下面介绍怎么 ...
- [Java 8] (10) 使用Lambda完成函数组合,Map-Reduce以及并行化
好文推荐!!!!! 原文见:http://blog.csdn.net/dm_vincent/article/details/40856569 Java 8中同时存在面向对象编程(OOP)和函数式编程( ...
- 用scikit-learn和pandas学习线性回归
对于想深入了解线性回归的童鞋,这里给出一个完整的例子,详细学完这个例子,对用scikit-learn来运行线性回归,评估模型不会有什么问题了. 1. 获取数据,定义问题 没有数据,当然没法研究机器学习 ...
- “三巨头”有变化,BAT还能走多久?
在腾讯市值超越阿里巴巴后,市场分析多数认为,当年的BAT“三巨头”时代已经彻底结束,进入了“双寡头”时代了 从对外投资来看,BAT不同的投资逻辑可以推测其战略方向 撰文/梁云风 时评员,关注财经与互联 ...
- sentence patterns
第四部分 推理题 1.世界上每个角落的每个人都有立场,都有背景,都有推理性,能推理出一个人语言的真意,才成就了真正的推理能力: 2.换言之,如果你能通过一个人的说话推理出其身份职业,你的推理能 ...
- iOS App 研发的最后冲刺:内测与部署
当开发者历经磨难.披荆斩棘,完成了一个iOS项目后,最后的临门一脚就是应用的内测.部署.那么,在这最后的射门动作中,都有哪些地方需要开发者注意?有哪些方式能够更好地帮助我们进行iOS应用的发布部署? ...
- ExtJS MVC学习手记 2
开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...
随机推荐
- MySQL之唯一索引、外键的变种、SQL语句数据行操作补充
0.唯一索引 unique对num进行唯一限制,表示num是独一无二的,uql是唯一索引名称 上面为联合索引:num和xx不能完全一样 1.外键的变种 a. 用户表和部门表 用户: 1 alex 1 ...
- 10w+QPS 的 Redis 真的只是因为单线程和内存?360° 深入底层设计为你揭开 Redis 神秘面纱!
原文链接:10w+QPS 的 Redis 真的只是因为单线程和内存?360° 深入底层设计为你揭开 Redis 神秘面纱! 你以为 Redis 这么快仅仅因为单线程和基于内存? 那么你想得太少了,我个 ...
- thinkphp5--多文件入口设置
来源:http://www.cnblogs.com/walblog/p/8035426.html 今天在用tp5做项目的时候发现,前台是可以绑定默认到index模块的,但是后台不好弄,于是查了一下手册 ...
- 2019-2020-1 20199308《Linux内核原理与分析》第七周作业
<Linux内核分析> 第六章 进程的描述和进程的创建 6.1 进程的描述 操作系统内核实现操作系统的三大管理功能: 进程管理(进程)-核心 内存管理(虚拟内存) 文件系统(文件) 为了管 ...
- redis部署与卸载
1.先到Redis官网(redis.io)下载redis安装包 cd /tmp wget http://download.redis.io/releases/redis-4.0.10.tar.gz 2 ...
- QT QLabel内容太长时候使用省略号
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xiezhongyuan07/articl ...
- 自建Git服务器 - 创建属于你自己的代码仓库
最近有线上朋友私信问我怎么搭建个人博客,也有咨询我个人项目的代码是如何保管的,还有一个朋友问我买了服务器玩了一段时间,等新鲜感过了就不知道做什么了. 关于这些问题并没有一个标准答案,每个人都有自己的使 ...
- 8.Python中装饰器是什么?
Python中装饰器是什么? A Python decorator is a specific change that we make in Python syntax to alter functi ...
- 截取nginx日志
截取nginx日志 sed -n '/24\/Feb\/2017:11:00:00/,/24\/Feb\/2017:12:00:00/p' yunying_api.wanglibao.com.acce ...
- 算法竞赛进阶指南--在单调递增序列a中查找小于等于x的数中最大的一个(即x或x的前驱)
在单调递增序列a中查找<=x的数中最大的一个(即x或x的前驱) while (l < r) { int mid = (l + r + 1) / 2; if (a[mid] <= x) ...