在網路上看到這篇 - 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 "..."

可用於陣列

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};

上例 Destructing 宣告「{x,y,…z} = myObj;」出現的 ... 稱為 Rest Operator,用於函式可實現 Function Rest Parameters,類似 C# 的 params 關鍵字觀念

function myFunc(x,y,...params) { ... }
myFunc("a","b","c","d","e");
//結果: x="a", y="b", params=["c","d","e"]
//此寫法稱為 Function Rest Parameters,類似 C# 的 params 關鍵字

補充 MDN 的說明: Rest syntax looks exactly like spread syntax, but is used for destructuring arrays and objects. In a way, rest syntax is the opposite of spread syntax: spread 'expands' an array into its elements, while rest collects multiple elements and 'condenses' them into a single element. (感謝 Will 指正)

物件屬性簡寫

 

const x=1, y=2;
const myObj = { x, y };
//myObj.x=1, myObj.y=2


常寫 C# LINQ 的同學應該不陌生,相當於超精簡的 new { Prop1, Prop2 } 匿名型別寫法

原生Promise

 

var p = new Promise((resolveFunc, rejectFunc) => {
    //作業成功時呼叫resolveFunc(resolveArg)
    //作業失敗呼叫rejectFunc(err)
});
p
//呼叫resolveFunc觸發then
.then((resolveArg) => { ... })
//呼叫rejectFunc觸發catch
.catch((err) => { ... });


參考: 小試 JavaScript Promise

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!)

 


Comments

# by Pico

物件屬性簡寫 //myObj.x=1, myObj.x=2 應該是 //myObj.x=1, myObj.y=2

# by Jeffrey

to Pico, 謝謝指正,已修改。

# by Will

你文章的 Spread operator 第一個例子: function myFunc(x,y,...params) { ... } 其實正確的名詞應該是 Rest parameters 才對喔!

# by Jeffrey

to Will, 感謝指正。經查證,... 用於 Destructing 用途時,應稱之為 Rest Operator 才對,已更新至本文。

Post a comment