译者按:
转眼
ES6
发布2年了，是时候了解一下
ES7
与
ES8
特性了！
-
原文: ES7 and ES8 Features
-
译者: Fundebug
为了保证可读性，本文采用意译而非直译，并且对源代码进行了大量修改。另外，本文版权归原作者所有，翻译仅用于学习。
我曾写过一篇关于
ES6
博客《10个最佳ES6特性》，这次我打算聊聊
ES7
和
ES8
特性。
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()进行指数运算：
function calculateExponent(base, exponent) { if (exponent === 1) { return base; } else { return base * calculateExponent(base, exponent - 1); } } console.log(calculateExponent(7, 3)); console.log(Math.pow(7, 3));
|
使用ES7
使用指数运算符
**
，就像
+
、
-
等操作符一样：
Object.values()
不使用ES8
使用Object.keys()遍历对象的属性值，需要通过属性名
key
去获取属性值：
let obj = {a: 1, b: 2, c: 3}; Object.keys(obj).forEach((key) => { console.log(obj[key]); });
|
使用ES8
使用Object.values()遍历对象的属性值，无需使用使用属性名：
let obj = {a: 1, b: 2, c: 3} Object.keys(obj).forEach((key) => { console.log(obj[key]); });
|
Object.entries()
不使用ES8
使用Object.keys()遍历对象的属性名和属性值：
let obj = {a: 1, b: 2, c: 3}; Object.keys(obj).forEach((key) => { console.log(key + ": " + obj[key]); })
|
使用ES8
使用Object.entries()遍历对象的属性名和属性值：
let obj = {a: 1, b: 2, c: 3}; Object.entries(obj).forEach(([key, value]
) => { console.log(key + ": " + value); })
|
padStart()
不使用ES8
console.log('0.00') console.log('10,000.00') console.log('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))
|
输出结果如下：
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.00 0.00 10,000.00 10,000.00 250,000.00 250,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) return undefined; return this.books[numberOfBooks - 1]; } };
|
不使用ES8
使用Object.getOwnPropertyDescriptor()获取单个属性的属性描述符。
获取
azatsBooks
对象的
books
属性的属性描述符：
console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));
|
获取
azatsBooks
对象的
lastest
方法的属性描述符：
console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));
|
使用ES8
Object.getOwnPropertyDescriptors()相当于Object.getOwnPropertyDescriptor()的复数形式，可以获取对象的所有自身属性的描述符：
console.log(Object.getOwnPropertyDescriptors(azatsBooks))
|
