簡介 JavaScript ES6 物件及陣列

今年 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) ...
}

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

陣列 Array Destructuring

物件 Object Destructuring

函示宣告 Destructuring Function Arguments

See also