0.前言
ECMAScript(以下简称ES)早已广泛应用在我们的工作当中，所以了解了解还是有必要的，我在这里记录一下es7,和es8的一些用法。
1.简介
ES7 是 ECMA-262 标准第 7 版的简称，从 ES6 开始每年发布一个版本，以年份作为名称，因此又称 ECMAScript 2016，简称 ES2016。
ES8 是 ECMA-262 标准第 8 版的简称，从 ES6 开始每年发布一个版本，以年份作为名称，因此又称 ECMAScript 2017，简称 ES2017。
ES7只有2个特性:
- includes()
- 指数操作符
**
ES8只有2个特性:
- Object.values()
- Object.entries()
- padStart()
- padEnd()
- Object.getOwnPropertyDescriptors()
- Trailing commas in function (函数参数列表结尾允许逗号)
- Async/Await
2.代码
Array.prototype.includes
Array.prototype.includes 就是替代indexOf的方法，用来检查数组中是否存在值
js代码
let arr = ['react', 'angular', 'vue']
if (arr.indexOf('react') !== -1) {
console.log('Can use React')
}
ES7代码
let str = 'React Quickly'
// Correct
if (str.toLowerCase().includes('react')) { // true
console.log('Found "react"')
}
除了增强了可读性语义化，实际上给开发者返回布尔值，而不是匹配的位置。includes也可以在NaN(非数字)使用。最后 ，includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。
例子:
console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)
指数操作符
使用自定义递归和Math.pow()进行指数运算
js代码
function calculateExponent(base, exponent){
if (exponent === 1){
return base;
} else {
return base * calculateExponent(base, exponent - 1);
}
}
console.log(calculateExponent(7, 3)); // 输出343
console.log(Math.pow(7, 3)); // 输出343
ES7代码
let a = 7 ** 3
console.log(a); // 输出343
Object.values()
使用Object.keys()遍历对象的属性值，需要通过属性名key去获取属性值
js代码
let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) =>{
console.log(obj[key]); // 输出1, 2, 3
});
ES8
使用Object.values()遍历对象的属性值，无需使用属性名：
let obj = {a: 1, b: 2, c: 3}
Object.values(obj).forEach(() =>{
console.log(obj); // 输出1, 2, 3
});
Object.entries()
遍历对象的属性名和属性值：
js代码
let obj = {a: 1, b: 2, c: 3};
Object.keys(obj).forEach((key) => {
console.log(key + ": " + obj[key]); // 输出a: 1, b: 2, c: 3
})
ES8
let obj = {a: 1, b: 2, c: 3};
Object.entries(obj).forEach(([key, value]) =>{
console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
})
字符填充函数padStart 和 padEnd
用于在字符串开头或结尾添加填充字符串
String.prototype.padStart( maxLength [ , fillString ] )
String.prototype.padEnd( maxLength [ , fillString ] )
其中第一个参数是目标长度；第二个参数是填充字符串，默认是空格。示例：
'es8'.padStart(2); // 'es8'
'es8'.padStart(5); // ' es8'
'es8'.padStart(6, 'woof'); // 'wooes8'
'es8'.padStart(14, 'wow'); // 'wowwowwowwoes8'
'es8'.padStart(7, '0'); // '0000es8'
'es8'.padEnd(2); // 'es8'
'es8'.padEnd(5); // 'es8 '
'es8'.padEnd(6, 'woof'); // 'es8woo'
'es8'.padEnd(14, 'wow'); // 'es8wowwowwowwo'
'es8'.padEnd(7, '6'); // 'es86666'
典型的应用场景
使用 padStart 进行时间格式化。
'8:00'.padStart(5, '0'); // '08:00'
'18:00'.padStart(5, '0'); // '18:00'
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
Object.getOwnPropertyDescriptor()
静态方法 Object.getOwnPropertyDescriptors 用于获取对象的属性描述符，该属性必须是对象自己定义而不是继承自原型链。结果中包含的键可能有 configurable、enumerable、writable、get、set 以及 value。
const obj = { es8: 'hello es8' };
Object.getOwnPropertyDescriptor(obj, 'es8');
// {
// configurable: true,
// enumerable: true,
// value: "hello es8"
// writable: true
// }
Trailing commas in function (函数参数列表结尾允许逗号)
function es8(var1, var2, var3,) {
// do something
}
es8(10, 20, 30,);
请问上述例子函数内部的
arguments.length是 3 还是 4 ？哈哈
Async/Await
Async/Await应该是目前最简单的异步方案
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})
};
var start = async function () {
// 在这里使用起来就像同步代码那样直观
console.log('start');
await sleep(3000);
console.log('end');
};
start(); // 控制台先输出start，稍等3秒后，输出了end。
基本规则
async 表示这是一个async函数，await只能用在这个函数里面。
await 表示在这里等待promise返回结果了，再继续执行。
await 后面跟着的应该是一个promise对象
获得返回值
await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 返回 ‘ok’
resolve('ok');
}, time);
})
};
var start = async function () {
let result = await sleep(3000);
console.log(result); // 收到 ‘ok’
};
捕捉错误
既然.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。
var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 模拟出错了，返回 ‘error’
reject('error');
}, time);
})
};
var start = async function () {
try {
console.log('start');
await sleep(3000); // 这里得到了一个返回错误
// 所以以下代码不会被执行了
console.log('end');
} catch (err) {
console.log(err); // 这里捕捉到错误 `error`
}
};
Async/Await是写异步代码的新方式，以前的方法有回调函数和Promise。相比于Promise，它更加简洁，并且处理错误、条件语句、中间值，使用更加方便。
3.结束语
此处省略5万字。。。