【JavaScript】2.複雜數據類型：數組和對象

上一篇我們講到了JavaScript中支持的數據類型，其中，數值（Number），字符串值（String）和布爾值（Boolean），被稱爲“簡單數據類型”，其特徵是每次只能代表一個值。相對的，數組、對象和我們待會要單獨提出來說的Date對象，能夠同時存儲多種信息，被稱爲“複雜數據類型”。

---

1. 數組（Array)

1.1 創建數組

上一節，我們已經初步說過數組的特性了。數組用於在單一變量中存儲多個值。創建數組的方式有兩種，第一種就是之前介紹的，直接採用文本語法創建，這種創建方式是最常用的，也是推薦使用的：

var array-name = [];  //空數組
var array-name = [item1, item2, ...];

另一種方法，就是使用JavaScript關鍵詞 new：

var array-name = new Array();  //空數組
var array-name = new Array(item1, item2, ...);

這種使用new來創建數組的語法，被稱爲“對象語法”。出於簡潔、可讀性和執行速度的考慮，在能使用文本方法創建變量的時候，儘量使用文本方法。

1.2 訪問數組元素

對於簡單變量，我們可以直接用變量名來訪問變量值；對於儲存多個值的複雜變量，使用alert()或console.log()會顯示所有值，但是不能訪問單個值：

var people = ["張三","李四","王五"];
console.log(people);  //控制檯顯示
alert(people); //將數組轉化爲一個字符串

數組中的項目常被稱爲元素，對於具體的元素，我們可以通過方括號加索引的方式訪問，之前也介紹過：

var people = ["張三","李四","王五"];
people[0] //"張三"

如果向尋找數組中元素位置，可以用indexOf()和lastIndexOf()方法，用法與字符串中的相同方法一致，返回找到的數組值的索引位置，如果該值在數組中不存在，兩個方法都返回-1。而且這兩個方法中都可以使用可選擇的第二個參數，用於指定開始搜索的位置。

如果向訪問數組中的所有元素，可以使用for-in循環遍歷數組：

var x
var myCars = new Array()
myCars[0] = "Ford"
myCars[1] = "Volvo"
myCars[2] = "BMW"

for (x in myCars)
{
document.write(myCars[x] + "<br />")
}

當然，已知數組的索引從0開始，其長度爲array.length，也可以直接用for循環遍歷：

count = myCars.length
for ( var i = 0; i < count; i++)
{
document.write(myCars[x] + "<br />")
}

JS中的數組可以是稀疏的，也就是說，在值列表中可能有未定義值（undefined)，因此比較好的方法是在for循環中加入確認條件，確認每個給定位置都有元素存在：

count = myCars.length
for ( var i = 0; i < count; i++)
{
    if (myCars[i] !== undefined
        { document.write(mycars[x] + "<br />") }
}

1.3 數組方法

（1）數組元素的增刪和修改

在處理數組時，刪除元素和添加新元素是很簡單的：

• pop() 方法從數組中刪除最後一個元素，返回被彈出的元素值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // 從 fruits 刪除最後一個元素（"Mango"）, x的值是 "Mango"

•  shift() 方法可以刪除會刪除首個數組元素，並把所有其他元素“位移”到更低的索引：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  // 從 fruits 刪除第一個元素 "Banana",返回 "Banana"

•  delet 運算符可以用來刪除數組中的任意元素，但是用delet刪除元素之後改索引位置的內容將變成undefined：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[1];   // 把 fruits 中索引爲1的元素改爲 undefined

•  splice() 可以在數組中以不留“空洞”的情況下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 刪除 fruits 中的第一個元素

但其實，splice()是用於向數組中增加新項的：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi"); //新數組：Banana,Orange,Lemon,Kiwi,Apple,Mango
fruits.splice(2, 2, "Lemon", "Kiwi"); //新數組：Banana,Orange,Lemon,Kiwi

其中，第一個參數（2）定義了應添加新元素的位置（拼接），第二個參數（0/2）定義應刪除多少元素，其餘參數（“Lemon”，“Kiwi”）定義要添加的新元素，該方法返回一個包含已刪除項的數組。

• push() 方法（在數組結尾處）向數組添加一個新的元素，該方法返回新數組的長度；當然也可以用length 屬性向數組追加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");      // 向 fruits 添加一個新元素, x 的值是 5
fruits[fruits.length] = "Kiwi";    //向 fruits 追加 "Kiwi"

• unshift() 方法（在開頭）向數組添加新元素，並“反向位移”舊元素：

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

unshift()方法比push()慢，因此應儘量使用後者。 

• 可以通過索引號訪問並更改數組元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi"; //把 fruits 的第一個元素改爲 "Kiwi"

（2）數組的合併和分割

數組的增刪修改改變的是原數組的內容，而數組的合併和分割會返回一個新的數組，對原數組的內容沒有影響。

• concat() 方法通過合併（連接）現有數組來創建一個新數組，它總是返回一個新數組：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];

var list1 = arr1.concat(arr2); // 將arr1、arr2連接在一起
var list2 = arr1.concat(arr2, arr3);   // 將arr1、arr2 與 arr3 連接在一起
var list3 = arr1.concat(["Emil", "Tobias", "Linus"]);  //將值作爲參數合併

• slice() 方法用與在數組中切出新數組，該方法可接受兩個參數（start,end)，可以省略第二個參數，也可以使用負數：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);  //Apple,Mango
var citrus = fruits.slice(1,3); //Orange,Lemon
var citrus = fruits.slice(-3); //Lemon,Apple,Mango
var citrus = fruits.slice(-3,-1); //Lemon,Apple

 （3）數組轉換爲字符串

• JavaScript 方法 toString() 把數組轉換爲數組值（逗號分隔）的字符串。實際上，所有 JavaScript 對象都擁有 toString() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();  //Banana,Orange,Apple,Mango

• join() 方法也可將所有數組元素結合爲一個字符串。它的行爲類似 toString()，但是可以規定分隔符。

var fruits = ["Banana", "Orange","Apple", "Mango"];
fruits.join(" * "); //Banana * Orange * Apple * Mango

（4）數組排序

• sort() 方法以字母順序對數組進行排序，該方法只適用於字符串排序，對數值排序會產生錯誤；對於數值排序，需要通過一個比值函數來修正，如下所示：

var points = [40, 100, 1, 5, 25, 10];

//以字母順序排序
points.sort(); //1,10,100,25,40,5

//按數字大小排序
points.sort(function(a, b){return a - b});  //1,5,10,25,40,100

• reverse() 方法用於反轉數組中的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();         // 反轉元素順序：Mango,Apple,Orange,Banana

fruits.sort();            // 排序：Apple,Banana,Mango,Orange
fruits.reverse();         // 反序：Orange,Mango,Banana,Apple

• 使用 Math.max() 來查找數組中的最高值，使用 Math.min() 來查找數組中的最低值。

---

2. 對象(Object)

JavaScript是面向對象的編程語言，這意味着對象是這種語言中的基本類型。

我是學python入門的，在python中，定義對象需要定義類（class)，然後通過類創建實例化對象。但是JavaScript非常獨特，它不需要定義類，它直接從模型對象（prototype）繼承而來，據說會更加容易，拭目以待吧。

2.1 創建對象

和數組一樣（其實數組也是對象），創建對象的方式有兩種：

//使用new運算符
var newObj = new Object();

//使用文本語法
var newObj = {};

和之前一樣，推薦使用文本語法。

對象是由屬性（attribute）和方法組成的。

爲對象添加屬性時，使用"屬性：值"的格式，屬性之間逗號分隔。

注意：屬性名稱最好使用字母（特殊情況可以使用字母加數字），不能有空格和標點符號。屬性名稱本身不需要加引號，但是其值，如果時字符串需要加引號，數字不用，值的類型不限於簡單數據類型，也可以是數組或者其他對象。

var car = {type:"porsche", model:"911", color:"white"};

方法是在對象上執行的動作，方法以函數定義被存儲在屬性中。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在上面的對象聲明中，出現了 this 關鍵詞。在函數定義中，this 引用該函數的“擁有者”，比如在上面的例子中，this 指的是“擁有” fullName 函數的 person 對象，this.firstName 的意思是 this 對象的 firstName 屬性。this關鍵詞的出現，爲對象提供了引用自身屬性的方法。

2.2 訪問和修改對象的屬性

訪問對象屬性的方法有兩種：

objectName.propertyName

objectName["propertyName"]

創建對象後，可以用賦值運算符修改對象的屬性：

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

person.id = 798; //屬性值的修改

注意，如果命名的屬性在現有的對象中不存在，則會被添加。

刪除對象的屬性，需要用到delete運算符：

delete obj.propery;

2.3 訪問對象的方法

您能夠通過如下語法訪問對象方法：

objectName.methodName()

如果不使用 () 訪問 fullName 方法，則將返回函數定義：

var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};
 
person.fullName;   // 返回函數定義：function() { return this.firstName + " " + this.lastName; }
person.fullName();  //返回：Bill Gates

方法，實際上是在對象裏以屬性值的形式存儲的函數定義，關於函數的知識，我們下一篇再聊~over~