上一篇我們講到了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~