摘要：語法校驗會給出警告當(dāng)你仍在使用或不通過任何關(guān)鍵字聲明變量時。但是如果腳本中還有其他的普通導(dǎo)出，就會得到非常奇怪的結(jié)果這個坑爹的情況目前還沒有任何好的解決方案。

我在多年前愛上了coffeScript。對于javaScript，我一直保持著深沉的愛，也十分高興得看到node.js的快速發(fā)展，但是作為一個有python背景的程序員，我更喜歡coffeeScript的簡練語法。
在任何一個活躍的社區(qū)中，事物的迭代更新都是必然的，現(xiàn)在，我們看見了javaScript向著ES6標(biāo)準(zhǔn)的巨大進(jìn)步。ES6包含了相比于CoffeeScript更多好的特性，并且通過如Babel這樣的工具，我們已經(jīng)可以開始著手使用他們。以下是從coffeeScript遷移到ES6的一些注意點(diǎn)和我的想法。

放棄空格（whitespace），重新轉(zhuǎn)而使用圓括號，花括號和分號。請接受在使用ES6時，你會敲上更多的符號。不過在規(guī)范的代碼格式下，它們看上去還是挺整潔的。

過去我使用的是CoffeeLint，現(xiàn)在我通過babel-eslint來使用ESLint。遵循Airbnb ES6 style guide這個語法風(fēng)格指南。最好將你的編輯器設(shè)置成在輸入或保存時進(jìn)行語法檢查。Atom"s eslint plugin這個語法校驗插件非常不錯，你可以將上面的Airbnb ES6 style guide鏈接中的內(nèi)容，放入你的.eslintrc配置文件中。SublimeText也有類似的插件。

由于現(xiàn)在離對ES6的完美支持還很遠(yuǎn)，所以最好還是使用代碼轉(zhuǎn)換器（Transpiling），如Babel，就像在用CoffeeScript時一樣。不過和CoffeeScript不同的是，這里有一些值得說明的：

1，并不是所有的ES6特性全部都可用，諸如Proxies。

2，另有一些ES6特性需要使用polyfill/runtime才可用，如Symbols，generator函數(shù)，WeakMap。一段package.json的例子：

json{
  ...
  "scripts": {
    "lint": "eslint --ext .js,.es6 src",
    "precompile": "npm run lint",
    "compile": "babel --optional runtime src --out-dir lib",
  },
  "dependencies": {
    "babel-runtime": "^5.3.3"
  },
  "devDependencies": {
    "babel": "^5.3.3",
    ...
  }
  ...
}

jsconst name = "Daniel";

// This is a compile error
name = "Kari";

// ---------
const options = {};
const items = [];

// This is *not* a compile error
options.foo = "bar";
options.baz = 5;
items.push(1);
items.push(2);

// This *is* a compile error
options = {};
items = null;

jsconst name = "World";

console.log(`Hello, ${name}!`);

Coffeesquare = (value) -> value * value

someTask (err, result) =>
  # Handle err and result

myFunc = ({source, flag}, args...) ->
  otherFunc source, args...

jsconst square = value => value * value;

someTask((err, result) => {
  // Handle err and result
});

function myFunc({source, flag}, ...args) {
  return otherFunc(source, ...args);
}

js// Instead of creating a 10000 item array, we yield each item as
// needed.
function *squares() {
  for (let n = 0; n < 10000; n++) {
    yield n * n;
  }
}

for (let square of squares()) {
  console.log(square);
}

Coffeeclass Account extends Foo
  @types = ["checking", "savings"]

  constructor: (@balance) ->

  history: (done) ->
    someLongTask (err, data) ->
      # Do something with data
      done null, data

  deposit: (amount) ->
    @balance += amount

jsclass Account extends Foo {
  constructor(balance) {
    this.balance = balance;
  }

  history(done) {
    someLongTask((err, data) => {
      // Do something with data
      done(null, data);
    });
  }

  deposit(amount) {
    this.balance += amount;
    return this.balance;
  }
}

// Currently, you can only declare functions in a class
Account.types = ["checking", "savings"];

jsclass Account {
  constructor() {
    this.balance = 0;
  }

  get underBudget() {
    return this.balance >= 0;
  }

  get overBudget() {
    return this.balance < 0;
  }
}

const myAccount = Account();
myAccount.balance = 100;
console.log(myAccount.underBudget); // => true

jsclass MyIterable {
  constructor(items) {
    this.items = items;
  }

  *[Symbol.iterator]() {
    for (let item of this.items) {
      yield `Hello, ${item}`;
    }
  }
}

const test = new MyIterable([1, 2, 3, 4, 5]);

for (let item of test) {
  console.log(item); // => Hello, 1...
}

jsimport _ from "lodash";
import {item1, item2} from "./mylib";
import * as library from "library";

//普通導(dǎo)出
export const name = "Daniel";

export function abc() {
  return 1;
}

export class Toaster {
  // ...
}

//匿名導(dǎo)出
export default function() {
  return new Toaster();
}

js// mymodule.js
// -----------
export function yes() { return true; }

// script-broken.js
// ----------------
import mymodule from "./mymodule";

// This gives an error about `undefined`!
console.log(mymodule.yes());

// script-working.js
// -----------------
import * as mymodule from "./mymodule";

console.log(mymodule.yes());

js// mymodule.js
// -----------
export function yes() { return true; }
function no() { return false; }
export default {yes, no};

// script-working.js
// -----------------
import mymodule, {yes} from "./mymodule";

console.log(mymodule.no());
console.log(yes());

// script-broken.js
// ----------------
const mymodule = require("./mymodule");

// Wat? This is an error.
console.log(mymodule.no());

// This works instead. Turns out the module is an object with a "default"
// key that contains the default export.
console.log(mymodule.default.no());