ES6新特性

ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。

本文主要针对ES6做一个简要介绍。列出在平常的工作中最常用的几个特性：

Default Parameters（默认参数） in ES6
Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6
Destructuring Assignment （解构赋值）in ES6
Arrow Functions （箭头函数）in ES6
Promises in ES6
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）

首先回顾一下JavaScript的历史，不清楚历史的人，很难理解JavaScript为什么会这样发展。下面就是一个简单的JavaScript发展时间轴：

1、1995：JavaScript诞生，它的初始名叫LiveScript。

2、1997：ECMAScript标准确立。

3、1999：ES3出现，与此同时IE5风靡一时。

4、2000–2005： XMLHttpRequest又名AJAX，在Outlook Web Access (2000)、Oddpost (2002)，Gmail (2004)和Google Maps (2005)大受重用。

5、2009： ES5出现，（就是我们大多数人现在使用的）例如foreach，Object.keys，Object.create和JSON标准。

6、2015：ES6/ECMAScript2015出现。

历史回顾就先到此，现让我们进入正题。

1.Default Parameters（默认参数） in ES6

还记得我们以前不得不通过下面方式来定义默认参数：

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

一切工作都是正常的，直到参数值是0后，就有问题了，因为在JavaScript中，0表示fasle，它是默认被hard-coded的值，而不能变成参数本身的值。当然，如果你非要用0作为值，我们可以忽略这一缺陷并且使用逻辑OR就行了！但在ES6，我们可以直接把默认值放在函数申明里：

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

2.Template Literals（模板对象） in ES6

在其它语言中，使用模板和插入值是在字符串里面输出变量的一种方式。因此，在ES5，我们可以这样组合一个字符串：

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

幸运的是，在ES6中，我们可以使用新的语法$ {NAME}，并把它放在反引号里：

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

3.Multi-line Strings （多行字符串）in ES6

ES6的多行字符串是一个非常实用的功能。在ES5中，我们不得不使用以下方法来表示多行字符串：

var content = 'My name is zhangsan, and I'
    　　　　　　+ 'like javascript very much. If you'
    　　　　　　+ 'know ES6, you are success';

然而在ES6中，仅仅用反引号就可以解决了：

var content = `My name is zhangsan, and I
　　　　　　　　like javascript very much. If you
　　　　　　　　know ES6, you are success`;

4.Destructuring Assignment （解构赋值）in ES6

解构可能是一个比较难以掌握的概念。先从一个简单的赋值讲起，其中house 和 mouse是key，同时house 和mouse也是一个变量，在ES5中是这样：

var data = $('body').data(), // data has properties house and mouse
   house = data.house,
   mouse = data.mouse;

以及在node.js中用ES5是这样：

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

在ES6，我们可以使用这些语句代替上面的ES5代码：

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

这个同样也适用于数组，非常赞的用法：

var [col1, col2]  = $('.column'),
   [line1, line2, line3, , line5] = file.split('n');

我们可能需要一些时间来习惯解构赋值语法的使用，但是它确实能给我们带来许多意外的收获

5.Arrow Functions in（箭头函数） ES6

这是我迫不及待想讲的一个特征。在ES6中，也有了丰富的箭头函数(这个跟java8中的箭头函数有点像)。这些丰富的箭头是令人惊讶的因为它们将使许多操作变成现实，比如，

以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

有了箭头函数在ES6中，我们就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如，下面的代码用ES5就不是很优雅：

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

在ES6中就不需要用 _this = this：

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

请注意，只要你愿意，在ES6中=>可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数，它就变成了一个表达式。它将暗地里返回单个语句的结果。如果你超过了一行，将需要明确使用return。

这是用ES5代码创建一个消息数组：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(function (value) {
  return "ID is " + value; // 一定得加上return
});

用ES6是这样：

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9'];
var messages = ids.map(value => `ID is ${value}`); // 可以隐藏return

最后一行也可以写成：

var messages = ids.map(value => {
    return `ID is ${value}`;
});

在箭头函数中，有以下两点好处：

　　a、单个参数，括号()是可选的，但当你超过一个参数的时候你就需要他们。

　　b、单行代码，可以省略return

6. Promises in ES6

对于promises，楼主觉得，主要是为了解决异步相关的问题

下面是一个简单的用setTimeout()实现的异步延迟加载函数:

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

在ES6中，我们可以用promise重写:

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

关于promise用法的详细说明，可以参考https://www.cnblogs.com/whybxy/p/7645578.html

7.Block-Scoped Constructs Let and Const（块作用域和构造let和const）

在ES6代码中，你可能已经看到那熟悉的身影let。在ES6里let并不是一个花俏的特性，它是更复杂的。Let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面。我们用大括号定义代码块，在ES5中，块级作用域起不了任何作用：

function calculateTotalAmount (vip) {
  var amount = 0;
  if (vip) {
    var amount = 1;
  }
  { // more crazy blocks!
    var amount = 100;
    {
      var amount = 1000;
    }
  }  
  return amount;
}
console.log(calculateTotalAmount(true));

结果将返回1000，这真是一个bug。在ES6中，我们用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));

这个结果将会是0，因为块作用域中有了let。如果（amount=1）.那么这个表达式将返回1。谈到const，就更加容易了；它就是一个不变量，也是块级作用域就像let一样。下面是一个演示，这里有一堆常量，它们互不影响，因为它们属于不同的块级作用域:

function calculateTotalAmount (vip) {
  const amount = 0;  
  if (vip) {
    const amount = 1;
  } 
  { // more crazy blocks!
    const amount = 100 ;
    {
      const amount = 1000;
    }
  }  
  return amount;
}
console.log(calculateTotalAmount(true));

从我个人看来，let 和const使这个语言变复杂了。没有它们的话，我们只需考虑一种方式，现在有许多种场景需要考虑。

相关参考资料：前端开发者不得不知的 ECMAScript 6 十大特性

posted @ 2018-04-15 21:07 仅此而已-远方阅读(204) 评论(0) 编辑收藏举报

刷新页面返回顶部

仅此而已-远方