聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

六月 21, 2015

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» 簡介 JavaScript ES6 物件及陣列

es6-logo

今年 2015 六月 17 號 Ecma International 已經同意 ECMA-262 6th edition 版本,這是在 ECMAScript 2015 Has Been Approved 看到的消息,而現在主流就是以 Babeljs 為主,將 ES2015 語法直接轉換成 ES5,讓各大瀏覽器可以繼續支援 ES2015 寫法。今天來介紹 ES2015 內如何使用物件 (Object) 或陣列 (Array)。

陣列 Array Destructuring

直接舉例子來說明,假設有一個 Array [1, 2, 3, 4, 5],我們需要三個變數分別對應到 1, 2, 3 這時候在 ES5 答案會是底下

var value = [1, 2, 3, 4, 5];
var el1 = value[0];
var el2 = value[1];
var el3 = value[2];

這時候可以發現 [el1, el2, el3] 就是 [1, 2, 3] 了,但是在 ES6 寫法內,可以直接宣告 Array 變數來直接對應 value

var value = [1, 2, 3, 4, 5];
var [el1, el2, el3] = value;

上述語法轉換成 ES5,就會是最上面的程式碼,ES6 可以不必宣告 el1, el2, el3 等變數,當然你也可以宣告後再做對應

var el1, el2, el3;
[el1, el2, el3] = [1, 2, 3, 4, 5];

在 ES6 內要怎麼寫 swapping values 呢,請看底下

[el1, el2] = [el2, el1];

上述結果就是將 el1 及 el2 的值互相對調。陣列裡面還可以有陣列對應

var value = [1, 2, [3, 4, 5]];
var [el1, el2, [el3, el4]] = value;

這時 el3 = 3, el4 = 4,非常簡單,如果是 function return array value 也可以直接對應

function tuple() {
  return [1, 2];
}
 
var [first, second] = tuple();

如果要跳過陣列內其中一個值,可以直接寫成底下

var value = [1, 2, 3, 4, 5];
var [el1, , el3, , el5] = value;

這時 el3 就是 3,正規語法就需要此功能

var [, firstName, lastName] = "John Doe".match(/^(w+) (w+)$/);

// firstName = John, lastName = Doe

還有在 ES5 我們常常要寫 default value 功能,現在可以用簡短程式碼取代

var [firstName = "John", lastName = "Doe"] = [];

這時候由於 firstName 跟 lastName 都是 undefined,所以可以使用預設 values,如果是 null 就會是 null 值喔

var [firstName = "John", lastName = "Doe"] = [null, null];

上述程式碼結果會是 firstName = lastName = null,最後還有 Spread operator 的功能

var value = [1, 2, 3, 4, 5];
var [el1, el2, el3, ...tail] = value;

可以發現 tail 的值會是 [4, 5],但是目前只有支援剩餘 Array 的寫法,底下寫法是不支援的

var value = [1, 2, 3, 4, 5];
var [...rest, lastElement] = value;
var [firstElement, ...rest, lastElement] = value;

物件 Object Destructuring

物件的寫法其實跟陣列沒有很大的差異,一樣是用物件包變數的方式宣告

var person = {firstName: "John", lastName: "Doe"};
var {firstName, lastName} = person;

物件內還有物件寫法

var person = {name: {firstName: "John", lastName: "Doe"}};
var {name: {firstName, lastName}} = person;

物件內有 Array 寫法

var person = {dateOfBirth: [1, 1, 1980]};
var {dateOfBirth: [day, month, year]} = person;

或者是 Array 包物件都支援

var person = [{dateOfBirth: [1, 1, 1980]}];
var [{dateOfBirth}] = person;

看看物件預設值寫法

var {firstName = "John", lastName: userLastName = "Doe"} = {};

如果是 null 跟陣列一樣都會是 null

var {firstName = "John", lastName = "Doe"} = {firstName: null, lastName: null};

函示宣告 Destructuring Function Arguments

一般開發者在寫 ES5 function 時,最後帶的參數一定會是物件 options,用來判斷此函示是否有其他特定需求變數

function findUser(userId, options) {
  if (options.includeProfile) ...
  if (options.includeHistory) ...
}

現在 ES6 可以直接寫成

function findUser(userId, {includeProfile, includeHistory}) {
  if (includeProfile) ...
  if (includeHistory) ...
}

這樣可以更清楚了解此函示的功能,而不用看程式碼了 XD,想開始嘗試寫 ES6 嗎?這時候就要強烈推薦 Babel.js 了,參考文章:Getting Started with JavaScript ES6 Destructuring

二月 22, 2015

小惡魔AppleBOY
AppleBOY
小惡魔 – 電腦技術 – 工作筆記 – AppleBOY is about »

tag cloud

» 6to5 JavaScript Transpiler 重新命名為 Babel

es6-logo

先前寫了一篇 CoffeeScript 轉 ES6,裡面有提到 6to5 專案,此專案幫助開發者可以直接寫 JavaScript ECMAScript 6,該專案則會將 ES6 轉成 ES5,但是目前瀏覽器對於 ES6 的支援度還沒有很高,可以直接參考 ECMAScript 6 compatibility table,但是看到專案名稱 6to5,就會覺得如果之後 ES7 出來,不就要多開一個 7to6 專案,果然官方在 Blog 宣佈將名稱正式轉為 BabeljsBabel 也會持續使用最新 JavaScript Standard 開發 JavaScript transpiler 相關工具,讓各種平台程式都可以使用。

現在就可以透過 Babel 來開發 ES6

$ npm install --global babel

ES6 轉 ES5

$ babel script.js

一些來自 Mozilla, Esprima, jQuery Foundation, Acorn, 6to5, ESLint 組織成員,也合力開了 ESTree,而 Babel 以 ESTree 為基底來開發相關 Tool,所以最新的 Standard 也可以直接參考 ESTree。

support:

biggo.com.tw

A Django site.