ES7与ES8特性

朴灿烈づ我的快乐病毒、 2022-06-01 23:54 186阅读 0赞

我曾写过一篇关于ES6博客[《10个最佳ES6特性》][10_ES6]，这次我打算聊聊ES7和ES8特性。

ES7只有2个特性:

*  [includes()][includes]
 *  指数操作符

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

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

### Array.prototype.includes() ###

#### 不使用ES7 ####

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

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

#### 使用ES7 ####

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

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

### 指数操作符 ###

#### 不使用ES7 ####

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

#### 使用ES7 ####

使用指数运算符\*\*，就像+、-等操作符一样：

console.log(7**3);

### Object.values() ###

#### 不使用ES8 ####

使用[Object.keys()][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()][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()][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()][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()][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()][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()][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.getOwnPropertyDescriptors]相当于[Object.getOwnPropertyDescriptor()][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][Fundebug 1]翻译的[《Async/Await替代Promise的6个理由》][Async_Await_Promise_6]。

[10_ES6]: https://link.juejin.im/?target=https%3A%2F%2Fblog.fundebug.com%2F2017%2F08%2F21%2F10-best-es6-feature%2F
[includes]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray%2Fincludes
[Object.values]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2Fvalues
[Object.entries]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2Fentries
[padStart]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FString%2FpadStart
[padEnd]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FString%2FpadEnd
[Object.getOwnPropertyDescriptors]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2FgetOwnPropertyDescriptors
[indexOf]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray%2FindexOf
[Math.pow]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FMath%2Fpow
[Object.keys]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2Fkeys
[Object.getOwnPropertyDescriptor]: https://link.juejin.im/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FObject%2FgetOwnPropertyDescriptor
[Fundebug]: https://link.juejin.im/?target=https%3A%2F%2Ffundebug.com%2F
[Fundebug 1]: https://juejin.im/entry/5a329bf3f265da430a509c55
[Async_Await_Promise_6]: https://link.juejin.im/?target=https%3A%2F%2Fblog.fundebug.com%2F2017%2F04%2F04%2Fnodejs-async-await%2F