一、資料型別

(1) 資料型別

JavaScript 變數能夠保存多種資料型別：數值、字串值、陣列、物件等等：

var length = 7;                             // 數字
var lastName = "Gates";                      // 字串
var cars = ["Porsche", "Volvo", "BMW"];        // 陣列
var x = {firstName:"Bill", lastName:"Gates"};  // 物件

(2) JavaScript 數值

• JavaScript 只有一種數值型別，

  寫數值時用不用小數點均可：

• 超大或超小的數值可以用科學計數法來寫：

(3) JavaScript 布林值

布林值只有兩個值：true 或 false，

(4) JavaScript 陣列

注意：JavaScript 陣列用方括號書寫， 陣列的專案由逗號分隔

陣列索引基于零，這意味著第一個專案是 [0]，第二個專案是 [1]，以此類推，

(5)JavaScript 物件

JavaScript 物件用花括號來書寫. 物件屬性是 name:value 對，由逗號分隔，

(6)Undefined和Null

Undefined

在 JavaScript 中，沒有值的變數，其值是 undefined，typeof 也回傳 undefined，

Null

在 JavaScript 中，null 是 “nothing”，它被看做不存在的事物，

在 JavaScript 中，null 的資料型別是物件，

• 可以把 null 在 JavaScript 中是物件理解為一個 bug，它本應是 null，
• 可以通過設定值為 null 清空物件：
• 可以通過設定值為 undefined 清空物件：

Undefined 與 Null 的區別

Undefined 與 null 的值相等，但型別不相等：

(7)原始資料( 原始資料值是一種沒有額外屬性和方法的單一簡單資料值，)

typeof 運算子可回傳以下原始型別之一：

• string
• number
• boolean
• undefined

二、函式

JavaScript 函式是被設計為執行特定任務的代碼塊，

JavaScript 函式會在某代碼呼叫它時被執行，

(1)函式語法

? JavaScript 函式通過 function 關鍵詞進行定義，其后是函式名和括號 ()，

函式名可包含字母、數字、下劃線和美元符號（規則與變數名相同），
圓括號可包括由逗號分隔的引數

     function name(引數 1, 引數 2, 引數 3) {
    要執行的代碼
}
     

（2）函式呼叫

函式中的代碼將在其他代碼呼叫該函式時執行：
重點:

• 當事件發生時（當用戶點擊按鈕時）
• 當 JavaScript 代碼呼叫時
• 自動的（自呼叫）

（3）函式回傳

當 JavaScript 到達 return陳述句，函式將停止執行，

如果函式被某條陳述句呼叫，JavaScript 將在呼叫陳述句之后“回傳”執行代碼，

函式通常會計算出回傳值，這個回傳值會回傳給呼叫者

例：

var x = myFunction(7, 8);        // 呼叫函式，回傳值被賦值給 x

function myFunction(a, b) {
    return a * b;                // 函式回傳 a 和 b 的乘積
}

（4）() 運算子呼叫函式

使用上面的例子，toCelsius 參考的是函式物件，而 toCelsius() 參考的是函式結果

（5）區域變數

在 JavaScript 函式中宣告的變數，會成為函式的區域變數，

區域變數只能在函式內訪問，

例：

// 此處的代碼不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // code here CAN use carName
}

// 此處的代碼可以使用 carName

三、陣列

JavaScript 陣列用于在單一變數中存盤多個值，

1. 陣列定義

陣列是一個特殊的變數，他能夠一次存放一個以上的值

2. 創建陣列(兩種方法）

（1）

var array-name = [item1, item2, ...];

（2）使用 JavaScript 關鍵詞 new

var cars = new Array("Saab", "Volvo", "BMW");

3. 訪問陣列元素

參考索引號（下標號）來參考某個陣列元素

訪問 cars 中的首個元素的值：

var name = cars[0];

這條陳述句修改 cars 中的首個元素：

cars[0] = "Opel"

• 訪問第一個元素

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

• 訪問最后一個元素

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

4. 陣列是物件

在 JavaScript 中對陣列使用 typeof 運算子會回傳 “object”，

（1)陣列使用數字來訪問其“元素”，

? 在本例中，person[0] 回傳 Bill：

var person = ["Bill", "Gates", 62];

(2)物件使用名稱來訪問其“成員”，

在本例中，person.firstName 回傳 Bill：

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

5. 可以在陣列中保存物件，保存函式，保存陣列

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

6. length 屬性

length 屬性回傳陣列的長度（陣列元素的數目），

例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // fruits 的長度是 4

length 屬性始終大于最高陣列索引（下標），

7. 遍歷陣列元素

（1）遍歷陣列的最安全方法是使用 “for” 回圈：

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
} 
text += "</ul>";

document.getElementById("demo").innerHTML = text;

（2）可以使用 Array.foreach() 函式：

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

document.getElementById("demo").innerHTML = text;

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

8. 添加陣列元素

（1）向陣列添加新元素的最佳方法是使用 push() 方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
  fruits.push("Lemon");

（2）以使用 length 屬性向陣列添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";  // 向 fruits 添加一個新元素 (Lemon)

9. 關聯陣列

JavaScript 不支持命名索引的陣列，

在 JavaScript 中，陣列只能使用數字索引，

警告！
若使用命名索引，JavaScript 會把陣列重定義為標準物件，

之后，所有陣列的方法和屬性將產生非正確結果，

var x = person.length;         // person.length 將回傳 0
var y = person[0];              // person[0] 將回傳 undefined

陣列和物件的區別

• 在 JavaScript 中，陣列使用數字索引，
• 在 JavaScript 中，物件使用命名索引，

如何識別陣列？

問題在于 JavaScript 運算子 typeof 回傳 “object”：

（1） Array.isArray()：

Array.isArray(fruits);     // 回傳 true

（2）創建您自己的 isArray() 函式以解決此問題：

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

假如引數為陣列，則上面的函式始侄訓傳 true，
或者更準確的解釋是：假如物件原型包含單詞 “Array” 則回傳 true，

(3)假如物件由給定的構造器創建，則 instanceof 運算子回傳 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 回傳 true

四、字串

JavaScript 字串用于存盤和操作文本，

（1）字串長度
內建屬性 length 可回傳字串的長度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

（2）特殊字符

由于字串必須由引號包圍，JavaScript 會誤解這段字串：

避免此問題的解決方法是，使用 \ 轉義字符，

反斜杠轉義字符把特殊字符轉換為字串字符：

（3)其他六個 JavaScript 中有效的轉義序列：

五、字串方法

（1）查找字串中的字串

indexOf() 方法回傳字串中指定文本首次出現的索引（位置）：

例

var str = "The full name of China is the People's Republic of
 China.";
var pos = str.indexOf("China");

（2）JavaScript 從零計算位置，

0 是字串中的第一個位置，1 是第二個，2 是第三個 …

lastIndexOf() 方法回傳指定文本在字串中最后一次出現的索引：

如果未找到文本， indexOf() 和 lastIndexOf() 均回傳 -1，

兩種方法都接受作為檢索起始位置的第二個引數，

var str = "The full name of China is the People's Republic of
 China.";
var pos = str.indexOf("China", 18);

• lastIndexOf() 方法向后進行檢索（從尾到頭），這意味著：假如第二個引數是 50，則從位置 50 開始檢索，直到字串的起點，

（3）檢索字串中的字串

search() 方法搜索特定值的字串，并回傳匹配的位置：

var str = "The full name of China is the People's Republic of 
China.";
var pos = str.search("locate");

區別在于：

• search() 方法無法設定第二個開始位置引數，
• indexOf() 方法無法設定更強大的搜索值（正則運算式）

(4)提取部分字串

• slice(start, end)

  slice() 提取字串的某個部分并在新字串中回傳被提取的部分，
  該方法設定兩個引數：起始索引（開始位置），終止索引（結束位置），

  var str = "Apple, Banana, Mango";
  var res = str.slice(7,13);
  

  如果某個引數為負，則從字串的結尾開始計數，

  如果省略第二個引數，則該方法將裁剪字串的剩余部分

• substring(start, end)

substring() 無法接受負的索引，

如果省略第二個引數，則該 substring() 將裁剪字串的剩余部分，

• substr(start, length)

substr() 類似于 slice()，

不同之處在于第二個引數規定被提取部分的長度，

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);

1. 如果省略第二個引數，則該 substr() 將裁剪字串的剩余部分，

2. 如果首個引數為負，則從字串的結尾計算位置，

3. 第二個引數不能為負，因為它定義的是長度，

(5)替換字串內容

• replace() 方法用另一個值替換在字串中指定的值：

str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");

• replace() 方法不會改變呼叫它的字串，它回傳的是新字串，

默認地，replace() 只替換首個匹配

• 默認地，replace() 對大小寫敏感，因此不對匹配 MICROSOFT：

如需執行大小寫不敏感替換，請使用正則運算式 /i（大小寫不敏感）：

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");

注意: 正則運算式不帶引號，

如需替換所有匹配，請使用正則運算式的 g 標志（用于全域搜索）：

(6)轉換為大寫和小寫

toUpperCase() 把字串轉換為大寫：

var text1 = "Hello World!";       // 字串
var text2 = text1.toUpperCase();  // text2 是被轉換為大寫的 text1

toLowerCase() 把字串轉換為小寫：

var text1 = "Hello World!";       // 字串
var text2 = text1.toLowerCase();  // text2 是被轉換為小寫的 text1

(7)concat() 方法

concat() 連接兩個或多個字串：

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

concat() 方法可用于代替加運算子，

所有字串方法都會回傳新字串，它們不會修改原始字串，

字串是不可變的：字串不能更改，只能替換，

（8）String.trim()

trim() 方法洗掉字串兩端的空白符：

（9）提取字串字符

• charAt()方法

charAt() 方法回傳字串中指定下標（位置）的字串：

var str = "HELLO WORLD";
str.charAt(0);            // 回傳 H

• charCodeAt() 方法

charCodeAt() 方法回傳字串中指定索引的字符 unicode 編碼：

var str = "HELLO WORLD";

str.charCodeAt(0);         // 回傳 72

（10）把字串轉換為陣列

可以通過 split() 將字串轉換為陣列：

var txt = "a,b,c,d,e";   // 字串
txt.split(",");          // 用逗號分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用豎線分隔

如果省略分隔符，被回傳的陣列將包含 index [0] 中的整個字串，

如果分隔符是 “”，被回傳的陣列將是間隔單個字符的陣列：