JQ總務處｜jQuery與JavaScript｜深入淺出jQuery

前言

雖然 jQuery 是 JavaScript 程式庫，但薑還是老的辣，它也是有其父親語言能做到而它做不了的，接下來會介紹 JavaScript 功能以及 jQuery 如何使用它們來建立自訂清單和物件，並且以迴圈繞行這些東西，讓你的程式碼能寫得又簡短又輕鬆。

（ 圖片來源 ）

物件

之前在 選擇器與方法 提到變數；然後在 jQuery網頁操作 有提過陣列，這裡再簡單描述一遍：

變數提供簡單的儲存機制，它們把一個值指定給一個名稱（ 一夫一妻制 ）；而陣列則是透過一個變數名稱搭配多個值，這樣能更有效地儲存更多資料（ 一夫多妻制 ）。

而這次要講的物件提供更更更聰明的儲存機制，在你需要儲存某特定事物的多個變數時，就可以使用物件，在物件內，變數被稱作內容特性（ property ），物件也包含讓你能夠與其內容特性互動的函式。

// 資料現在被收集在 plane 的編組下
planeObject={
    engines: "4",
    type: "passenger",
    propellor: "No"
    // 物件以內容特性的形式記住它的資料
};

planeObject.engines; // 使用點號語法參照物件的任何內容特性

當你需要儲存關於特定事物的多個資料片段時，請使用物件。

物件的 UML 圖

物件是一種按照你想要的方式組織你的自訂變數的機制，可建立一次性的物件，或者可一再使用的，而物件能夠以標準模式來描述，亦即使用 UML （ 統一塑模語言 ）圖。

這個結構幫助你在撰寫任何程式碼之前先看到物件的組織方式，而下面說明要如何運用程式碼建構該物件：

1. 使用 var 關鍵字建立名為 myCountry 的物件
2. 建立名為 getCapital 的方法
3. 當方法被呼叫時執行此函式
4. 建立名為 myCapital 與 myName 的內容特性
5. 設定內容特性的值

加上點號（ . ）就可以與物件互動

myCountry.getCapital(); // 顯示 Washington DC
alert(myCountry.myName); // 顯示 USA

利用物件建構子建立可重複利用的物件

建立物件我們用關鍵字 var ，但建構子只是一個函式，所以我們會使用的是關鍵字 function ，並且使用關鍵字 new 建造該物件的新實例（ instance ）。

1. 物件名稱
2. 函式的參數／引數
3. 物件的內容特性
4. 設定物件內容特性的值

加上點號（ . ）就可以與物件互動

var actor1 = new myPerson('Jack','42');
var actor2 = new myPerson('Mary','33');

alert(actor1.name); // 顯示 Jack
alert(actor2.age); // 顯示 33

可以用什麼方式來設定內容特性？

可以使用指定運算子（ = ）或冒號（ : ）為內容特性指定值，兩種都有效而且是可以互換的。

陣列的建立與存取

之前在 jQuery網頁操作 就有介紹過陣列，如果不熟可以敲敲滑鼠複習一下喔！

三種方式建立陣列

// 使用 new 關鍵字建立空陣列。
var my_arr1 = new Array();

// 使用 new 關鍵字建立陣列，並且指定陣列裡的項目。
var my_arr2 = new Array('USA','Japan','Taiwan');

// 不使用 new 關鍵字建立陣列，但透過將值包在方括號裡設定項目。
var my_arr3 = ['USA','Japan','Taiwan'];

陣列也是物件，所以也具有方法和內容特性，陣列有個很常見的內容特性是 length （ 長度 ），指名陣列裡有多少個項目，透過 array_name.length 就可以存取陣列的 length 內容特性。

而存取陣列就簡單了，只有一個辦法，但要記得索引是從零開始。

// 使用方括號（ [] ）來存取陣列裡的項目。
alert(my_arr2[0]);

增加及更新陣列裡的項目

my_arr1[0] = "France"; // 在 my_arr1 陣列裡設定「第一個」項目值
my_arr1[1] = "Spain"; // 在 my_arr1 陣列裡設定「第二個」項目值
my_arr1[0] = "Italy"; // 在 my_arr1 陣列裡更新「第一個」項目值

迴圈的差別

先講一下，每個迴圈不管什麼類型，都具有四個不同的部分：

1. 初始化：在迴圈開始時會發生一次。
2. 條件測試：檢查迴圈是否該停止或繼續執行下一輪。
3. 動作：每次通過迴圈時要重複的程式碼。
4. 更新：看看迴圈是否該停止或繼續執行時要使用的變數。

除了 jQuery事件與函式 提到的 each 方法，其實還有 for 跟 do...while 的選擇，每個在語法上及目的上都各有不同。

for

for 迴圈擅長處理需要以固定次數重複程式碼的情況。

以上面介紹的迴圈四部分來說， for 的重複循環會是： 1-2-3-4-2-3-4...。

do...while

do...while 迴圈會執行程式碼一次，接著持續執行相同程式碼，直到不再符合後。

以上面介紹的迴圈四部分來說， do...while 的重複循環會是： 1-3-4-2-3-4-2...。

還有其他類型的迴圈嗎？

1. while 迴圈：類似 do...while ，但它一開始會先進行條件檢查。
2. for...in 迴圈：它將繞行物件的各個內容特性並取出每一個值。

如何停止已經開始跑的迴圈？

break 命令能再迴圈裡的任何地方呼叫它，將促使迴圈停止並繼續下一段程式碼。

別找我麻煩

別找我麻煩，也別找得這麼麻煩，如果想看某個變數是否已經存在於陣列中，不用大海撈針，只需要使用 inArray 方法，它將回傳你所尋找的值位在陣列何處（ 如果它存在的話 ），否則就會回傳 -1 ，而且如同其他工具方法， inArray 不需要選擇器，可以直接被 jQuery 函式或 jQuery 快捷模式呼叫。

1. 建立變數存放函式的回傳值
2. jQuery 快捷模式
3. 你所追求的值
4. 你想要從中查找的陣列

var haystack = new Array('hay','mouse','needle','pitchfork');
var needle_index = $.inArray('needle',haystack);

使用條件邏輯再次做決策

之前 jQuery事件與函式 就有講過 if...else 條件邏輯，但其實還可以結合 else if 的組合陳述式，能在同個陳述式裡檢查多種條件， 2+1>3 的威力比飛天小女警還要厲害，那就繼續看下去吧！

if (myNumber < 10){
    myNumber 小於 10 時所要執行的程式碼
}else if (myNumber > 20){
    myNumber 大於 20 時所要執行的程式碼
}else {
    myNumber 如果不是小於 10 也不是大於 20 時所要執行的程式碼
}

比較與邏輯運算子

可以使用一系列的比較與邏輯運算子來幫忙做決策，在 JavaScript 裡，有七種不同的比較運算子和有三種不同的邏輯運算子：

比較運算子

a == b （ 等於 ）
a 等於 b 時為真。

a != b （ 不等於 ）
a 不等於 b 時為真。

a === b （ 全等 ）
a 與 b 的值與型別皆相等時為真。

a < b （ 小於 ）
a 的值小於 b 時為真。

a <= b （ 小或等於 ）
a 的值小或等於 b 時為真。

a > b （ 大於 ）
a 的值大於 b 時為真。

a >= b （ 大或等於 ）
a 的值大或等於 b 時為真。

邏輯運算子

!a （ 非 ）
a 的值為 false 或不存在（ 針對 DOM 元素 ）時為真。

a || b （ 或 ）
a 或 b 的值為 true 時為真， a 或 b 的值皆為 false 時為假。

a && b （ 且 ）
a 與 b 的值為 true 時為真， a 與 b 只要有一個的值為 false 時結果即為假。

在 JavaScript 裡有其他方式可以比較值嗎？

就值的比較本身而言，沒有，不過倒是有另一個方法被用來根據變數的值進行決策，稱作 switch 方法，它可以涵蓋很多不同的條件，通常發現自己撰寫了龐大的 if / else if / else 陳述式時，使用 switch 可能會更容易一些。

if / else 陳述式有快捷模式，那個是什麼呀？

它被稱作三元運算子，使用問號把邏輯運算與結果動作區分開來，如下：

a > b ? if_true_code : if_false_code

大掃除

選擇器與方法 有提到過 jQuery 的 remove 和 empty 方法，但有時候 JavaScript 做某事就跟 jQuery 一樣不用打得落落長，清空陣列就是一個例子，而且還不需要紀錄 DOM 的位子，只需要把長度設為 0 即可。

used_cards.length = 0;

參考資料

深入淺出 jQuery （ Ryan Benedetti, Ronan Cranley 著、楊仁和 譯 ）