1. 程式人生 > >JavaScript(第七天)

JavaScript(第七天)

構建 調用 firefox align man ali 一個 參考 函數參數

什麽是對象,其實就是一種類型,即引用類型。而對象的值就是引用類型的實例。在ECMAScript中引用類型是一種數據結構,用於將數據和功能組織在一起。它也常被稱做為類,但ECMAScript中卻沒有這種東西。雖然ECMAScript是一門面向對象的語言,卻不具備傳統面向對象語言所支持的類和接口等基本結構。

一.Object類型

到目前為止,我們使用的引用類型最多的可能就是Object類型了。雖然Object的實例不具備多少功能,但對於在應用程序中的存儲和傳輸數據而言,它確實是非常理想的選擇。

創建Object類型有兩種。一種是使用new運算符,一種是字面量表示法。

1.使用new運算符創建

Object

var box = new Object(); //new方式

box.name = ‘張三‘; //創建屬性字段

box.age = 28; //創建屬性字段

2.new關鍵字可以省略

var box = Object(); //省略了new關鍵字

3.使用字面量方式創建Object

var box = { //字面量方式

name : ‘張三‘, //創建屬性字段

age : 28

};

4.屬性字段也可以使用字符串星矢

var box = {

‘name‘ : ‘張三‘, //也可以用字符串形式

‘age‘ : 28

};

5.使用字面量及傳統復制方式

var box = {}; //字面量方式聲明空的對象

box.name = ‘張三‘; //點符號給屬性復制

box.age = 28;

6.兩種屬性輸出方式

alert(box.age); //點表示法輸出

alert(box[‘age‘]); //中括號表示法輸出,註意引號

PS:在使用字面量聲明Object對象時,不會調用Object()構造函數(Firefox除外)

7.給對象創建方法

var box = {

run : function () { //對象中的方法

return ‘運行‘;

}

}

alert(box.run()); //調用對象中的方法

8.使用delete刪除對象屬性

delete box.name; //刪除屬性

在實際開發過程中,一般我們更加喜歡字面量的聲明方式。因為它清晰,語法代碼少,而且還給人一種封裝的感覺。字面量也是向函數傳遞大量可選參數的首選方式。


function box(obj) { //參數是一個對象

if (obj.name != undefined) alert(obj.name); //判斷屬性是否存在

if (obj.age != undefined) alert(obj.age);

}

box({ //調用函數傳遞一個對象

name : ‘張三‘,

age : 28

});

二.Array類型

除了Object類型之外,Array類型是ECMAScript最常用的類型。而且ECMAScript中的Array類型和其他語言中的數組有著很大的區別。雖然數組都是有序排列,但ECMAScript中的數組每個元素可以保存任何類型。ECMAScript中數組的大小也是可以調整的。

創建Array類型有兩種方式:第一種是new運算符,第二種是字面量。

1.使用new關鍵字創建數組

var box = new Array(); //創建了一個數組

var box = new Array(10); //創建一個包含10個元素的數組

var box = new Array(‘張三‘,28,‘教師‘,‘湖南‘); //創建一個數組並分配好了元素

2.以上三種方法,可以省略new關鍵字。

var box = Array(); //省略了new關鍵字

3使用字面量方式創建數組

var box = []; //創建一個空的數組

var box = [‘張三‘,28,‘教師‘,‘湖南‘]; //創建包含元素的數組

var box = [1,2,]; //禁止這麽做,IE會識別3個元素

var box = [,,,,,]; //同樣,IE的會有識別問題

PS:和Object一樣,字面量的寫法不會調用Array()構造函數。(Firefox除外)

4.使用索引下標來讀取數組的值

alert(box[2]); //獲取第三個元素

box[2] = ‘學生‘; //修改第三個元素

box[4] = ‘計算機編程‘; //增加第五個元素

5.使用length屬性獲取數組元素量

alert(box.length) //獲取元素個數

box.length = 10; //強制元素個數

box[box.length] = ‘JS技術‘; //通過length給數組增加一個元素

6.創建一個稍微復雜一點的數組

var box = [

{ //第一個元素是一個對象

name : ‘張三‘,

age : 28,

run : function () {

return ‘run‘;

}

},

[‘馬雲‘,‘李彥宏‘,new Object()],//第二個元素是數組

湖南‘, //第三個元素是字符串

25+25, //第四個元素是數值

new Array(1,2,3) //第五個元素是數組

];

alert(box);

PS:數組最多可包含4294967295個元素,超出即會發生異常。

三.對象中的方法

轉換方法

對象或數組都具有toLocaleString()toString()valueOf()方法。其中toString()valueOf()無論重寫了誰,都會返回相同的值。數組會講每個值進行字符串形式的拼接,以逗號隔開。

var box = [‘張三‘,28,‘計算機編程‘]; //字面量數組

alert(box); //隱式調用了toString()

alert(box.toString()); //valueOf()返回一致

alert(box.toLocaleString()); //返回值和上面兩種一致

默認情況下,數組字符串都會以逗號隔開。如果使用join()方法,則可以使用不同的分隔符來構建這個字符串。

var box = [‘張三‘, 28, ‘計算機編程‘];

alert(box.join(‘|‘)); //張三|28|計算機編程

棧方法

ECMAScript數組提供了一種讓數組的行為類似於其他數據結構的方法。也就是說,可以讓數組像棧一樣,可以限制插入和刪除項的數據結構。棧是一種數據結構(後進先出),也就是說最新添加的元素最早被移除。而棧中元素的插入(或叫推入)和移除(或叫彈出),只發生在一個位置——棧的頂部。ECMAScript為數組專門提供了push()pop()方法。

push()方法可以接收任意數量的參數,把它們逐個添加到數組的末尾,並返回修改後數組的長度。而pop()方法則從數組末尾移除最後一個元素,減少數組的length值,然後返回移除的元素。

var box = [‘張三‘, 28, ‘計算機編程‘]; //字面量聲明

alert(box.push(‘湖南‘)); //數組末尾添加一個元素,並且返回長度

alert(box); //查看數組

box.pop(); //移除數組末尾元素,並返回移除的元素

alert(box); //查看元素

隊列方法

棧方法是後進先出,而列隊方法就是先進先出。列隊在數組的末端添加元素,從數組的前端移除元素。通過push()向數組末端添加一個元素,然後通過shift()方法從數組前端移除一個元素。

var box = [‘張三‘, 28, ‘計算機編程‘]; //字面量聲明

alert(box.push(‘湖北‘)); //數組末尾添加一個元素,並且返回長度

alert(box); //查看數組

alert(box.shift()); //移除數組開頭元素,並返回移除的元素

alert(box); //查看數組

ECMAScript還為數組提供了一個unshift()方法,它和shift()方法的功能完全相反。unshift()方法為數組的前端添加一個元素。

var box = [‘張三‘, 28, ‘計算機編程‘]; //字面量聲明

alert(box.unshift(‘猴頭‘,‘江蘇‘)); //數組開頭添加兩個元素

alert(box); //查看數組

alert(box.pop()); //移除數組末尾元素,並返回移除的元素

alert(box); //查看數組

PSIE瀏覽器對unshift()方法總是返回undefined而不是數組的新長度。

重排序方法

數組中已經存在兩個可以直接用來排序的方法:reverse()sort()

reverse() 逆向排序

var box = [1,2,3,4,5]; //數組

alert(box.reverse()); //逆向排序方法,返回排序後的數組

alert(box); //源數組也被逆向排序了,說明是引用

sort() 從小到大排序

var box = [4,1,7,3,9,2]; //數組

alert(box.sort()); //從小到大排序,返回排序後的數組

alert(box); //源數組也被從小到大排序了

sort方法的默認排序在數字排序上有些問題,因為數字排序和數字字符串排序的算法是一樣的。我們必須修改這一特征,修改的方式,就是給sort(參數)方法傳遞一個函數參數。這點可以參考手冊說明。

function compare(value1, value2) { //數字排序的函數參數

if (value1 < value2) { //小於,返回負數

return -1;

} else if (value1 > value2) { //大於,返回正數

return 1;

} else { //其他,返回0

return 0;

}

var box = [0,1,5,10,15]; //驗證數字字符串,和數字的區別

alert(box.sort(compare)); //傳參

PS:如果要反向操作,即從大到小排序,正負顛倒即可。當然,如果要逆序用reverse()更加方便。

操作方法

ECMAScript為操作已經包含在數組中的元素提供了很多方法。concat()方法可以基於當前數組創建一個新數組。slice()方法可以基於當前數組獲取指定區域元素並創建一個新數組。splice()主要用途是向數組的中部插入元素。

var box = [‘張三‘, 28, ‘湖北‘]; //當前數組

var box2 = box.concat(‘計算機編程‘); //創建新數組,並添加新元素

alert(box2); //輸出新數組

alert(box); //當前數組沒有任何變化

var box = [‘張三‘, 28, ‘湖北‘]; //當前數組

var box2 = box.slice(1); //box.slice(1,3)2-4之間的元素

alert(box2); //28,湖北

alert(box); //當前數組

splice中的刪除功能:

var box = [‘張三‘, 28, ‘湖南‘]; //當前數組

var box2 = box.splice(0,2); //截取前兩個元素

alert(box2); //返回截取的元素

alert(box); //當前數組被截取的元素被刪除

splice中的插入功能:

var box = [‘張三‘, 28, ‘湖南‘]; //當前數組

var box2 = box.splice(1,0,‘計算機編程‘,‘江蘇‘); //沒有截取,但插入了兩條

alert(box2); //在第2個位置插入兩條

alert(box); //輸出

splice中的替換功能:

var box = [‘張三‘, 28, ‘湖南‘]; //當前數組

var box2 = box.splice(1,1,100); //截取了第2條,替換成100

alert(box2); //輸出截取的28

alert(box); //輸出數組

JavaScript(第七天)