【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~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章