Array類型
除了Object之外,Array類型恐怕是ECMAScript中最常用的類型了。ECMAScript數(shù)組的每一項可以保存任何數(shù)據(jù)類型的數(shù)據(jù)。ECMAScript數(shù)組的大小是可以動態(tài)調整的,即可以隨著數(shù)據(jù)的添加自動增長以容納新數(shù)據(jù)。
創(chuàng)建數(shù)組的基本方式有兩種。第一種是使用Array構造函數(shù),如:
var color = new Array();
var color = new Array(20); //length值為20的數(shù)組
var color = new Array("red", "blue", "green");
var colors = new Array(3); //創(chuàng)建一個包含3項的數(shù)組
var names = new Array("Icey"); //創(chuàng)建一個包含1項,即字符串"Icey"的數(shù)組
在使用Array構造函數(shù)是也可以省略new操作符。如:
var colors = Array(3); //創(chuàng)建一個包含3項的數(shù)組
var names = Array("Icey"); ///創(chuàng)建一個包含1項,即字符串"Icey"的數(shù)組
創(chuàng)建數(shù)組的第二種基本方式是使用數(shù)組字面量表示法。如:
var colors = ["red", "blue", "green" ];
var names = [];
var values = [1, 2, ]; //不要這樣,這樣會創(chuàng)建一個包含2或3項的數(shù)組
var values = [,,,,,,];//不要這樣,這樣會創(chuàng)建一個包含5或6項的數(shù)組
使用數(shù)組字面量表示法時,也不會調用Array構造函數(shù)。
var colors = ["red", "blue", "green" ];
alert(colors[0]);
colors[2] = "black";
colors[3] = "brown";
數(shù)組的項數(shù)保存在其length屬性中,這個屬性始終會返回0或更大的值,如:
var colors = ["red", "blue", "green" ];
var names = [];
alert(colors.length); //3
alert(names.length); //0
數(shù)組的length屬性很有特定——它不是只讀的。因此,通過設置這個屬性,可以從數(shù)組的末尾移除項或項數(shù)組中添加新項。如:
var colors = ["red", "blue", "green"];
colors.length = 2;
alert(colors[2]); //undefined
var colors = ["red", "blue", "green"];
colors.length = 4;
alert(colors[3]); //undefined
利用 length屬性也可以方便的在數(shù)組末尾添加新項,如:
var colors = ["red", "blue", "green"];
colors[colors.length] = "black";
alert(colors[colors.length]); //"black"
由于數(shù)組最后一項的索引值始終是length-1,因此下一個新項的位置就是length。
var colors = ["red", "blue", "green"];
colors[99] = "black";
alert(colors.length); //100
- **1. 檢測數(shù)組 **
方法一:
if (value instanceof Array) {
//對數(shù)組執(zhí)行某些操作
}
方法二:
if(Array.isArray(value)){
//對數(shù)組執(zhí)行某些操作
}
- **2. 轉換方法 **
所有對象都具有toLocalString()、toString()和valueOf()方法。其中,調用toString()方法會返回有數(shù)組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。而調用valueOf()方法返回的還是數(shù)組。實際上,為了創(chuàng)建這個字符串會調用數(shù)組每一項的toString()方法。如:
var colors = ["red", "blue", "green"];
alert(colors.toString()); //red,bule,green
alert(colors.valueOf()); //red,blue,green
alert(colors); //red,blue,green
由于alert()要接收字符串參數(shù),所以它會在后臺調用toString()方法,由此會得到與直接調用toString()方法相同的結果。
var person1 = {
toLocaleString : function () {
return "Icey";
},
toString : function(){
return "icey";
}
};
var person2 = {
toLocaleString: function(){
return "Root";
},
toString : function(){
"root";
}
};
var people = [person1, person2];
alert(people); //icey,root
alert(people.toString); //icey,root
alert(people.toLocaleString); //Icey,Root
***join()方法***
var colors = ["red", "green", "blue"];
alert(colors.join(",")); //red,green,blue
alert(colors.join("||")); //red||green||blue
- **3. 棧方法 **
棧是一種后進先出的數(shù)據(jù)結構,棧中項的插入和移除只發(fā)生在棧頂。ECMAScript為數(shù)組專門提供了**push()**和**pop()**方法,以便實現(xiàn)類似棧的數(shù)據(jù)結構。
push()方法可以接收任意數(shù)量的參數(shù),把它們逐個添加到數(shù)組末尾,并返回**修改后數(shù)組的長度**。
pop()方法從數(shù)組末尾移除最后一項,減少數(shù)組的length值,返回返回**移除的項**。
var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.push("blue");
alert(count); //3
var item = colors.pop();
alert(item); //"blue"
alert(colors.length); //2
可以將棧方法與其他數(shù)組方法連用,如:
var colors = ["red", "blue"];
colors.push("green");
colors[3] = "black";
alert(colors.length); //4
var item = colors.pop();
alert(item); //"black"
- **4. 隊列方法 **
隊列的數(shù)據(jù)結構的訪問規(guī)則是先進先出。隊列在列表的末端添加項,從列表的前端移除項。
push()方法向數(shù)組末端添加項,使用shift()方法從數(shù)組前端取得項。
shift()它能夠移除數(shù)組中的第一個項并返回該項,同時將數(shù)組長度減1.結合使用push()和shift(),可以像使用隊列一樣使用數(shù)組。
var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.push("blue");
alert(count); //3
var item = colors.shift();
alert(item); //red
alert(colors.length); //2
ECMAScript 還提供了unshift()方法,顧名思義,unshift()與shift()的用途相反:它能在數(shù)組前端添加任意個項并返回數(shù)組的長度。因此,同時使用unshift()和pop()方法,可以從相反的方向來模擬隊列,即在數(shù)組的前端添加項,從數(shù)組末端移除項,如:
var colors = new Array();
var count = colors.unshift("red", "green");
alert(count); //2
count = colors.unshift("blue");
alert(count); //3
var item = colors.pop();
alert(item); //green
alert(colors.length); //2
- **5. 重排序方法 **
數(shù)組中已經存在兩個可以直接用來直接重排序的方法:**reverse()**和**sort()**。
- reverse()方法反轉數(shù)組項的順序
var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1
- sort()方法,默認情況下按升序排列數(shù)組——即最小值位于最前面,最大值位于最后面。為了實現(xiàn)排序,sort()方法會調用每個數(shù)組項的toString()轉型方法,然后比較得到的字符串,以確定如何排序。即使數(shù)組中的每一項都是數(shù)值,sort()方法比較的也是字符串,如:
var values = [0, 1, 5, 10, 15];
values.sort();
alert(values); //0,1,10,15,5
sort()方法可以接收一個比較函數(shù)作為參數(shù)。
比較函數(shù)接收兩個參數(shù),如果第一個參數(shù)應該位于第二個之前則返回一個負數(shù),如果兩個參數(shù)相等則返回0,如果第一個參數(shù)應該位于第二個參數(shù)之后則返回一個正數(shù)。如:
function compare(value1, value2) {
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15
也可以通過比較函數(shù)產生降序結果,如:
function compare(value1, value2) {
if(value1 < value2){
return 1;
}else if(value1 > value2){
return -1;
}else{
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //15,10,5,1,0
對于數(shù)值類型或者其valueOf()方法會返回數(shù)值類型的對象類型,可以使用一個更簡單的比較函數(shù)。
function compare(value1, value2) {
return value2 - value1;
}
- **6. 操作方法 **
ECMAScript 為操作已經包含在數(shù)組中的項提供了很多方法。
- **concat()**方法:可以基于當前數(shù)組中的所有項創(chuàng)建一個新數(shù)組。具體來說,這個方法會先創(chuàng)建當前數(shù)組的一個副本,然后將接收到的參數(shù)添加到這個副本的末尾,最后返回新構建的數(shù)組。在沒有給concat()方法傳遞參數(shù)的情況下,它只是復制當前數(shù)組并返回副本。
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()**方法:能夠基于當前數(shù)組中的一或多個項創(chuàng)建一個新數(shù)組。slice()方法可以接受一個或兩個參數(shù),即要返回項的起始和結束位置。在只有一個參數(shù)的情況下,slice()方法返回從該參數(shù)指定位置開始到當前數(shù)組末尾的所有項。如果有兩個參數(shù),該方法返回起始和結束位置之間的項——但不包括結束位置的項。slice()方法不會影響原始數(shù)組。如:
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
如果slice()方法中有一個負數(shù),這用數(shù)組長度加上該數(shù)來確定相應的位置。如果結束位置小于起始位置,則返回空數(shù)組。
- **splice()**方法:
- 刪除:可以刪除任意數(shù)量的項,只需要指定兩個參數(shù):要刪除的第一項的位置和要刪除的項數(shù)。如:splice(0,2)會刪除數(shù)組中的前兩項。
- 插入:可以向指定位置插入任意數(shù)量的項,只需提供3個參數(shù):起始位置、0(要刪除的項數(shù))和要插入的項。例如:splice(2,0,"red","green")會從當前數(shù)組的位置2開始插入字符串"red","green".
- 替換:可以向指定位置插入任意數(shù)量的項,且同時刪除任意數(shù)量的項,只需提供3個參數(shù):起始位置、要刪除的項數(shù)和要插入的任意數(shù)量的項。例如:splice(2,1,"red","green")。
splice()方法始終都會返回一個數(shù)組,該數(shù)組中包含從原始數(shù)組中刪除的項(如果沒有刪除任何項,則返回一個空數(shù)組)。
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");
alert(colors); //green,yellow,orange,blue
alert(removed); //返回一個空數(shù)組[]
removed = colors.splice(1,1,"red","purple");
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow
- **7.位置方法 **
ECMAScript5為數(shù)組添加兩個位置方法:**indexOf()**和**lastIndexOf()**。這兩個方法都接收兩個參數(shù):要查找的項和(可選的)表示查找起點位置的索引。其中,indexOf()方法從數(shù)組的開頭(位置0)開始向后查找,lastIndexOf()方法則從數(shù)組的末尾開始向前查找。
這兩個方法都返回要查找的項在數(shù)組中的位置,或者在沒有的情況下返回-1比較是使用全等操作符(===)。
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4,4)); //5
alert(numbers.lastIndexOf(4,4)); //3
var person = {name : "Icey"};
var people = [{name : "Icey"}];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0
- **8. 迭代方法 **
ECMAScript5為數(shù)組定義了5個迭代方法。每個方法都有兩個參數(shù):要做每一項上運行的函數(shù)和(可選的)運行該函數(shù)的作用域對象——影響this的值。傳入這些方法中的函數(shù)會接收三個參數(shù):數(shù)組項的值、該項在數(shù)組中的位置和數(shù)組對象本身。根據(jù)使用的方法不同,這個函數(shù)執(zhí)行后的返回值可能會也可能不會影響方法的返回值。以下是5個迭代方法的作用。
- every():對數(shù)組中每一項運行給定函數(shù),如果該函數(shù)對每一項都返回true,則返回true。
- filter():對數(shù)組中每一項運行給定函數(shù),返回該函數(shù)會返回true的項組成的數(shù)組。
- forEach():對數(shù)組中每一項運行給定函數(shù)。這個方法沒有返回值。
- ma():對數(shù)組中每一項運行給定函數(shù),返回每次函數(shù)調用的結果組成的數(shù)組。
- some():對數(shù)組中每一項運行給定函數(shù),如果該函數(shù)對任一項返回true,則返回true。
以上方法都不會修改數(shù)組中的包含的值。
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 (itme>2);
});
alert(someResult); //true
var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function (item,index,array) {
return (item>2);
});
alert(filterResult); //[3,4,5,4,3]
var numbers = [1,2,3,4,5,4,3,2,1];
var mapResult = numbers.map(function (item,index,array) {
return item*2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function (item,index,array) {
//執(zhí)行某些操作
})
- **9. 歸并方法 **
ECMAScript5 還新增了兩個歸并數(shù)組的方法:**reduce()**和**reduceRight()**。這倆個方法都會迭代數(shù)組的所有項,然后構建一個最終返回的值。reduce()方法從數(shù)組第一項開始,逐個遍歷到最后。reduceRight()從數(shù)組最好一項開始,向前遍歷到第一項。
這兩個方法都接收兩個參數(shù):一個在每一項上調用的函數(shù)和(可選的)作為歸并基礎的初始值。傳給reduce()和reduceRight()的函數(shù)接收4個參數(shù):前一個值,當前值,項的索引和數(shù)組對象。這個函數(shù)返回的任何值都會最為第一個參數(shù)自動傳給下一項。第一次迭代發(fā)生在數(shù)組的第二項上,因此第一個參數(shù)是數(shù)組的第一項,第二個參數(shù)是數(shù)組的第二項。
var values = [1,2,3,4,5];
var sum = values.reduce(function (prev,cur,index,array) {
return prev+cur;
})
alert(sum); //15
var values = [1,2,3,4,5];
var sum = values.reduceRight(function (prev,cur,index,array) {
return prev+cur;
})
alert(sum); //15