ES7 ES8的一些新特性简单了解

ES7小版本新特性

1. **  求幂运算符 

2. Array.prototype.includes  数组成员查找

ES8 版本新特性

1. Object.values/Object.entries 对象遍历

2. String padding 字符串填充

3. Object.getOwnPropertyDescriptors 

4. Trailing commas函数参数列表和调用中的尾逗号

5. Async Functions 异步函数

介绍：

求幂运算符

A ** B  求A的B次方

10 ** 2 ;   // 100

Array.prototype.includes 

数组实例方法，用于查找数组中是否存在成员，返回布尔值

[1,2,3,4].includes(2) ; // true
[1,2,3,4].includes(5) ; //false

ES6 Array.prototype.indexOf方法返回成员所在下标

[1,2,3,4].indexOf(5) // -1

由于-1转为布尔值为true，不便于用做逻辑判断。相比includes更明确的返回布尔值，更方便用于判断逻辑。同样的，includes方法也可以用于字符串的查找

"ccued.com".includes("cc")  // true

Object.values/Object.entries

对象键值的遍历

Object.values 返回对象所有可枚举特定的value数组，Object.keys 返回对象所有可枚举特定的key数组，二者序号对应。

Object.entries返回对象所有可枚举特定的key,value二维数组

const obj = {
    name: 'lenton',
    age: 20
};
Object.values(obj);  // ["lenton", 20]
Object.keys(obj); // ["name", "age"]
Object.entries(obj); // [["name","lenton"],["age",20]]

String.prototype.padStart / padEnd

padStart 在开始部位填充，返回一个给定长度的字符串，如果字符串长度不足，则使用给定的字符串填充到期望的长度。

padEnd 在结束部位填充，返回一个给定长度的字符串，如果字符串长度不足，则使用给定的字符串填充到期望的长度。

这是一对很便捷的方法，无需依赖外部库实现常见的字符串补充操作。

"ccued.com".padStart(15,'*') ; // "******ccued.com"
"ccued.com".padEnd(15,'*') ;  // "ccued.com******"
"ccued".padEnd(21,'-*').padStart(41,'*-') ; // "*-*-*-*-*-*-*-*-*-*-ccued-*-*-*-*-*-*-*-*"

Object.getOwnPropertyDescriptors

返回目标对象中所有属性的属性描述符，该属性必须是对象自己定义的，不能是从原型链继承来的。

[ 未掌握待补充 ]

Trailing commas

尾逗号合法。在函数末位参数，数组末位成员，对象末位特性处，允许添加逗号：

function ccued(arg1, arg2, ) {
    console.log(arg1, arg2);
}

ccued(1, 2) ;
ccued(1, 2,) ;

let arr = [ 1, 2, 3, ] ;

let obj = {
    name: 'lenton',
    age : 20,
} ;

以上末位的逗号均是合法的语法。

Async Functions

async/await 真正的异步杀器，希望早日投产。相比用的最多的callback方式，以及ES6的Promise的繁琐，ES8可以像让异步代码按行执行，简单易读。

先回顾下异步历程：

 callback方式

function getData(params,callback) {
    $.ajax({
        type:"POST",
        url:"",
        data:params,
        success:( res ) => {
            callback(res);
        }
    });
}

getData(params,(res)=>{
    console.log(res);//结果do sth..
});

Promise,将嵌套优化为链式 [了解Promise]

function getData(params) {
    let p = new Promise( (resolve,reject) => {
        $.ajax({
            type:"POST",
            url:"",
            data:params,
            success:( res ) => { 
                relolve(res);
            }
        });
    } );
    return p;
}

getData(params).then((res)=>{
    console.log(res); //do sth..
});

async / await 逐行执行的直观方式 [了解async]

先看实例：

function getNameById(id){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve(id+'name');
		},1000);
	});
}

function getInfoByName(name){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{
			resolve(name+'Info');
		},1000);
	});	
}

async function getAll(id){
	const g1 = await getNameById(id);
	const g2 = await getInfoByName(g1);
	return g2;
}

getAll('10001').then((res)=>{
    console.log('userInfo:'+res); //res即g2
});

假如我们需要先通过Id获取用户名，然后通过用户名获取用户信息，在以前可能要多层嵌套异步请求。而async/await则可以逐行

首先定义接口 getNameById，该方法获取name返回Promise对象

同样，定义getInfoByName，获取信息返回Promise

关键方法 getAll,前面关键字 async function getAll，表示是异步方法，会返回一个Promise对象。

await关键字会等待后续代码返回后再向下执行,顺序为：getNameById完成返回name结果g1,通过g1再请求 getInfoByName获取info，并返回info：g2