JavaScript 開發者 ES6 小抄筆記

在網路上看到這篇 - Modern JavaScript Cheatsheet - Modern JS Cheatsheet，給既有 JavaScript 開發者看的小抄，指出因應 ES6/ES2015 新標準的注意事項。（註：如果你被 ECMAScript 6、ES6、ES2015 等術語搞到頭很昏，可以參考這篇） 而這篇則是我以一個 jQuery/TypeScript/C# 開發者角度閱讀小抄的筆記整理，主要供自己備忘(謎: 天哪，這年頭連看小抄都要做筆記了嗎?)，順便分享給類似背景的同學參考。(若覺得筆記過於簡要，強烈建議閱讀原文，原文有不少文件詳解連結，包你看到懂)

var, let, const的差別與使用時機

let 宣告只在 Scope 內部有效，不會干擾外一層或全域範圍的同名變數，建議取代 var 使用；而 const 特性與 let 相似，差別在於 const 宣告後變數不能再改指向其他內容。

Arrow Function

相當於 TypeScript 或 C# LINQ 中的 (b) => b*2; 或 () => { ... } Lambda 寫法。有一點值得注意，在 Arrow Function 中 this 代表外一層執行環境的 Context，與 function() { }會另起 this 行為不同，這點與 TypeScript 依循的準則一致，小心不要踩坑。(參考: 再談TypeScript的this )

Desctucting 宣告

用 { prop1, prop2 } = someObject 快速取得 someObject 的 prop1, prop2 屬性值。[ x, y ] = [ 1, 2] 可快速取得 x=1, y=2。

Array 內建 map()/filter()/reduce()

前二者相當於 jQuery map()與 grep()，reduce() 則是將陣列元素彙總成單一值。(例如: 數字加總)

Spread Operator "..."

可用於函式參數

function myFunc(x,y,...params) { ... }

myFunc("a","b","c","d","e");

//結果: x="a", y="b", params=["c","d","e"]

const a1=["a","b","c"];

const a2=[a1,"d","e"]; // -> [["a","b","c"],"d","e"]

const a3=[...a1,"d","e"]; // ->["a","b","c","d","e"]

const myObj={x:1,y:2,a:3,b:4};

const {x,y,..z}=myObj;

//結果: x=1,y=2,z={a:3,b:4}

const n={x,y,...z};

//結果: n={x:1,y:2,a:3,b:4};

物件屬性簡寫

const x=1, y=2;

const myObj = { x, y };

//myObj.x=1, myObj.x=2

原生Promise

var p = new Promise((resolveFunc, rejectFunc) => {

//作業成功時呼叫resolveFunc(resolveArg)

//作業失敗呼叫rejectFunc(err)

});

p

//呼叫resolveFunc觸發then

.then((resolveArg) => { ... })

//呼叫rejectFunc觸發catch

.catch((err) => { ... });

Template Literal

BJ4，就是TypeScript 1.4 加入的超級好用 Template String，用過一次就回不去了。

export/import 模組引用

//** blah.js **

export const pi = 3.14;

export const authorName = "Jeffrey";

//** samp1.js **

import {pi,authorName} from  "./blah.js";

//pi==3.14, autherName=="Jeffrey";

//** samp2.js **

import * as blah from "./blah.js";

//blah.pi==3.14, blah.authorName=="Jeffrey"

//** samp3.js **

import { pi as PI } from "./blah.hs";

//PI==3.14

實務上還有一種常見用法: 若模組只匯出單一變數、函式、物件，可寫成 export default theVarToExport，引用端可任意引用命名 import anyName from "./blah.js" 取得其預設匯出項目。

對初學者像謎一般的this

延伸閱讀:
Javascript - 淺談this與Closure
Javascript .apply()應用實例

ES6 class 關鍵字

用來簡化原本繁瑣的 prototype 宣告。相比之下， TypeScript 的 class 更強大，可以直接享用介面、繼承等特性。

async/await

跟.NET 4.5的async/await概念相似，要搭配Promise使用，可要求等待Promise()非同步執行完傳回結果再繼續往下執行

參考: JavaScript 非同步程式革命－async、await 與 TypeScript 2.1

Truthy/Falsy

if (blah) 在什麼情況下 if 會成立?
當 blah 為以下內容時 if 將不成立，否則都視為 if 成立

• false
• 0
• ""(空字串)
• null
• undefined
• NaN

附註: 以上這些特性必須在支援 ES6/ES2015 規格的瀏覽器上才能運行，如果你跟我一樣必須考慮 IE 又想使用這些新方法，那麼 TypeScript 允許你用新語法寫程式並將它們轉成老瀏覽器也能執行的相容語法，更甭提強型別、物件導向這些讓程式易於維護擴充的優勢，絕對是一個好選擇。(沒聽過 TypeScript? 請參考: Hello, TypeScript!)