ES6新特性

ES6中比较实用的八个特性:

1.块级作用域的let和const
2.箭头函数
3.默认参数
4.模版表达式
5.多行字符串
6.Promise
7.类
8.模块化

1. 块级作用域的let和const

let是一个更新的var,可以让你把变量作用域限制在当前块里。我们用{}来定义块,但是在ES5中这些花括号起不到任何作用。

function test (e) {
  var num = 0
  if (e) {
    var num = 1
  }
  {  // 更多的块
    var num = 10
    {
      var num = 100
      }
  }  
  return num
}
 
console.log(test(true))

运行结果将会是100,简直变态···
在ES6中,我们用let来限制变量作用域为函数内。

function test (e) {
  let num = 0 
  if (e) {
    let num = 1 
  } 
  { // 更多的块
    let num = 10 
    {
      let num = 100 
      }
  }  
  return num
}
 
console.log(test(true))

运行结果是0。
说到const,就简单多了。他仅仅产生是一个不可变的变量,并且他的作用域也像let一样只有块级。为了演示,这里有定义了一堆常量,并且由于作用域的原因,这些定义都是有效的。

function test(e) {
  const num = 0  
  if (e) {
    const num = 1 
  } 
  { // 更多的块
    const num = 10
    {
      const num = 100
      }
  }  
  return num
}
 
console.log(test(true))

let和const让这门语言变得更加复杂,没有这些的时候我们只有一条路可以走,但是现在可以要考虑更多的情景。

2. ES6中的箭头函数

这些箭头最神奇的地方在于他会让你写正确的代码。比如,this
在上下文和函数中的值应当是相同的,它不会变化,通常变化的原因都是因为你创建了闭包。
使用箭头函数可以让我们不再用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中你可以合理的把箭头函数和旧式 function 函数混用。当箭头函数所在语句只有一行时,它就会变成一个表达式,它会直接返回这个语句的值。但是如果你有多行语句,你就要明确的使用return。

3. ES6中的默认参数

以前我们要这样子来定义默认参数:

var link = function (height, color, url) {
    var height = height || 100
    var color = color || 'skyblue'
    var url = url || 'http://baidu.com'
    ...
}

在ES6中,我们可以把这些默认值直接放在函数签名中。

var link = function(height = 100, color = 'skyblue', url = 'http://baidu.com') {
  ...
}

4. 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}`

5. ES6中的多行字符串

在ES5中想要实现多行字符串我们需要这样:

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中,只要充分利用反引号。

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.`

6. ES6中的Promise

在ES6中有一个标准的Promise实现,可以解决嵌套过深的问题。
举一个延迟异步执行,用setTimeout实现:

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

我们可以用ES6中的Promise重写:

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

或者用ES6的箭头函数:

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

到现在为止,我们只是单纯增加了代码的行数,还明显没有带来任何好处。但是如果我们有更多复杂的逻辑内嵌在setTimeout()
中的回调时好处就来了:

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

可以用ES6中的Promise重写:

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

7. ES6中的类

在ES5中,因为没有class关键字(但它是毫无作用的保留字),类的创建和使用十分麻烦。ES6的类会用prototype来实现而不是function。现在有一个baseModel类,其中我们可以定义构造函数和getName()
方法。

class baseModel {
  constructor(options = {}, data = []) { // class 属性
        this.name = 'Base'
        this.url = 'http://baidu.com'
        this.data = data
        this.options = options
    }
 
    getName() { // class 方法
        console.log(`Class name: ${this.name}`)
    }
}

options和data用了默认参数,
而且方法名再也不用加上function。

8. ES6中的模块化

ES6之前JavaScript并没有对模块化有过原生的支持,于是有人创造出AMD(RequireJS),CommenJS等等,现在终于有import和export运算符来实现了。
ES5中你会用script标签和IIFE(立即执行函数),或者是其他的像AMD之类的库,但是ES6中你可以用export来暴露你的类。然后用Browserfy来浏览器化。
比如我们有一个port变量和getAccounts方法,在ES5中需要这么实现:

module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

在ES5的main.js中,用require('模块')来导入:

var service = require('module.js')
console.log(service.port) // 3000

但是在ES6中,我们用export和import。比如这是ES6中的module.js文件:

export var port = 3000
export function getAccounts(url) {
  ...
}

在需要引入的main.js文件中,可以用import {名称} from '模块'语法:

import {port, getAccounts} from 'module'
console.log(port) // 3000

或者就直接在main.js
中引入所有的变量:

import * as service from 'module'
console.log(service.port) // 3000

由于现在的大部分浏览器还不支持ES6,,如果想马上就用上ES6,我们需要一个像Babel这样的编译器。你可以把他当独立工具用,也可以将他集成到构建系统里,Babel对Gulp,Grunt和Webpack都有对应的插件


安装Gulp插件示例:

$ npm install --save-dev gulp-babel

在gulpfile.js中,定义这么一个任务,将src目录下的app.js文件编译到build目录下:

var gulp = require('gulp'),
  babel = require('gulp-babel')
 
gulp.task('build', function () {
  return gulp.src('src/app.js')
    .pipe(babel())
    .pipe(gulp.dest('build'))
})

Node.js和ES6
对于Node.js,你可以用构建工具或者直接用独立模块babel-core

$ npm install --save-dev babel-core

然后在Node.js中调用这个函数:

require('babel-core').transform(es5Code, options)

ES6的一些总结
ES6中还有很多比较不错的特性,如:
Math / Number / String/ Array/ Object中新的方法
二进制和八进制数据类型
自动展开多余参数
For of循环
Symbols
尾部调用优化generator
更新的数据结构(如Map和Set)

ES6相对于ES5的确是有比较大的优化,必然是未来发展的趋势所在,所以大家还是抓紧学习使用ES6吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • let和const命令 var:声明变量,更多的是全局作用域,存在变量提升 let:声明变量,存在于块级作用域,不...
    zhangivon阅读 2,472评论 1 13
  • ECMAScript 6.0(以下简称ES6)是、JavaScript语音的下一代标准,已经在2015年6月正式发...
    Leisure_blogs阅读 491评论 1 2
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,051评论 8 25
  • 首先感谢Carnia帮我指出ES6箭头函数中this指向的错误,此次主要更新箭头函数中this指向问题。 ECMA...
    范小饭_阅读 8,589评论 7 21
  • 1.定义函数2.创建类3.模块4.let与const5.箭头函数 arrow functions6.字符串模板 t...
    九又四分之三o阅读 247评论 0 0