JS基礎知識回顧：參考型別（一）

標籤：java   color   com   使用   資料   string   

在ECMAScript中參考型別是一種資料結構，用於將資料和功能組織在一起，而對象時參考型別的一個執行個體。

儘管ECMAScript從技術上講是一門物件導向的語言，但它不具備傳統的物件導向語言所支援的類和介面等基本結構，所以雖然說參考型別與類看起來想死，但他們並不是相同的概念。

不過參考型別有的時候也可以被稱為對象定義，因為他們描述的是一類對象所具有的屬性和方法。

新對象是使用new操作符後跟一個建構函式來實現的，建構函式本身就是一個函數，只不過該函數時處於建立新對象的目的而定義的。

ECMAScript提供了很多原生參考型別，以便開發人員用來實現常見的計算任務。

 

Object是ECMAScript中使用最多的一個類型，雖然Object的執行個體不具備多少功能，但對於在應用程式中儲存和傳輸資料而言，它們確實是非常理想的選擇。

建立Object執行個體的方式有兩種：

使用new操作符後跟Object建構函式，例如：var person=new Object();person.name="Name";person.age=29;

還可以使用對象字面量標記法，需要注意的是利用對象字面量標記法表示對象時最後一個屬性後面不能添加逗號，否則在IE7及更早版本及Opera中會導致錯誤。

對象字面量是對象定義的一種簡寫形式，目的在於簡化建立包含大量屬性的對象的過程，例如：var person={name:"Name",age:29};

在使用對象字面量文法時，屬性名稱可以使用字串或數字，不過數字屬性名稱會被自動轉換為字串，例如：var person={"name":"Name","age":29,5=true}

在使用對象字面量文法時，如果留空花括弧，則可以定義值包含預設屬性和方法的對象，例如：var person={};//與new Object()相同 person.name="Name";person.age=29;

在通過對象字面量定義對象時，實際上並不會調用Object建構函式（Firefox2及之前的版本會調用，但Firefox3之後就不會了）。

在實際應用中，人們往往更傾向於使用對象字面量文法，因為這種文法要求的代碼量少，而且能夠給人封裝資料的感覺。

對象字面量也是向函數傳遞大量選擇性參數的首選方式，例如：

function displayInfo(args){

　　var output="";

　　if(typeof args.name=="string"){output+="Name:"+args.name+"\n";}

　　if(typeof args.age=="number"){output+="Age:"+args.age+"\n";}

　　alert(output);

}

displayInfo({name:"Nicholas",age:29});

displayInfo({name:"Greg"});

一般來說，訪問對象屬性時使用的都是點標記法，不過在JavaScript中也可以使用方括弧來表示訪問對象的屬性，例如：

alert(person.name);//"Nicholas"（除非必須使用變數來訪問屬性，否則建議使用點標記法）

alert(person["name"]);//"Nicholas"（方括弧標記法可以在方括弧中寫屬性名稱）

alert(person[propertyName]);//"Nicholas"（方括弧標記法也可以在方括弧中寫變數名）

person["first name"]="Nicholas";（在屬性名稱當中有空格等非字母數位字元時用點標記法會報錯，所以最好用方括弧標記法）

 

Array類型在ECMAScript中用來表示數組，與其他語言不同的是，ECMAScript數組的每一項可以儲存任何類型的資料，且數組的大小是可以動態調整的。

建立數組的基本方式有兩種：

第一種方式是使用Array建構函式，例如：var colors=new Array();

如果預Crowdsourced Security Testing道了數組的長度，也可以給建構函式傳遞該數量，而該數量會自動變成數組的length屬性的值，例如：var colors=new Array(20);

也可以像Array建構函式傳遞數組中應該包含的項，例如：var colors=new Array("red","blue","green");

當只給建構函式傳遞一個值時，如果該值是一個數字，則會按照該數值建立包含給定項數的數組，如果傳入的是其他類型的參數，則會建立包含那個值的只有一項的數組。

另外在建立Array建構函式時也可以省略new操作符，例如：var colors=Array(3);var names=Array("Greg");

第二種方式是使用數組字面量標記法，數組字面量由一對包含數組項的方括弧表示，多個數組項之間用逗號隔開，例如：

var colors=["red","blue","green"];//建立一個包含三個字串的數組

var names=[];//建立一個空數組

var values=[1,2,]//不建議使用，在IE8及之前版本會建立包含三個項目每項的值分別為1,2,undefined的數組，其他瀏覽器中會建立包含1,2兩項的數組

var options=[,,,,,]//不建議使用，在IE8及之前版本會建立包含六個undefined的數組，其他瀏覽器中會建立包含五個undefined的數組

由於IE的處理和其他瀏覽器不同，所以建議不要使用預設值的方式來建立數組。

與對象一樣，在使用數組字面量標記法時，也不會調用Array建構函式（Firefox3及之前版本除外）。

在讀取和設定數組的值時，要使用方括弧並提供相應的基於0的數字索引，例如：

var colors=["red","blue","green"];//建立一個有三個字串的數組

var names=[];//建立一個空數組

alert(colors[0]);//顯示第一項（索引小於數組中的項數，則返回對應項的值）

colors[2]="black";//修改第三項

colors[3]="brown";//新增第四項（索引超出現有項數，則數組會自動增加到該索引值加1的長度）

alert(colors.length);//3（初始情況下，該數組當中有三個值）

alert(names.length);//0

colors.length=2;//length屬性並不是唯讀，通過length屬性，可以從數組的末尾移除項目

alert(colors[2]);//undifined

colors.length=4;//length屬性並不是唯讀，通過length屬性，也可以向數組的末尾增添項目

alert(colors[3]);//undifined（新增的每一項都會去的undefined值）

colors[colors.length]="black";//在位置4添加一種顏色（數組最後一項的索引始終都是length-1，因此下一個新項的位置就是length）

colors[colors.length]="brown";//在位置5再添加一種顏色（每當在數組末尾添加一項後，其length屬性就會自動更新以反映這一變化）

colors[99]="pink";//當把一個值放在超出當前數組大小的位置上時，數組就會重新計算其長度值

alert(colors.length);//100（長度等於最後一項的索引加1）

數組最多可以包含4294967295項資料，如果想添加的項數超過這個上限值就會發生異常，而建立一個初始大小與這個上限值接近的數組，則可能會導致已耗用時間超長的指令碼錯誤。

 

確定某個對象是不是數組可以利用instanceof操作符來實現，例如：if(value instanceof Array){//某些操作}

但是由於instanceof操作符會假設只有一個全域執行環境，如果網頁中包含多個架構，那麼實際上就存在兩個以上不同的全域執行環境，從而存在兩個以上不同版本的Array建構函式。如果從一個架構向另外一個架構傳入一個參數，那麼傳入的數組就與在第二個架構中原生建立的數組分別具有各自不同的建構函式。

為瞭解決這個問題ECMAScript5中新增了Array.isArray()方法，這個方法的目的就是最終確定某個值到底是不是數組，而不管它是在哪個全域執行環境中建立的，例如：if(Array.isArray(value)){//某些操作}

支援該方法的瀏覽器有IE9+、Firefox4+、Safari5+、Opera10.5+、Chrome。

 

每個對象都具有toLocaleString()、toString()、valueOf()方法，這三種方法預設都會以逗號分隔的字串的形式返回數組項。

var colors=["red","blue","green"];//建立一個包含三個字串的數組

alert(colors.toString());//red,blue,green（調用toString()方法會返回由數組中每個值的字串形式拼接而成的以逗號隔開的字串）

alert(colors.valueOf());//red,blue,green（調用valueOf()方法會返回數組）

alert(colors);//red,blue,green（將數組直接傳遞給alert()，由於alert()要接收字串參數，所以會在後台調用toString()方法而得到與toString()相同的結果）

當調用toLocaleString()方法時，也會建立一個數組值的以逗號分隔的字串，而與前兩種方法不同的是，這一次為了取得每一項的值，調用的是每一項的toLocaleString()方法。

var person1={toLocaleString:function(){return "Nikolaos";},toString:function(){return "Nikolaos";}};

var person2={toLocaleString:function(){return "Grigorios";},toString:function(){return "Greg";}};

var people=[person1,person2];

alert(people);//Nikolaos,Greg

alert(people.toString());//Nikolaos,Greg

alert(people.toLocaleString());//Nikolaos,Gigorios

如果使用join()方法，可以用不同的分隔字元來構建數組字串，join()方法值接受一個用作分隔字元的字串作為參數，然後返回包含所有數組項的字串。

var color=["red","green","blue"];

alert(colors.join(","));//red,green,blue

alert(colors.join("||"));//red||green||blue

如果不給join()方法傳入任何值或者傳入undefined，則使用逗號作為分隔字元，IE7及更早版本會錯誤的使用字串"undefined"作為分隔字元。

如果數組中的某一項的值為null或者undefined，那麼該值在以上四種方法的返回結果中以Null 字元串表示。

 

ECMAScript數組也提供了一種讓數組的行為類似於其他資料結構的方法。

棧是一種LIFO（Last-In-First-Out，後進先出）的資料結構，而棧中項的插入（叫做推入）和移除（叫做彈出）值發生在棧的頂部。

ECMAScript中為數組提供了push()和pop()方法，用來實作類別似於棧的行為。

push()方法可以接受任意數量的參數，並把他們逐個添加到數組末尾，最後返回修改後的數組的長度。

pop()方法則從數組末尾移除最後一項，減少數組的length值，最後返回移除的項。

var colors=new Array();//建立一個數組

var count=colors.push("red","green");//推入兩項

alert(count);//2

count=colors.push("black");//推入另一項

alert(count);//3

var item=colors.pop();//取得最後一項

alert(item);//"black"

alert(colors.length);//2

隊列是一種FIFO（First-In-First-Out，先進先出）的資料結構，隊列在列表的末端添加項，從列表的前端移除項。

ECMAScript中提供了shift()方法，它能夠移除數組中的第一項並返回該項，同時將數組的項目減1。

結合使用shift()和push()方法，可以像使用隊列一樣使用數組。

var colors=new Array();//建立一個數組

var count=colors.push("red","green","black");//推入三項

alert(count);//3

var item=colors.shift();//取得第一項

alert(item);//"red"

alert(colors.length);//2

ECMAScript中還提供了unshift()方法，它能夠在數組前端添加任意個項並返回新數組的長度。

結合使用unshift()和pop()方法，可以從相反的方向來類比隊列。

var colors=new Array();//建立一個數組

var count=colors.unshift("red","green");//推入兩項

alert(count);//2

count=colors.unshift("black");//推入另一項

alert(count);//3

var item=colors.pop();//取得最後一項

alert(item);//"green"

alert(colors.length);//2

IE7及更早版本對JavaScript的實現中存在一個偏差，其中的unshift()方法總是返回undefined而不是數組的新長度，IE8在相容模式下回返回正確的長度值。

 

ECMAScript中的數組有兩個重新排序的方法：reverse()和sort()，他們返回的都是經過排序之後的數組。

reverse()方法會反轉數組項的順序，例如：var values=[1,2,3,4,5];values.reverse();alert(values);//5,4,3,2,1

sort()方法在預設情況下回按照升序排列數組項（最小的排在最前面，最大的排在最後面）。

為了實現排序，sort()方法會調用每個數組項的toString()轉型方法，然後比較得到的字串，以確定如何排序，例如：

var values=[0,1,5,10,15];values.sort();alert(values);//0,1,10,15,5（得到的是字串比較的結果）

由於這種排序方式在很多情況下都不是最佳的，因此sort()方法還可以接收一個比較函數作為參數，以便我們制定哪個值位於哪個值前面，例如：

function compare(value1,value2){if(value1<value2){return -1;}else if(value1>value2){return 1;}else{retrun 0;}}

var values=[0,1,5,10,15];values.sort(compare);alert(values);//0,1,5,10,15

也可以通過反轉比較函數中的傳回值來實現降序排列。

對於數實值型別或者其valueOf()方法會返回數實值型別的物件類型，可以使用更簡單的比較函數：function compare(value1,value2){return value2-value1;}

 

ECMAScript為操作應包含在數組中的項提供了很多方法。

concat()方法可以給予當前數組中的所有項建立一個新數組。

這個方法會先建立當前數組的一個副本，然後將接受到的參數添加到這個副本的末尾，最後返回新構建的數組。

在沒有給concat()方法傳遞參數的情況下，它只是賦值當前數組並返回副本。

如果傳遞給concat()方法的是一個或多個數組，則該方法會將這些數組的每一項都添加到結果數組中。

如果傳遞給concat()方法的是值而不是數組，這些值就會被簡單的添加到數組末尾。

var colors=["red","green","blue"];

var colors2=colors.concat("yellow",["black","brown"]);

alert(colors);//red,green,blue

alert(colors2);//red,green,blue,yellow,black,brown

slice()方法能夠基於當前數組中的一個或多個項建立一個新數組。

slice()方法可以接收一個或兩個參數，即要返回項的起始位置和結束位置。

在只有一個參數的情況下，slice()方法返回從該參數指定位置開始到當前數組末尾的所有項。

如果有兩個參數，slice()方法返回起始位置和結束位置之間但不包含結束位置所在項的所有項。

如果slice()方法的參數中有一個負數，則用數組長度加上該數來確定相應的位置。

如果傳入的參數中結束位置小於起始位置，則返回空數組。

var colors=["red","green","blue","yellow","purple"];

var colors2=colors.slice(1);

var colors3=colors.slice(1,4);

var colors4=colors.slice(-2,-1);

var colors5=colors.slick(4,1);

alert(colors2);//green,blue,yellow,purple

alert(colors3);//green,blue,yellow

alert(colors4);//blue

alert(colors5);//null

splice()方法的主要用途是向數組的中部插入項，這種方法有如下三種規則：

（刪除）如果給該方法傳入兩個參數，即要刪除的第一項的位置和要刪除的項數，則可以刪除自指定位置起的任意數量的項；

（插入）如果給該方法傳遞三個或三個以上的參數，即起始位置、0（要刪除的項數）和要插入的項，則可以向指定位置插入任意數量的項；

（替換）如果給該方法傳遞三個參數，即起始位置、要刪除的項數和要插入的任意數量的項（刪除數量和插入數量可以不相等），則可以向指定位置插入任意數量的項且刪除任意數量的項。

var colors=["red","green","blue"];

var removed=colors.splice(0,1);//刪除第一項

alert(colors);//green,blue

alert(removed);//red

removed=colors.splice(1,0,"yellow","orange");//從位置1開始插入兩項

alert(colors);//green,yellow,orange,blue

alert(removed);//返回一個空數組

removed=colors.splice(1,1,"red","purple");//從位置1開始刪除一項後插入兩項

alert(colors);//green,red,purple,orange,blue

alert(removed);//yellow

 

ECMAScript5為數組執行個體添加了兩個位置方法：indexOf()和lastIndexOf()。

這兩個方法都接受兩個參數：要尋找的項和表示尋找起點位置的索引（可選）。

其中，indexOf()方法從數組的開頭開始向後尋找，lastIndexOf()方法則從數組的末尾開始向前尋找。

這兩個方法都要返回要尋找的項在數組中的位置，或者在沒有找到的情況下回返回-1.

在比較第一個參數與數組中的每一項時，會使用全等操作符，且如果數組中有多個匹配項則只返回尋找到的第一個位置。

支援這兩種方法的瀏覽器有IE9+、Firefox2+、Safari3+、Opera9.5、Chrome。

 

ECMAScript5為數組定義了5個迭代方法，每個方法都接收兩個參數：要在每一項上啟動並執行函數和運行該函數的範圍對象（可選，影響this的值）。

傳入這些方法中的函數會接收三個參數：數組項的值、該項在數組中的位置和數組對象本身。

every()方法對數組中的每一項運行給定函數，如果該函數對每一項都返回true，則返回true。

some()方法對數組中的每一項運行給定函數，如果該函數對任一項返回true，則返回true。

filter()方法對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組。

map()方法對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。

forEach()方法對數組中的每一項運行給定函數，該方法沒有傳回值。

var numbers=[1,2,3,4,5,4,3,2,1];

var everyResult=numbers.every(function(item,index,array){return (item>2);});

alert(everyResult);//false

var someResult=numbers.some(function(item,index,array){return (item>2);});

alert(someResult);//true

var filterResult=numbers.filter(function(item,index,array){return (item>2);});

alert(filterResult);//[3,4,5,4,3]

var mapResult=numbers.map(function(item,index,array){return item*2;});

alert(mapResult);//[2,4,6,8,10,8,6,4,2]

numbers.forEach(function(item,index,array){//執行某些操作});

//forEach()方法只是對數組中的每一項運行傳入的函數，沒有傳回值，本質上與使用for迴圈迭代數組一樣

支援這些方法的瀏覽器有IE9+、Firefox2+、Safari3+、Opera9.5、Chrome。

 

ECMAScript5還新增了兩個歸併數組的方法：reduce()和reduceRight()。

這兩個方法都會迭代數組的所有項，然後構建一個最終返回的值。

其中，reduce()方法從數組的第一項開始逐個遍曆到最後，reduceRight()則從數組的最後一項開始向前遍曆到第一項。

這兩個方法都接受兩個參數：一個在每一項上調用的函數和作為歸併基礎的初始值（可選）。

傳給這兩個方法的函數接收四個參數：前一個值、當前值、項的索引和數組對象。

這個函數返回的值會作為第一個參數自動傳給下一項，第一次迭代發生在數組的第二項上。

使用這兩個方法當中的哪一個完全取決於從哪頭開始遍曆數組，初次之外他們完全相同。

var values=[1,2,3,4,5];

var sum=values.reduce(function(prev,cur,index,array){return prev+cur;});

alert(sum);//15

var sum2=values.reduceRight(function(prev,cur,index,array){return prev+cur;});

alert(sum2);//15

支援這兩種方法的瀏覽器有IE9+、Firefox2+、Safari3+、Opera9.5、Chrome。