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

 

5. 陣列(Array)

5.1 語法

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

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

一些範例如下:

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中並不需要特別去指定陣列的長度,他會動態的擴充,而又由於建構或函式的參數有兩種情況,容易混淆,所以直接使用實字的方式是最好的。

5.2 元素的存取

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

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

5.3 陣列的判斷

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

  1. 利用Array.isArray()函式。
  2. 利用instanceof運算子判斷是否為Array類別。
  3. 利用Object.prototype.toString()函式判斷字串。
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,可能會判斷錯誤,所以利用字串判斷的方式是目前較好的做法。

6. 物件(Object)

6.1 語法

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

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

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

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} 

6.2 屬性的存取

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

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

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

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

6.3 轉型

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

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

7. 未定義(undefined)

7.1 語法

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

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

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

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

7.2 全域變數

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

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

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

7.3 安全的使用undefined

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

// 宣告區域變數不指定初始值
var undefined;
console.log(undefined);  // undefined

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

7.4 變數比較

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

console.log(undefined == undefined);	// true
console.log(undefined == null);			// true
console.log(undefined == 0);			// false
console.log(undefined == false);		// false

8. 空值(null)

8.1 語法

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

console.log(null);	// null

8.2 變數比較

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

console.log(null == null);		// true
console.log(null == undefined);	// true
console.log(null == 0);			// false
console.log(null == false);		// false

8.3 移除變數

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

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} 

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

9. 函式(Function)

9.1 語法

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

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

一些範例如下:

// 函式敘述
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)

文章標籤
創作者介紹

小殘的程式光廊

emn178 發表在 痞客邦 PIXNET 留言(0) 人氣()