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

0

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

阅读:1340 时间:2019年01月08日

ES7小版本新特性**  求幂运算符 Array.prototype.includes  数组成员查找ES8 版本新特性1. Object.values/Object.entries 对象遍历2. String padding 字...

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

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^