介紹 JavaScript 中的資料型態 (型別)，包含物件 (Object)、陣列 (Array)、未定義 (undefined)、空值 (null)、和函式 (Function)。

陣列 (Array)

語法

在 JavaScript 中可以使用三種方式來建立陣列：

  1. Array 物件建構，參數為初始的陣列元素，當參數只有一個且為數字型別時，表示宣告陣列的長度。
  2. Array 函式，同上。
  3. Array 實字，可直接建立陣列元素，無法宣告陣列長度。

一些範例如下：

1
2
3
console.log(new Array(178, 169.99, '30cm', new Array(9527)));   // [178, 169.99, "30cm", Array[9527]]，最後一個元素為長度 9527 的陣列
console.log(Array(178, 169.99, '30cm', Array(9527)));           // [178, 169.99, "30cm", Array[9527]]，同上
console.log([178, 169.99, '30cm', [9527]]);                     // [178, 169.99, "30cm", Array[1]]，最後一個元素為包含一個元素 9527 的陣列

事實上在 JavaScript 中並不需要特別去指定陣列的長度，他會動態的擴充，而又由於建構或函式的參數有兩種情況，容易混淆，所以直接使用實字的方式是最好的。

元素的存取

我們使用中括號 ([]) 加上索引值 (index) 來表示陣列中的元素，例如：array[123]，以此方式可以取得或修改陣列元素的內容。以下為存取陣列的相關範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
var ar = new Array();
ar[0] = 178;
ar[1] = 169.99;
ar[2] = '30cm';
console.log(ar);        // [178, 169.99, "30cm"]
console.log(ar.length); // 3

ar[9] = 'Lala';
console.log(ar);        // [178, 169.99, "30cm", 9: "Lala"]
console.log(ar.length); // 10
console.log(ar[3]);     // undefined
console.log(ar[10]);    // undefined
console.log(ar[-1]);    // undefined

陣列的判斷

上一篇文章提到使用 typeof 可以判斷型別，但是陣列取得的結果是 object，要更進一步精確的判斷陣列，可以用以下三種方式：

  1. 利用 Array.isArray() 函式。
  2. 利用 instanceof 運算子判斷是否為 Array 類別。
  3. 利用 Object.prototype.toString() 函式判斷字串。
1
2
3
console.log(Array.isArray([]));                                         // true
console.log([] instanceof Array);                                       // true
console.log(Object.prototype.toString.call([]) == '[object Array]');    // true

isArray 在 ECMAScript v5 中才有定義，而 instanceof 必須是同一個 window 下建立的物件才會正確，也就是如果網頁有多個 frame，可能會判斷錯誤，所以利用字串判斷的方式是目前較好的做法。

物件 (Object)

語法

在 JavaScript 中可以使用兩種方式來建立物件：

  1. Object 物件建構。
  2. Object 實字，可直接建立物件成員。

使用實字的語法與 Json 類似，利用大括號 ({})、Key 和 Value 組成，Key 的部分可以是字串格式，一些範例如下：

1
2
3
4
5
var obj = new Object();
obj.x = 1;
obj.y = 2;
console.log(obj);           // Object {x: 1, y: 2}
console.log({ x: 1, 'y': 2 });    // Object {x: 1, y: 2}

屬性的存取

JavaScript 物件的屬性能夠使用兩種方式存取：

  1. 利用 (.) 運算子。
  2. 關聯式陣列。

關聯式陣列使用字串作為索引鍵，因此能夠做動態的變化，一些範例如下：

1
2
3
4
5
6
7
8
var obj = { n1: 1 };
obj.n2 = 2;
obj['n3'] = 3;
var str = '';
for(var i = 1;i <= 3;++i) {
  str += obj['n' + i];
}
console.log(str);   // 123

轉型

Object 作為函式使用時，表示轉型為物件，基本上只用來將布林、數值和字串轉成對應的物件類別，而參數為 null 或 undefined 時則相當於建立新物件，但本意是轉型故不列入上述方法之一。

1
2
3
console.log(Object(169.99));    // Number
console.log(Object('30cm'));    // String
console.log(Object(false));     // Boolean

未定義 (undefined)

語法

JavaScript 中並不存在保留字能夠直接使用未定義這個特殊值，但 JavaScript 中預設了一個值為未定義的變數，變數名稱同樣命名為 undefined。除此之外可以簡單利用下面兩種方式產生 undefined 的資料：

  1. 宣告無初始值變數。
  2. 使用 void 運算子。

利用這些方式可以進一步進行判斷，一些範例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var myundefined;
var myundefined2 = void 0;

console.log(undefined);     // undefined
console.log(myundefined);   // undefined
console.log(myundefined2);  // undefined

function func(val, opt) {
  if(opt == undefined) {
    opt = true;
  }
  if(opt) {
    console.log('Default case:' + val);
  } else {
    console.log('Other case:' + val * 2);
  }
}
func(123, false);   // Other case:246
func(123);          // Default case:123

全域變數

承接上文，undefined 是 JavaScript 預設的一個全域變數，就像 document 之類的變數一樣，並不是一個保留字，這意思是不正確的使用可能會造成無法預料的結果：

1
2
3
console.log('undefined' in window); // true, 全域變數
undefined = 'trap';
console.log(undefined);             // 在舊的瀏覽器結果會是 trap

現在較新的瀏覽器會防止你修改 undefined 這個變數，但較舊的瀏覽器，例如 IE8 以前的版本仍然會存在這個問題。

安全的使用undefined

承上一節所述，未避免其他地方有人修改了 undefined 的值而造成錯誤，我們可以自行建立 undefined 變數確保資料正確，如以下兩種方法：

1
2
3
4
5
6
7
8
// 宣告區域變數不指定初始值
var undefined;
console.log(undefined);  // undefined

// 利用 function 建立區域範圍, 使用 undefined 參數名稱但不給值
(function(undefined) {
  console.log(undefined);  // undefined
}())

變數比較

由於未定義意思空值類似，都是表示沒有資料，所以在比較上是相等的，但特別需要注意的是，未定義只和未定義與空值相等。

1
2
3
4
console.log(undefined == undefined);    // true
console.log(undefined == null);         // true
console.log(undefined == 0);            // false
console.log(undefined == false);        // false

空值 (null)

語法

空值的值只有 null 一種，只能是小寫，表示沒有資料。

1
console.log(null);  // null

變數比較

和未定義類似，空值只和空值與未定義相等。

1
2
3
4
console.log(null == null);      // true
console.log(null == undefined); // true
console.log(null == 0);         // false
console.log(null == false);     // false

移除變數

null 本身表示沒有資料，可以指派給變數，但意思並不代表移除變數 (未定義亦是如此)，必須使用 delete 運算子來移除變數：

1
2
3
4
5
var obj = {year: 2012, month:12, day: 21};
obj.day = null;
obj.month = undefined;
delete obj.year;
console.log(obj);   // Object {day: null, month: undefined}

需注意只能用來移除以物件屬性建立的變數。

函式 (Function)

語法

在 JavaScript 中函式是一個特殊的型別，可以像是變數一樣操作，一般有以下三種方式可以建立函式：

  1. 函式敘述 (statement)。
  2. 函式實字。
  3. 函式物件建構，最後一個參數為函式主體，前面的參數為函式介面參數名稱。

一些範例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 函式敘述
function func(x) { return x * x; }
// 函式實字
var func2 = function (x) { return x * x; };
var func3 = function square(x) { return x * x; };

var func4 = new Function('x', 'return x * x');

console.log(func(2));   // 4
console.log(func2(2));  // 4
console.log(func3(2));  // 4
console.log(func4(2));  // 4

console.log(func);  // function func(x) { return x * x; }
console.log(func2); // function (x) { return x * x; }
console.log(func3); // function square(x) { return x * x; }
console.log(func4); // function anonymous(x) { return x * x }

從上面的範例可以看到，使用函式敘述的函式內部名稱會和函式名稱一致，函式實字則可省略，而函式物件則使用 anonymous 的名稱。

延伸閱讀

上一篇 JavaScript 教學 - 資料型態 (Data Type) - 上
下一篇 JavaScript 教學 - 變數 (Variables)