ES6的几个新特征

妖狐艹你老母 2022-05-23 10:06 178阅读 0赞

废话少说，还是直接上代码吧。

### 1、参数默认值 ###

以前是这么写的：

var link = function (height, color, url) {
        
        var height = height || 50
        var color = color || 'red'
        var url = url || 'http://azat.co'
        ...
    }

很显然以前的写法有点技巧性，现在则可以这么写：

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
      ...
    }

很显然跟我们熟悉的C++写法一样了。

### 2、模板面值 ###

以前跟Java的写法很像：

var name = 'Your name is ' + first + ' ' + last + '.'
    var url = 'http://localhost:3000/api/messages/' + id

现在：

var name = `Your name is ${
        first} ${
        last}.`
    var url = `http://localhost:3000/api/messages/${
        id}`

注意单引号变成了\`，里面的值要用`${}`包起来。

### 3、字符串多行时的情况 ###

以前用+解决：

var roadPoem = 'Then took the other, as just as fair,\n\t'
        + 'And having perhaps the better claim\n\t'
        + 'Because it was grassy and wanted wear,\n\t'
        + 'Though as for that the passing there\n\t'
        + 'Had worn them really about the same,\n\t'
    
    var fourAgreements = 'You have the right to be you.\n\
        You can only be you when you do your best.'

现在用逗号解决：

var roadPoem = `Then took the other, as just as fair,
        And having perhaps the better claim
        Because it was grassy and wanted wear,
        Though as for that the passing there
        Had worn them really about the same,`
    
    var fourAgreements = `You have the right to be you.
        You can only be you when you do your best.`

注意外面还是用“\`”。

### 4、分解赋值 ###

以前吧就得分开赋值：

var jsonMiddleware = require('body-parser').json
    
    var body = req.body, // body has username and password
    var username = body.username,
    var password = body.password

现在用不着了，它自己可以找到对应的值：

var {house, mouse} = $('body').data() // we'll get house and mouse variables
    var {json: jsonMiddleware} = require('body-parser')
    var {username, password} = req.body

### 5、箭头函数 ###

以前的：

var _this = this
    $('.btn').click(function(event){
        
      _this.sendData()
    })

现在的：

$('.btn').click((event) =>{
      this.sendData()
    })

这里多看一个例子，以前函数返回必须用return关键字，现在如果条件允许的话就可以不用return了：

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
    var messages = ids.map(function (value, index, list) {
        
      return 'ID of ' + index + ' element is ' + value + ' ' // explicit return
    })

现在有了箭头函数以后是这样的：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
    var messages = ids.map((value, index, list) => `ID of ${index} element is ${
       value} `) // implicit return

### 6、Promise ###

下面这个函数很熟悉：

setTimeout(function(){
        
      console.log('Yay!')
    }, 1000)

很显然是异步延迟的嘛，那么现在用promise怎么写呢？

var wait1000 =  new Promise(function(resolve, reject) {
        
      setTimeout(resolve, 1000)
    }).then(function() {
        
      console.log('Yay!')
    })

如果再改为箭头函数的话：

var wait1000 =  new Promise((resolve, reject)=> {
      setTimeout(resolve, 1000)
    }).then(()=> {
      console.log('Yay!')
    })

### let与var的作用范围 ###

我们知道var一般写在变量前面，但是这个var所控制变量的生命周期着实让初学者头疼，因为跟我们常见的Java或者C++变量定义的范围不一样嘛，var的生命周期是在函数范围内的，也就是说，var一旦定义了，跟函数的生命周期是一致的，所以为了避免这种不必要的麻烦，回归到Java或者C++语言变量生命周期的可控性，那么我们就用let代替var：

function calculateTotalAmount (vip) {
        
      var amount = 0 // probably should also be let, but you can mix var and let
      if (vip) {
        let amount = 1 // first amount is still 0
      } 
      { // more crazy blocks!
        let amount = 100 // first amount is still 0
        {
          let amount = 1000 // first amount is still 0
          }
      }  
      return amount
    }
    
    console.log(calculateTotalAmount(true))

也就是说在一个代码块定义的，生命周期只能在代码块范围

### 参考文献 ###

[https://webapplog.com/es6/][https_webapplog.com_es6]

[https_webapplog.com_es6]: https://webapplog.com/es6/