最近我参加了一个在旧金山举行的HTML5开发者大会,听到的演讲半数都关于ES6(或者官方说法叫ECMAScript2015),我喜欢简洁的成为ES6。
这篇文章会给你简单介绍一下ES6。如果你还不知道什么是ES6的话,它是JavaScript一个新的实现,如果你是一个忙碌的JavaScript开发者(但谁不是呢),那么继续读下去吧,看看当今最热门的语言——JavaScript的新一代实现中,最棒的十个特性。
这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序):
- 默认参数
- 模版表达式
- 多行字符串
- 拆包表达式
- 改进的对象表达式
- 箭头函数
=&>
- Promise
- 块级作用域的
let
和const
- 类
- 模块化
注意:这个列表十分主观并且带有偏见,其他未上榜的特性并不是因为没有作用,我这么做只是单纯的希望将这份列表中的项目保持在十个。
首先,一个简单的JavaScript时间线,不了解历史的人也无法创造历史。
- 1995年:JavaScript以LiveScript之名诞生
- 1997年:ECMAScript标准确立
- 1999年:ES3发布,IE5非常生气
- 2000年-2005年:
XMLHttpRequest
,熟知为AJAX
,在如Outlook Web Access(2002)、Oddpost(2002)、Gmail(2004)、Google Maps(2005)中得到了广泛的应用 - 2009年:ES5发布(这是我们目前用的最多的版本),带来了
forEach
/Object.keys
/Object.create
(特地为Douglas Crockford所造,JSON标准创建者) ,还有JSON标准。
历史课上完了,我们回来讲编程。
1. ES6中的默认参数
还记得我们以前要这样子来定义默认参数:
1 2 3 4 5 6 |
var link = function (height, color, url) { var height = height || 50 var color = color || 'red' var url = url || 'http://azat.co' ... } |
这样做一直都没什么问题,直到参数的值为0
,因为0
在JavaScript中算是false
值,它会直接变成后面硬编码的值而不是0
本身。当然了,谁要用0
来传值啊(讽刺脸)?所以我们也忽略了这个瑕疵,沿用了这个逻辑,否则的话只能…..没有否则!在ES6中,我们可以把这些默认值直接放在函数签名中。
1 2 3 |
var link = function(height = 50, color = 'red', url = 'http://azat.co') { ... } |
对了,这个语法和Ruby很像!
2. ES6中的模版表达式
模版表达式在其他语言中一般是为了在模版字符串中输出变量,所以在ES5中,我们非得把字符串破开变成这样:
1 2 |
var name = 'Your name is ' + first + ' ' + last + '.' var url = 'http://localhost:3000/api/messages/' + id |
幸运的是在ES6中我们有了新语法,在反引号包裹的字符串中,使用${NAME}语法来表示模板字符:
1 2 |
var name = `Your name is ${first} ${last}` var url = `http://localhost:3000/api/messages/${id}` |
3. ES6中的多行字符串
另一个好吃的语法糖就是多行字符串,以前我们的实现是像这样的:
1 2 3 4 5 6 7 8 |
var roadPoem = 'Then took the other, as just as fair,nt' + 'And having perhaps the better claimnt' + 'Because it was grassy and wanted wear,nt' + 'Though as for that the passing therent' + 'Had worn them really about the same,nt' var fourAgreements = 'You have the right to be you.n You can only be you when you do your best.' |
但是在ES6中,只要充分利用反引号。
1 2 3 4 5 6 7 8 |
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. ES6中的拆包表达式
拆包可能是一个比较难理解的概念,因为这里面真的是有魔法发生。假如说你有一个简单的赋值表达式,把对象中的house
的mouse
赋值为house
和mouse
的变量。
最近我参加了一个在旧金山举行的HTML5开发者大会,听到的演讲半数都关于ES6(或者官方说法叫ECMAScript2015),我喜欢简洁的成为ES6。
这篇文章会给你简单介绍一下ES6。如果你还不知道什么是ES6的话,它是JavaScript一个新的实现,如果你是一个忙碌的JavaScript开发者(但谁不是呢),那么继续读下去吧,看看当今最热门的语言——JavaScript的新一代实现中,最棒的十个特性。
这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序):
- 默认参数
- 模版表达式
- 多行字符串
- 拆包表达式
- 改进的对象表达式
- 箭头函数
=&>
- Promise
- 块级作用域的
let
和const
- 类
- 模块化
注意:这个列表十分主观并且带有偏见,其他未上榜的特性并不是因为没有作用,我这么做只是单纯的希望将这份列表中的项目保持在十个。
首先,一个简单的JavaScript时间线,不了解历史的人也无法创造历史。
- 1995年:JavaScript以LiveScript之名诞生
- 1997年:ECMAScript标准确立
- 1999年:ES3发布,IE5非常生气
- 2000年-2005年:
XMLHttpRequest
,熟知为AJAX
,在如Outlook Web Access(2002)、Oddpost(2002)、Gmail(2004)、Google Maps(2005)中得到了广泛的应用 - 2009年:ES5发布(这是我们目前用的最多的版本),带来了
forEach
/Object.keys
/Object.create
(特地为Douglas Crockford所造,JSON标准创建者) ,还有JSON标准。
历史课上完了,我们回来讲编程。
1. ES6中的默认参数
还记得我们以前要这样子来定义默认参数:
1 2 3 4 5 6 |
var link = function (height, color, url) { var height = height || 50 var color = color || 'red' var url = url || 'http://azat.co' ... } |
这样做一直都没什么问题,直到参数的值为0
,因为0
在JavaScript中算是false
值,它会直接变成后面硬编码的值而不是0
本身。当然了,谁要用0
来传值啊(讽刺脸)?所以我们也忽略了这个瑕疵,沿用了这个逻辑,否则的话只能…..没有否则!在ES6中,我们可以把这些默认值直接放在函数签名中。
1 2 3 |
var link = function(height = 50, color = 'red', url = 'http://azat.co') { ... } |
对了,这个语法和Ruby很像!
2. ES6中的模版表达式
模版表达式在其他语言中一般是为了在模版字符串中输出变量,所以在ES5中,我们非得把字符串破开变成这样:
1 2 |
var name = 'Your name is ' + first + ' ' + last + '.' var url = 'http://localhost:3000/api/messages/' + id |
幸运的是在ES6中我们有了新语法,在反引号包裹的字符串中,使用${NAME}语法来表示模板字符:
1 2 |
var name = `Your name is ${first} ${last}` var url = `http://localhost:3000/api/messages/${id}` |
3. ES6中的多行字符串
另一个好吃的语法糖就是多行字符串,以前我们的实现是像这样的:
1 2 3 4 5 6 7 8 |
var roadPoem = 'Then took the other, as just as fair,nt' + 'And having perhaps the better claimnt' + 'Because it was grassy and wanted wear,nt' + 'Though as for that the passing therent' + 'Had worn them really about the same,nt' var fourAgreements = 'You have the right to be you.n You can only be you when you do your best.' |
但是在ES6中,只要充分利用反引号。
1 2 3 4 5 6 7 8 |
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. ES6中的拆包表达式
拆包可能是一个比较难理解的概念,因为这里面真的是有魔法发生。假如说你有一个简单的赋值表达式,把对象中的house
的mouse
赋值为house
和mouse
的变量。