es8 --- 新特性

Posted yuerdong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es8 --- 新特性相关的知识,希望对你有一定的参考价值。

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

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

不使用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));
 
/** 输出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个理由》

以上是关于es8 --- 新特性的主要内容,如果未能解决你的问题,请参考以下文章

es8 --- 新特性

深入理解ES8的新特性SharedArrayBuffer

ES7与ES8新特性

ES7及ES8新特性

ES7及ES8新特性

ES8新特性