用ES6代替CoffeeScript

关关_关关
901 阅读3分钟
原文链接： web.jobbole.com

我一直在关注JavaScript的下一个版本ES6，而且最后有机会在一个项目中使用了它。在我使用它短暂时间内，我发现在不发生巨大语法变化的情况下，解决了很多CoffeeScript 试图解决的问题。

现在使用ES6

我们现在就可以开始使用ES6，通过 6to5项目可以将ES6代码转换成ES5。6to5能支持大量的构建工具包括Broccoli、Grunt、 Gulp和Sprockets。我使用sprockets-es6已经很成功，Sprockets 4.x将为6to5提供开箱即用的支持。

如果你使用Vim，你想将.es6文件扩展名与JavaScript关联，请将以下代码放到你的. vimrc。

你还可以使用 6to5 REPL 在您的浏览器中尝试ES6。

CoffeeScript和ES6都有类的支持。让我们看看CoffeeScript类与ES6的区别。
CoffeeScript允许我们通过参数、字符串插值（interpolation）设置实例变量，同时不使用括号调用函数：

class Person
  constructor: (@firstName, @lastName) ->

  name: ->
    "#{@first_name} #{@last_name}"

  setName: (name) ->
    names = name.split " "

    @firstName = names[0]
    @lastName = names[1]

blake = new Person "Blake", "Williams"
blake.setName("Blake Anderson")
console.log blake.name()

在ES6中，我们可以使用class、getter和setter方法:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get name() {
    return this.firstName + " " + this.lastName;
  }

  set name(name) {
    var names = name.split(" ");

    this.firstName = names[0];
    this.lastName = names[1];
  }
}

var blake = new Person("Blake", "Williams");
blake.name = "Blake Anderson"
console.log(blake.name);

如果你在JavaScript中使用任何提供class功能的库或框架、你会注意到ES6语法有一些细微的差别：

  • 函数名后没有分号
  • 函数关键字省略了
  • 每个定义后没有逗号

我们也可以利用getter和setter的优势，它允许我们把name函数当做属性对待。

我经常希望JavaScript能有一个更强大的字符串语法。幸运的是ES6引入了 模板字符串。让我们来对比CoffeeScript字符串、JavaScript字符串、模板字符串、看看每个的功能。

CoffeeScript:

“CoffeeScript允许多行字符串
与
插值，比如1 + 1 = # { 1 + 1 }
”

JavaScript 字符串：

“JavaScript字符串只能在一行”+
”不支持插值”

ES6模板字符串：

`模板字符串允许字符串在
多行,允许插值，比如1 + 1 = $ { 1 + 1 }
`

我们可以在前面的示例利用模板字符串，按如下方式改写name的getter方法：

get name() {
  return `${this.firstName} ${this.lastName}`;
}

这比我们之前使用的字符串拼接方式要感觉更加干净，使我们更接近CoffeeScript的例子。

大箭头（Fat arrows）

使得CoffeeScript有如此吸引力的另一个功能，也出现在ES6，即大箭头。大箭头允许我们将函数绑定到的当前this的值上。首先，让我们看看在不使用大箭头时，我们是如何处理这个问题的。

在ES5中，我们必须在定义函数保存一个对当前this值的引用：

var self = this;

$("button").on("click", function() {
  // do something with self
});

CoffeeScript大箭头可以完全省略参数和括号:

$("button").on "click", =>
  # do something with this

ES6大箭头需要括号，可以带或不带参数：

$("button").on("click", () => {
  // do something with this
});

其它特性

ES6有一些其他特性值得关注。

默认参数

CoffeeScript：

hello = (name = "guest") ->
  alert(name)

ES6：

var hello = function(name = "guest") {
  alert(name);
}

Splats

Variadic functions（可变参数函数）, 在CoffeeScript叫做splats。允许你以一个数组收集传递给函数附加参数。ES6中叫做rest参数。

CoffeeScript：

awards = (first, second, others...) ->
  gold = first
  silver = second
  honorable_mention = others

ES6：

var awards = function(first, second, ...others) {
  var gold = first;
  var silver = second;
  var honorableMention = others;
}

解构允许你通过模式匹配从数组和对象提取特定的值。

CoffeeScript：

[first, _, last] = [1, 2, 3]

ES6：

var [first, , last] = [1, 2, 3]

我们可以在前面定义的name setter方法中使用解构，使代码更简洁:

set name(name) {
  [this.firstName, this.lastName] = name.split(" ");
}

ES6 transpilers（转换编译器）的开发非常活跃，它在功能上正迎头赶上CoffeeScript。这篇文章只涉及ES6给JavaScript带来的少数功能，你可以在这里找到更多关于本文提到的以及其它特性。

在你的下一个项目把CoffeeScript放在一边，拿ES6试一试！

avatar
文章
阅读
粉丝