iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
1
Modern Web

Half-Stack Developer 養成計畫系列 第 10

新一代的 JavaScript:ES6 與 babel

新一代的 JavaScript:ES6 與 babel

時代在進步,程式語言也會跟著一起進步。JavaScript 其實是一個叫做 ECMAScript 標準的實作。而我們把 ECMAScript6 簡稱為 ES6。你就想成是多了很多功能的 JavaScript 就好。在這邊先介紹幾個常用的:

let 跟 const

在 JavaScript 裡面,scope跟其他程式語言不太一樣,是以 function 當作基礎,例如說:

function test() {
  for(var i = 1; i <= 10; i++) {
    console.log(i);
  }
  console.log(i); // 11
}

因為 i 的 scope 是整個函式,所以在迴圈外面的地方也可以存取得到。但有了 ES6 以後,比較推薦的寫法是用let,它的 scope 就會變成一個 block。以上面的例子來說,如果你把 i 改成用 let 宣告的話,會出現錯誤:

function test() {
  for(let i = 1; i <= 10; i++) {
    console.log(i);
  }
  console.log(i); // Uncaught ReferenceError: i is not defined
}

另一個關鍵字 const 的話就是常數的意思,宣告之後就沒有辦法再改變它的職。這個就不多加介紹了

Arrow Function

假設你要寫一個把每一個數字都加一的程式:

let a = [1, 2, 3];
a = a.map(function (item) {
  return item+1;
})
console.log(a); // [2, 3, 4]

arrow function 就是語法糖,你可以簡化成這樣:

let a = [1 ,2, 3];
a = a.map((item) => item+1);
console.log(a);

// 多行
let a = [1 ,2, 3];
a = a.map((item) => {
  return item+1;
});
console.log(a);

除此之外還有一個差別,那就是在 function 裡面的this會指到誰。但是這個有點小複雜,所以有興趣的可以自己去找資料來看。

Spread Operator

這個是我最喜歡的功能,因為用起來實在是太直覺了。我覺得要會用這個的訣竅就是不要想,看就對了!總之這個符號就是「打散」的意思。

var b = [1 ,2 ,3];
var c = [4, 5, ...b];
console.log(c); // [4, 5, 1, 2, 3]

var obj = {
  name: 'huli',
  age: 100,
  height: 666
}
var newObj = {
  ...obj,
  nickname: 'hello',
  age: 30
}
console.log(newObj);
/*
{
  name: 'huli',
  nickname: 'hello',
  age: 30,
  height: 666
}
*/

Destructuring Assignment

這個也是直接看例子最快:

var obj = {
  a: 1,
  b: 2
}
const {a} = obj;
console.log(a); // 1

ES6 的簡單介紹就到這邊差不多啦,主要就是很多語法糖然後讓你可以更方便更直覺的寫 code,現在如果叫我回去寫 ES5 我一定會覺得很痛苦...
想要看更多資源的可參考:

  1. ECMAScript 6入门
  2. ECMAScript 6 — New Features: Overview & Comparison

Babel

可是大家都知道,有些看起來很潮很新的東西有一個缺點,那就是瀏覽器不一定可以支援。那怎麼辦呢?
這個時候就是本日主角:Babel出場的時候了,來偷一下官網的 slogan:

Babel is a JavaScript compiler.
Use next generation JavaScript, today.

沒錯,講得非常清楚明白,就是一個 JavaScript 的編譯器,我們可以先在Try it out這邊試玩看看

const test = () => {
  let arr = [];
  for(let i=0; i<1; i++) {
    arr.push(i);
  }
  console.log(i);
  console.log([...arr, 'hello']);
}
'use strict';

var test = function test() {
  var arr = [];
  for (var _i = 0; _i < 1; _i++) {
    arr.push(_i);
  }
  console.log(i);
  console.log([].concat(arr, ['hello']));
};

只要有了 babel 之後,就可以把 ES6 的語法轉成 ES5,可以不用考慮瀏覽器的支援度問題了。而且當全世界都支援 ES6 的時候,你要做的事情也很簡單,就只要把 babel 拿掉就好了。

噢對了,突然發現 babel 官網有一個 Learn ES2015 的單元,如果你想看更多 ES6 的語法也可以來這邊看。

接著就是最後也是最重要的一點:要怎麼用 babel 呢?其實在 codepen 或是其他的線上編輯網站裡面,都會有選項可以讓你選,你勾選 babel 之後就可以直接用最新的語法開始快樂 coding 了。或者是也可以參考官方文件,直接在瀏覽器上面引入 babel 的 script:

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>

就是這麼簡單容易!從今天開始改用最新的語法來寫程式吧,寫久了相信你就會跟犀利人妻一樣:可是瑞凡,我回不去了。


上一篇
工程師的救星來了!Bootstrap
下一篇
讓我們先轉個 180 度:Node.js 與 npm
系列文
Half-Stack Developer 養成計畫30

尚未有邦友留言

立即登入留言