ES7与ES8特性

ES7与ES8特性

 

ES7特性

ES7只有2个特性:

• includes()
• 指数操作符

 

ES8特性

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

• Object.values()
• Object.entries()
• padStart()
• padEnd()
• Object.getOwnPropertyDescriptors()
• 函数参数列表结尾允许逗号
• Async/Await

 

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)); // 输出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.values(obj).forEach(value =>
{
    console.log(value); // 输出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()

效果和padStart()类似

 

Object.getOwnPropertyDescriptors()

azatsBooks对象的定义如下：

1.  
2.  

3. let azatsBooks = {

4. books: ['React Quickly'],

5. get latest()

6. {

7. let numberOfBooks = this.books.length;

8. if (numberOfBooks == 0) return undefined;

9. return this.books[numberOfBooks - 1];

10. }

11. };

12.  
13.  

不使用ES8

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

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

1.  
2.  

3. console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'books'));

4.  

5. /** 输出books属性的属性描述

6. [object Object] {

7. configurable: true,

8. enumerable: true,

9. value: ["React Quickly"],

10. writable: true

11. }

12. **/

13.  
14.  

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

1.  
2.  

3. console.log(Object.getOwnPropertyDescriptor(azatsBooks, 'latest'));

4.  

5. /** 输出lastest方法的属性描述

6. [object Object] {

7. configurable: true,

8. enumerable: true,

9. get: function get latest() {

10. let numberOfBooks = this.books.length

11. if (numberOfBooks == 0) return undefined

12. return this.books[numberOfBooks - 1]

13. },

14. set: undefined

15. }

16. **/

17.  
18.  

使用ES8

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

1.  
2.  

3. console.log(Object.getOwnPropertyDescriptors(azatsBooks))

4.  

5. /** 输出azatsBooks对象所有自身属性的属性描述

6. [object Object] {

7. books: [object Object] {

8. configurable: true,

9. enumerable: true,

10. value: ["React Quickly"],

11. writable: true

12. },

13. latest: [object Object] {

14. configurable: true,

15. enumerable: true,

16. get: function get latest() {

17. let numberOfBooks = this.books.length

18. if (numberOfBooks == 0) return undefined

19. return this.books[numberOfBooks - 1]

20. },

21. set: undefined

22. }

23. }

24. **/

25.  
26.  

函数参数列表结尾允许逗号

不使用ES8

1.  
2.  

3. var f = function(a,

4. b,

5. c,

6. d // d之后不能带逗号

7. ) {

8. console.log(d)

9. }

10.  
11.  

使用ES8

1.  
2.  

3. var f = function(a,

4. b,

5. c,

6. d, // d之后允许带逗号

7. ) {

8. console.log(d)

9. }

10.  
11.  

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

Async/Await

使用Promise

使用Promise写异步代码，会比较麻烦：

1.  
2.  

3. axios.get(`/q?query=${query}`)

4. .then(response => response.data)

5. .then(data =>

6. {

7. this.props.processfetchedData(data);

8. })

9. .catch(error => console.log(error));

10.  
11.  

使用Async/Await

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

1.  
2.  

3. async fetchData(query) =>

4. {

5. try

6. {

7. const response = await axios.get(`/q?query=${query}`);

8. const data = response.data;

9. return data;

10. }

11. catch (error)

12. {

13. console.log(error)

14. }

15. }

16.  

17. fetchData(query).then(data =>

18. {

19. this.props.processfetchedData(data)

20. })

21.  
22.  

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