JavaScript之?dāng)?shù)組（Array）詳解
ECMAScript的數(shù)組與其他語言中的數(shù)組有著相當(dāng)大的區(qū)別。雖然ECMAScript中的數(shù)組也是有序列表，但是它數(shù)組你的每一項可以保存任何類型的數(shù)據(jù)。ECMAScript數(shù)組的大小是可以動態(tài)調(diào)整的。
創(chuàng)建數(shù)組的基本方式有兩種。第一種是使用Array構(gòu)造函數(shù)，如下所示：
var colors = new Array();
如果知道數(shù)組要保存的項目數(shù)量，也可以給構(gòu)造函數(shù)傳遞參數(shù)，而該參數(shù)會自動變成length屬性的值，如下：
var colors = new Array(20);
也可以向Array構(gòu)造函數(shù)中傳遞數(shù)組中應(yīng)包含的項，如下代碼所示：
var colors = new Array("red","blue");
另外，使用Array構(gòu)造函數(shù)時也可以省略new操作符，如下所示：
var colors = Array(20);
創(chuàng)建數(shù)組的第二種方式是使用數(shù)組字面量表示法。數(shù)組字面量由一對包含數(shù)組項的方括號表示，多個數(shù)組項之間用逗號隔開，如下所示：
var color = ["red","blue"];
var names = [];
var values = [1,2,]//IE8及之前3項，其他2項，不建議使用
與對象一樣，在使用數(shù)字字面量表示法時，也不會調(diào)用Array的構(gòu)造函數(shù)。
在讀取和設(shè)置數(shù)組的值時，要使用方括號并提供相應(yīng)值的基于0的數(shù)字索引，如下所示：
var colors = ["red","blue"]; //定義數(shù)組
alert(colors[0]); //red
colors[1] = "black" //修改第2項
colors[2] = "brown" //新增第3
數(shù)組的項數(shù)保存在其length屬性中，這個屬性始終會返回0或更大的數(shù)字，如下所示：
var colors = ["red","blue"]; //定義數(shù)組
var names=[];
alert(colors.length); //3
alert(names.length) //0
值得注意的是，數(shù)組的length值不是只讀的。因此，通過設(shè)置此值，可以從數(shù)組的末尾移出項或向數(shù)組添加項，如下：
var colors = ["red","blue"];
colors.length = 1;
alert(colors[1]); //undefined
利用length屬性也可以方便的向數(shù)組末尾添加數(shù)據(jù)：
var colors = ["red","blue"];
colors[colors.length] = "black"; //在位置2新增
colors[colors.length] = "brown"; //在位置3新增
1、檢測數(shù)組
對于一個網(wǎng)頁或一個全局作用域而言，使用instanceof操作符可以做到：
if(value instanceof Array){
// 執(zhí)行操作
}
instanceof操作符局限性在于全局作用域，如果網(wǎng)頁包含多個框架，就存在兩個以上的全局執(zhí)行環(huán)境。為了解決這個問題，ECMAScript5新增了Array.isArray()方法，使用如下：
if(Array.isArray(value)){
// 執(zhí)行操作
}
2、轉(zhuǎn)化方法
調(diào)用數(shù)組的toString()方法會返回由數(shù)組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。而調(diào)用valueOf()返回還是數(shù)組。如下所示：
var colors = ['red', 'blue', 'green'];
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors) //red,blue,green
數(shù)組繼承的toLocalString()、tiString()和valueOf()方法，在默認情況下都會以逗號分隔符的字符串形式返回數(shù)組項。而如果使用join()方法，則可以使用不同的分隔符來構(gòu)建這個字符串。join()方法只接受一個參數(shù)，即用作分隔符的字符串，如下所示：
var colors = ['red', 'blue', 'green'];
alert(colors.join(',')); //red,blue,green
alert(colors.join('|')); //red|blue|green
如果數(shù)組中的某一項值為null或者undefied，那么該值在join()、toLocalString()、tiString()和valueOf()方法返回結(jié)果以空字符串表示。
3、棧方法
Javascript專門為數(shù)組提供了push()和pop()操作，以便實現(xiàn)類似棧的行為。
push()方法可以接收任意數(shù)量的參數(shù)，把他們逐個添加到數(shù)組末尾，并返回修改后數(shù)組的長度。pop()方法則從數(shù)組末尾溢出最后一項，減少數(shù)組的length值，然后返回移出的項。
var colors = new Array(); //定義數(shù)組
var count = colors.push("red", "blue"); //壓入兩項
alert(count); //2
count = colors.push("black"); //壓入另一項
alert(count); //3
var item = colors.pop(); //彈出最后一項
alert(item); //"black"
alert(colors.length); //2
4、隊列方法
棧數(shù)據(jù)結(jié)構(gòu)的訪問規(guī)則是LIFO(后進先出)，而隊列的訪問規(guī)則是FIFO（先進先出）。隊列在列表末端添加項，在前端移出項。
shift()方法能夠移除數(shù)組中的第一項，并返回該項，數(shù)組的length-1。結(jié)合push()和shift()方法，可以像使用隊列一樣使用數(shù)組，如下所示：
var colors = new Array();
var count = colors.push("red", "blue");
count = colors.push("black");
alert(count);
var item = colors.shift(); //取得第一項
alert(item); //"red"
alert(color.length); //2
ECMAScript還為數(shù)組提供了unshift()方法。unshift()和shift()方法用途相反：它在數(shù)組前端添加任意個項并返回新數(shù)組的長度。因此，同時使用unshift()和shift()方法，可以從相反方向來模擬隊列，即在數(shù)組前端添加新項，從數(shù)組末端移出項，如下所示：
var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.unshift("black"); //推入另一項
alert(count); //3
var item = colors.pop(); //取得最后一項
alert(item) //green
alert(colors.length) //2
5、重排序方法
數(shù)組中已經(jīng)存在兩個可以直接用來重排序的方法：reverse()和sort()。reverse()方法會按照反轉(zhuǎn)數(shù)組項的排序。
var values = [2, 1, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1
默認情況下，sort()方法按照升序排列數(shù)組項，調(diào)用每一項的toString()方法，比較字符串，以確定如何排序。即使數(shù)組中的每一項都是數(shù)值，sort()方法比較的都是字符串。
var values = [12, 11, 3, 4, 5];
values.sort();
alert(values); //12,11,3,4,5
我們可以通過一個比較函數(shù)當(dāng)作參數(shù)傳遞給sort()方法。如下：
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
6、操作方法
ECMAScript為操作在數(shù)組中提供了很多方法。其中，concat()方法可以基于當(dāng)前數(shù)組中的所有項創(chuàng)建一個新數(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()方法，它能夠基于當(dāng)前數(shù)組的一個項或多個項創(chuàng)建新數(shù)組，它可以接收一個或兩個參數(shù)，即要返回項的起始和結(jié)束位置。一個參數(shù)時，返回該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項。兩個參數(shù)則返回起始到指定位置的所有項——不包括結(jié)束位置的項。注意，slipe()方法不影響原始數(shù)組。
var colors=["red","green","blue","black","brown"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2); //green,blue,black,brown
alert(colors3); //green,blue,black
slice()方法刪除：可以刪除任意數(shù)量的項，只需指定2個參數(shù)：要刪除的第一項的位置和要刪除的項數(shù)。
slice()方法插入：可以向指定位置插入任意數(shù)量的項，只需提供3個參數(shù)：起始位置、0（要刪除的項數(shù)）和要插入的項。
slipe()方法替換：可以項指定位置插入任意數(shù)量的項，且同時刪除任意數(shù)量的項，只需指定3個參數(shù)：起始位置、要刪除的項數(shù)和要插入的任意數(shù)量的項。
var colors = ["red", "green", "blue"];
//刪除
var removed = colors.slice(0, 1); //刪除第1項
var colors3 = colors.slice(1, 4);
alert(colors); //green,blue
alert(removed); //red
//插入
removed = colors.slice(1, 0，"yellow","orange"); //從位置1開始插入
alert(colors); //green,yellow,orange,blue
alert(removed); //空數(shù)組
//替換
removed = colors.slice(1, 1,"red","purple"); //從位置1開始插入
alert(colors); //green,"red","purple",orange,blue
alert(removed); //"yellow"
7、位置方法
ECMAScript5為數(shù)組提供了兩個位置方法：indexOf()和lastIndexOf()。這兩個方法都接收兩個參數(shù)：要查找的項和表示查找起點位置的索引（可選）。其中indexOf()方法從數(shù)組的開頭開始先后查找，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
8、迭代方法
ECMAScript5為數(shù)組定義了5個迭代方法。每個方法都接受兩個參數(shù)，第一個是進行迭代的函數(shù)，第二個是該函數(shù)的作用域?qū)ο蟆究蛇x】。
進行迭代的函數(shù)接受三個參數(shù)，第一個是數(shù)組中要進行迭代的元素的值，第二個是數(shù)組候總要進行迭代的元素的位置，第三個是迭代數(shù)組本身。
1. every() 對數(shù)組中的每一項運行給定的函數(shù)，如果該函數(shù)對每一項都返回true，則返回true
2. filter() 對數(shù)組中的每一項運行給定的函數(shù)，返回該函數(shù)返回true的項組成的數(shù)組。
3. forEach() 對數(shù)組中的每一項運行給定的函數(shù)，這個方法沒有返回值 4. map() 對數(shù)組中的每一項運行給定的函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組
5. some() 對數(shù)組中的每一項運行給定的函數(shù)，如果該函數(shù)對任意一項返回true，則返回true
這些迭代方法支持的瀏覽器有，IE9+，F(xiàn)irefox2+，Safari3+，Opera 9.5+，chrome
在這些方法中，最相似的是every()和some()，它們都是用于查詢數(shù)組中的項是否滿足某個條件。對every()來說，傳入的函數(shù)必須對每一項都返回true，這個方法才返回true;否則，他就返回false。而some()方法則是只要傳入的函數(shù)對數(shù)組中某一項返回true，就返回true。
var num = [1,2,3,4,5,6,7,8,9];
var everyResult = num.every(function(item, index, array) {
if(item > 2) {
return true;
}
});
alert(everyResult); //false
var someResult = num.some(function(item) {
if(item > 2) {
return true;
}
});
alert(someResult); //true
filter()是利用指定的函數(shù)確定是否在返回的數(shù)組中包含某一項。
var num = [1,2,3,4,5,4,3,2,1];
var filterResult = num.filter(function(item) {
if(item > 2) {
return true;
}
});
alert(filterResult); //[3,4,5,4,3]
map()也返回一個數(shù)組，而這個數(shù)組的每一項都是在原始數(shù)組中的對應(yīng)項上運行傳入函數(shù)的結(jié)果。
var num = [1,2,3,4,5,4,3,2,1];
var mapResult = num.map(function(item) {
if(item > 2) {
return true;
}
}); //[2,3,6,8,10,8,6,4,2]
forEach()是對數(shù)組中的每一項運行傳入的函數(shù)。這個方法沒有返回值，本質(zhì)上與使用for循環(huán)迭代數(shù)組一樣。
var num = [1,2,3,4,5,4,3,2,1];
num.forEach(function(item) {
// 執(zhí)行操作
});
9、歸并方法
ECMAScript5中新增了兩個方法：reduceRight() 和 reduce()。這兩個方法都接受兩個參數(shù)：第一個是用來迭代的數(shù)組的函數(shù)，這個函數(shù)有四個參數(shù)分別是，前一個值，當(dāng)前值，項的索引，數(shù)組對象。然而這個函數(shù)的任何值都會作為第一個參數(shù)自動傳給下一項。第二個是作為第一個函數(shù)中第一個參數(shù)的初始值 。
var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array) {
return prev + cur;
});
alert(sum);//15
相關(guān)文章
這篇文章主要介紹了JavaScript中的Hoisting機制,涉及到JS中變量聲明的相關(guān)問題,需要的朋友可以參考下2015-08-08
javascript中call()、apply()的區(qū)別
這篇文章主要介紹了javascript中call()、apply()的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
在這篇文章中，我將會回顧一下js模塊化編程的基礎(chǔ)，并且將會講到一些真的非常值得一提的進階話題，包括一個我認為是我自創(chuàng)的模式。2014-12-12
javascript unicode與GBK2312(中文)編碼轉(zhuǎn)換方法
本文提供了一個javascript的unicode與GBK2312編碼相互轉(zhuǎn)換的方法，大家可以參考使用，實用的小實例2013-11-11
getElementById().innerHTML與getElementById().value的區(qū)別
這篇文章主要介紹了getElementById().innerHTML與getElementById().value的區(qū)別,因為經(jīng)常有新手朋友問到，特整理一下，需要的朋友可以參考下2016-10-10
javascript之typeof、instanceof操作符使用探討
typeof和instanceof這兩個操作符時不時就會用到，堪稱必用，這兩個操作符或許是javascript中最大的設(shè)計缺陷，因為幾乎不可能從他們那里得到想要的結(jié)果2013-05-05
Javascript學(xué)習(xí)筆記1 數(shù)據(jù)類型
在Javascript中只有五種簡單類型，分別為null,undefined,boolean,String和Number.一種復(fù)雜類型：object。2010-01-01
JavaScript中關(guān)于indexOf的使用方法與問題小結(jié)
indexOf方法的作用是：根據(jù)給定參數(shù)x返回目標(biāo)字符串(可以看成字符的數(shù)組)或數(shù)組中與x相等的項的索引。2010-08-08
詳解JavaScript正則表達式中的global屬性的使用
這篇文章主要介紹了詳解JavaScript正則表達式中的global屬性的使用,是JS學(xué)習(xí)進階中的重要知識點,需要的朋友可以參考下2015-06-06
Javascript基礎(chǔ)教程之定義和調(diào)用函數(shù)
這篇文章主要介紹了Javascript基礎(chǔ)教程之定義和調(diào)用函數(shù)的相關(guān)資料,需要的朋友可以參考下2015-01-01