stefanzan分享 http://blog.sciencenet.cn/u/stefanzan

博文

聊聊ES7与ES8特性

已有 2167 次阅读 2017-8-28 14:19 |系统分类:博客资讯| es7, es8

译者按: 转眼ES6发布2年了,是时候了解一下ES7ES8特性了!

为了保证可读性,本文采用意译而非直译,并且对源代码进行了大量修改。另外,本文版权归原作者所有,翻译仅用于学习。

我曾写过一篇关于ES6博客《10个最佳ES6特性》,这次我打算聊聊ES7ES8特性。

ES7只有2个特性:

ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性:

Array.prototype.includes()不使用ES7

使用indexOf()验证数组中是否存在某个元素,这时需要根据返回值是否为-1来判断:

let arr = ['react', 'angular', 'vue'];
if (arr.indexOf('react') !== -1)
{
console.log('React存在');
}

使用ES7

使用includes()验证数组中是否存在某个元素,这样更加直观简单:

let arr = ['react', 'angular', 'vue'];
if (arr.includes('react'))
{
console.log('React存在');
}

指数操作符不使用ES7

使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算:

functioncalculateExponent(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

使用指数运算符**,就像+-等操作符一样:

console.log(7**3);

Object.values()不使用ES8

使用Object.keys()遍历对象的属性值,需要通过属性名key去获取属性值:

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.keys(obj).forEach((key) =>
{
console.log(obj[key]); // 输出1, 2, 3
});

Object.entries()不使用ES8

使用Object.keys()遍历对象的属性名和属性值:

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

使用Object.entries()遍历对象的属性名和属性值:

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()不使用ES8

console.log('0.00')        
console.log('10,000.00')    
console.log('250,000.00')

输出结果如下:

0.00
10,000.00
250,000.00

使用ES8

使用padStart()可以在字符串前面填充指定的字符串:

console.log('0.00'.padStart(20))        
console.log('10,000.00'.padStart(20))    
console.log('250,000.00'.padStart(20))

输出结果如下:

     0.00
10,000.00
250,000.00

padEnd()不使用ES8

console.log('0.00 ' + '0.00' )        
console.log('10,000.00 ' + '10,000.00' )    
console.log('250,000.00 ' + '250,000.00')

输出如下:

0.000.00
10,000.0010,000.00
250,000.00250,000.00

使用ES8

使用padEnd()可以在字符串后面填充指定的字符串:

console.log('0.00'.padEnd(20) + '0.00' )        
console.log('10,000.00'.padEnd(20) + '10,000.00' )    
console.log('250,000.00'.padEnd(20) + '250,000.00')

输出如下:

0.00                0.00
10,000.00           10,000.00
250,000.00          250,000.00

Object.getOwnPropertyDescriptors()

azatsBooks对象的定义如下:

let azatsBooks = {
   books: ['React Quickly'],
   get latest()
   {
let numberOfBooks = this.books.length;
if (numberOfBooks == 0) returnundefined;
returnthis.books[numberOfBooks - 1];
   }
};

不使用ES8

使用Object.getOwnPropertyDescriptor()获取单个属性的属性描述符。

获取azatsBooks对象的books属性的属性描述符:

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));
/** 输出books属性的属性描述
[object Object] {
 configurable: true,
 enumerable: true,
 value: ["React Quickly"],
 writable: true
}
**/

获取azatsBooks对象的lastest方法的属性描述符:

console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));
/** 输出lastest方法的属性描述
[object Object] {
 configurable: true,
 enumerable: true,
 get: function get latest() {
   let numberOfBooks = this.books.length
   if (numberOfBooks == 0) return undefined
   return this.books[numberOfBooks - 1]
 },
 set: undefined
}
**/

使用ES8

Object.getOwnPropertyDescriptors()相当于Object.getOwnPropertyDescriptor()的复数形式,可以获取对象的所有自身属性的描述符:

console.log(Object.getOwnPropertyDescriptors(azatsBooks))
/** 输出azatsBooks对象所有自身属性的属性描述
[object Object] {
 books: [object Object] {
   configurable: true,
   enumerable: true,
   value: ["React Quickly"],
   writable: true
 },
 latest: [object Object] {
   configurable: true,
   enumerable: true,
   get: function get latest() {
     let numberOfBooks = this.books.length
     if (numberOfBooks == 0) return undefined
     return this.books[numberOfBooks - 1]
   },
   set: undefined
 }
}
**/

函数参数列表结尾允许逗号不使用ES8

var f = function(a,
 b,
 c,
 d // d之后不能带逗号
) {
console.log(d)
}

使用ES8

var f = function(a,
 b,
 c,
 d, // d之后允许带逗号
) {
console.log(d)
}

允许逗号之后,可以避免一些不必要的报错。(如果你希望实时监控JavaScript应用的错误,欢迎免费使用Fundebug)

Async/Await使用Promise

使用Promise写异步代码,会比较麻烦:

axios.get(`/q?query=${query}`)
   .then(response => response.data)
   .then(data =>
   {
this.props.processfetchedData(data);
   })
   .catch(error =>console.log(error));

使用Async/Await

Async/Await使得异步代码看起来像同步代码,这正是它的魔力所在:

async fetchData(query) =>
{
try
   {
const response = await axios.get(`/q?query=${query}`);
const data = response.data;
return data;
   }
catch (error)
   {
console.log(error)
   }
}
fetchData(query).then(data =>
{
this.props.processfetchedData(data)
})

Async/Await是写异步代码的新方式,以前的方法有回调函数Promise。相比于Promise,它更加简洁,并且处理错误、条件语句、中间值都更加方便,因此有望替代Promise,成为新一代的一步代码编写方式。对细节感兴趣的话,可以查看Fundebug翻译的《Async/Await替代Promise的6个理由》




版权声明:

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2017/08/28/es7-and-es8/




https://blog.sciencenet.cn/blog-811611-1073089.html

上一篇:三问助你Debug
下一篇:你还在等着用户反馈BUG?
收藏 IP: 58.23.11.*| 热度|

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...
扫一扫,分享此博文

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-5-1 09:31

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部