ECMAScript简介
ECMAScript是一个脚本语言规范,通常看作是js的标准规范,但是js其实是ES的扩展语言。
在ES钟,只是提供了最基本的语法,停留在语言层面。而js使用了ES的标准,并且在其基础之上实现了其他的功能。
在浏览器中,js = ES + webApis(BOM,DOM)
在node中,js = ES + nodeApis(fs,net,etc…)
一、ES6(es2015)
es6规范是老生常谈的知识点,所以这里只简单盘点一下。
1、let和const声明变量
2、箭头函数
3、解构赋值
4、参数默认值
5、模板字符串
6、数组方法for of
7、Module模块化
8、数组的(展开/剩余)运算符
9、class类
10、Promise
11、Map和Set对象
12、symbol (第6个基本类型)
13、生成器和迭代器
二、ES7(es2016)
(1)Array.prototype.includes()
检查一个基本类型的值,是否在数组里,返回true或者false。
PS:对NaN的检测有不同之处,在js中 NaN === NaN 的结果是false。indexOf()也是这样处理的,但是includes()不是这样的。
//示例代码
let demo = [1, NaN, 2, 3]
demo.indexOf(NaN) //-1
demo.includes(NaN) //true
语法点评:与indexOf比较类似,假如你只想知道某个值是否在数组中,并不关心它的索引位置,includes比indexOf更好用。
(2)幂运算符
基本用法:
3 ** 2 //9
效果同
Math.pow(3, 2) //9
由于是运算符,所以可以和 += 一样的用法。
var b = 3;
b **= 2;
console.log(b); //9
语法点评:幂运算写起来更简单 。
三、ES8(es2017)
(1)async await
async await被称作异步的终极解决方案。
await必须在async函数内使用,用来暂停代码来等待一个promise实例的成功,并将结果作为表达式值。
实际使用中,可以通过try catch语法捕获错误:
const makeRequest = async () => {
try {
// this parse may fail
const data = JSON.parse(await getJSON());
console.log(data);
}
catch (err) {
//捕获错误
console.log(err);
}
}
语法点评:非常好的一个功能,它完全避免了回调地狱层层嵌套的可能。
(2)Object.values()
返回一个包含该对象所有的可枚举值的数组。(注意:它不包括原型链哦)
Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]
语法点评:在某些场景下可能比较适用。
(3)Object.entries()
将一个对象中可枚举属性的键名和键值按照二维数组的方式返回。若对象是数组,则会将数组的下标作为键值返回。(注意:它不包括原型链哦)
Object.entries({ one: 1, two: 2 }) //[["one", 1], ["two", 2]]
Object.entries([1, 2]) //[["0", 1], ["1", 2]]
语法点评:配合数组解构,遍历对象更方便。
四、ES9(es2018)
(1)对象的(展开/剩余)运算符
展开对象
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { ...obj1, z: 26 };
console.log(obj2) // { a: 1, b: 2, c: 3, z: 26 }
收集剩余参数
var obj = {
a: 1,
b: 2,
c: 3
}
const { a, ...param } = obj;
console.log(a) //1
console.log(param) //{b: 2, c: 3}
(2)Promise.finally()
一个Promise链要么成功进入最后一个then()要么失败触发catch()。而实际中,我们可能需要无论Promise无论成功还是失败,都运行相同的代码。
new Promise((resolve) => {
setTimeout(() => {
resolve("success");
}, 3000);
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
console.log("finally");
});
语法点评:某些数据前后紧密依赖的场景会用到。
(3)异步迭代for await
ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。
在async/await的某些时刻,你可能尝试在同步循环中调用异步函数。例如:
1async function process(array) {
2 for (let i of array) {
3 await doSomething(i);
4 }
5}
这段代码不会正常运行,循环本身依旧保持同步,并在在内部异步函数之前全部调用完成。所以用for await改写:
async function process(array) {
for await (let i of array) {
doSomething(i);
}
}