ES7和ES8

0.前言

timg.jpeg

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万字。。。