目錄前端
小夥伴們看了一下目錄是否是有點惶恐不安啊,10個目錄,不要慌接下來回簡介19個Array的方法和幾個檢查數據類型、建立數組的方法,那也不要怕」有司機帶路「 哈哈,廢話不說看下文java
前言
除了Object以外,Array類型恐怕是ECMAScript中最經常使用的類型了。並且,ECMAScript中的數組與其餘多數語言中的數組有着至關大的區別。ECMAScript數組的每一項能夠保持任何類型的數據。也就是說,能夠用數組的第一個位置來保持字符串,用第二個位置來保存數值,用第三個位置保存對象,以此類推。並且,ECMAScript數組的大小是能夠動態調整的,便可以隨着數據的添加自動增加以容納新增數據。ios
建立方式
數組的建立方式由兩種。第一中是使用Array構造函數,以下chrome
var colors = new Array();
複製代碼
若是預選知道數組要保存的項目數量,也能夠給構造函數傳遞該數量,而該數量會自動變成length屬性的值。例如,下面的代碼將建立length值爲20的數組編程
var colors = new Array(20);
複製代碼
也能夠向Array構造函數傳遞數組中應該包含的項,如下代碼建立了一個包含3個字符串值的數組:後端
var colors = new Array('red','blue','green');
複製代碼
固然,給構造函數傳遞一個值也能夠建立數組。但這時候問題就複雜一點了,由於若是傳遞的是數值,則會按照該數值建立包含給定項的數組;而若是傳遞的是其餘類型的參數,則會建立包含那個值只有一項的數組。看下面的例子數組
var colors = new Array(3);//建立一個包含三項的數組
var names = new Array('Greg');//建立一個包含1項,及字符串‘Greg’的數組
複製代碼
另外,在使用Array構造函數的時候能夠省略new操做符。以下的例子,省略new操做符的結果相同瀏覽器
var colors = Array(3);// 建立一個包含三項的數組
var names = Array('Greg');//建立一個包含1項,及字符串‘Greg’的數組
複製代碼
第二種方式 建立數組的第二種基本方式是使用數組字面量表示法。數組字面量由一對函數組項的方括號表示,多個數值之間能夠逗號隔開。以下:bash
var colors = ['red','bule','green'];// 建立一個包含 3 個字符串的數組
var names = [];// 建立一個空數組
var values =[1,2,]// 不要這樣!這樣會建立一個包含 2 或 3 項的數組
var options = [,,,,,,]// 不要這樣!這樣會建立一個包含 5 或 6 項的數組
複製代碼
以上的代碼第一行建立一個包含3個字符串的數組。第二行使用一對空方括號建立一個空數組。帶三個展現了在數組字面量的最後一項添加逗號的結果:在IE8及如下的版本中,values會成爲一個包含3項的最後一項的值是undefined的數組;在其餘的瀏覽器中,values會成爲包含2項的數組。緣由是IE8以及以前的版本中的ECMAScript實現數組字面量方面存在bug。 因爲這個bug致使的另外一種狀況如最後一行代碼所示,改行代碼可能會建立包含5項的數組(在IE9+、Firefox、Opera、Safari和Chrome中),也有可能會建立6項數組(IE8以及以前)。在像這種省略值的狀況下,每一項都將得到undefained值;這個結果與調用的Array構造函數時傳遞項數在邏輯上是相同的。可是因爲IE的實現與其餘瀏覽器不一致,所以不建議使用這種語法。與對象同樣,在使用數組字面量表示法時,也不會調用Array構造函數(除了FireFox3以及更早的版本)
在讀取和設計數組的值時,要使用方括號並提供相應值的基於0的數字索引,以下:數據結構
var colors = ['red','blue','green'];// 定義一個字符串數組
alert(colors[0]);// 顯示第一項
colors[2]='black';// 修改第三項
colors[3]='brown';// 新增第四項
複製代碼
方括號的索引表示要訪問的值。若是索引小於數組中的項數,則返回對應的值,就像這個例子中的colors[0]會顯示‘red’同樣。設置數組的值也是相同的語法,但會替代指定位置的值。若是設置某個的索引超過了數組的項數,救贖例子中的colors[3]所示,數組會自動增長到該索引值加1的長度
數組的項數保存在其length屬性中,這個屬性始終會返回0或者更大的值,以下面這個例子所示:
var colors = ["red", "blue", "green"]; var names = [];
alert(colors.length); //3
alert(names.length);//0
複製代碼
數組length屬性頗有特色----它不是隻讀的。所以,經過設置這個屬性,能夠從數組的末尾移除項或者向數組中添加新項。請看下面的例子
var colors =['red','blue','green'];
colors.length = 2;
alert(colors[2])//"undefined"
複製代碼
這個例子中的數組colors一開始有3個值。將其length屬性設置爲2會移除最有一項(位置爲2的那一項),結果再訪問colors[2]就會顯示undefined了。若是將其length屬性設置爲大於該數組項的值,這是新增的每一項都會取得undefined值,以下
var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字符串的數組 colors.length = 4; alert(colors[3]); //undefined
複製代碼
在此,雖然colors數組只有3個項,但把它的length屬性設置成了4.這個數組不存在位置3,所訪問這個位置的值就是undefaind。
利用length屬性也能夠方便地在數組末尾添加新項,以下:
var colors = ['red','blue','green'];
colors[colors.length]='black';
cplors[colors.length]='brown';
複製代碼
因爲數組最後一項的索引始終是length-1,所以下一個新項就是length。每當在數組末尾天機一項後。其實length屬性就會自動更新,數組的length就是最後一項的索引加一。看下面代碼
var colors=['red','blue','green'];
colors[99]='black';
alert(colors.length);// "100"
複製代碼
這個例子中,咱們想colors數組的位置99插入一個值,結果數組新的長度是100,位置3到98實際上都是不存在的,因此訪問它們都會返回undfined。數組最多能夠包含42億多個項,幾乎已經知足任何編程需求,若是添加的項數超過了這個限制值,就會發生異常。而建立你一個初始化大小與這個上限接近的數組,則可能會致使運行時間超長的腳本錯誤。
檢測數組
自從ECMAScript3 作出規定之後,就出現了肯定某個對象是否是數組的經典問題。對於一個網頁,或者一個全局做用域而言,使用instanceof操做符就能獲得滿意的結果:
if(value instanceof Array){
//對數組執行某些操做
}
複製代碼
instanceof 操做符的問題在於,它假定只有一個全局執行環境。若是網頁中包含多個框架,那實際上存在兩個以上不一樣的全局執行環境,從而存在兩個以上不一樣的Array構造函數。若是你從一個框架向另外一個框架傳入一個數組,那麼傳入的數組與第二個框架的數組中原生建立的數組分別具備各自不一樣的構造函數。
爲了解決這個問題,ECMAScript5新增了Array.isArray()這個方法。這個方法的目的就是最終肯定某個值究竟是不是數組,而無論它是從哪一個全局環境建立的。這個方法的用法以下。
if(Array.isArray(value)){
// 對數組操做
}
複製代碼
支持Array.isArray()方法的瀏覽器有IE9+、FrieFox4+、Safari5+、Open 10.5+和chrome。
轉換方法
我們你們都知道全部的對象都具有有 toLocaleString()、toString()和valueOf方法。其中,調用數組的toString()方法會返回由數組中每一個值的字符串拼接而成的一個以逗號分隔的字符串。而調用valueOf()返回的仍是原數組。實際上,爲了建立這個字符串會調用數組每一項的toString()方法,看下面的這個例子。
var colors = ['red','blue','green'];
alert(colors.toString());//'red,blue,green'
alert(colors.valueOf())://'red,blue,green'
alert(colors);//'red,blue,green'
複製代碼
這裏咱們先顯示的調用了toString()方法,以便返回數組的字符串表示,每一個字符串表示拼接成了一個字符串,中間以逗號分隔。接着調用valueOf()方法,而最後一行代碼直接將數組傳遞給了alert()。因爲alert()要接受字符串參數,因此會在後臺調用toString()方法,由此會獲得與其直接調用toString()方法相同的結果。
另外,toLocaleString()方法常常會返回與toString()和valueOf()方法相同的值,但也不老是如此。當調用數組的toLocaleString()方法時,它也會建立一個數字值的以逗號分隔的字符串。而與前兩個方法惟一的不一樣之處在於,這一次爲了取得每一項的值,調用的是每一項的toLocaleString()的方法,而不是toString()方法。請看下面的例子。
var person1 = {
toLocaleString:()=>{
return :'Nikolaos';
},
toString:()=>{
return 'Nikolaos'
}
}
var person2 = {
toLocaleString:()=>{
return :'Grigorios';
},
toString:()=>{
return 'Greg'
}
}
var people = [person1,person2];
alert(people);//Nikolaos,Greg
alert(people.toString());//Nikolaos,Greg
alert(people.toLocaleString());//Nikolaos,Grigorios
複製代碼
這上面的例子中咱們定義了兩個對象:person1和person2.並且還分別爲每一個對象定義了一個toString()方法和toLocaleString()方法,這個兩個方法返回不一樣的值。而後,建立一個包含前定義的兩個對象的數組。將數組傳遞給alert()時,輸出結果是Nikolaos,Greg,由於調用數組每一項的toString()方法,一樣直接調用toString()的方法獲得結果相同。而當調用數組的toLocaleString方法時,輸出的結果是Nikolaos,Grigorios,緣由是調用了數組每項的toLocaleString()方法。
數組繼承的toLocaleString()、toString()和valueOf()方法,在默認狀況下都會以逗號分隔的字符串的形式返回數組項。而若是使用join方法,則可使用不一樣的分隔符來構建這個字符串,join()方法只接受一個參數,即用做分隔符的字符串,而後返回包含全部數組項的字符串。看下面的例子
var colors =['red','green','blue'];
alert(colors.join(','))//red,green,blue
alert(colors.join('||'));//red||green||blue
複製代碼
在這裏,咱們使用join方法重現了toString()方法的輸出。在傳遞逗號的狀況下,獲得以逗號分隔的數組值。而在最後一行代碼中,咱們傳遞了雙豎線符號,結果獲得字符串「red||green||blue」。若是不給join()傳遞參數,或者傳遞undefined,則使用逗號做爲分隔符。IE7及更早的版本會錯誤的使用字符串「undefinde」做爲分隔符。若是數組中某一項的值是null或者undefined,那麼該值在join()、toString()、toLocaleString()和valueOf()方法返回的結果中以空字符串表示。
棧方法
ECMAScript數組也提供一種讓數組的行爲相似於其餘數據結構的方法。具體來講,數組能夠表現的想棧同樣,後者是一種能夠限制插入和刪除項的數據夠。棧是一種LIFO(last in first out,新進後出)的數據結構,也就是最新添加的項最先被移除。而棧中項的插入(叫作推入)和移除,只發生在一個位置-----棧的頂部。ECMAScript爲數組專門提供push()和pop()方法,以便實現相似棧的行爲。 push()能夠接受任意參數,把它們逐個添加到數組的尾部,並返回當前數組最新的length,而pop則是移除數組末尾一項並減小當前數組的length,並返回移除的哪一項,看代碼
var colors = new Array();
var cunt = 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
複製代碼
以上代碼中的數組能夠看作棧(代碼自己沒有任何的區別,而pop()和push()都是數組默認的方法)。首先,咱們使用push()將兩個字符串推入數組的末尾,並返回的結果保存在變量count中(值爲2)。而後,再推入一個值,而結果仍然保存在count中。由於此時數組中包含3項,因此push()返回3.在調用pop()時,他們會返回數組的最後一項,即字符串「black」。此後,數組中僅剩兩項。
能夠將棧方法與其餘數組的方法連用,就像下面
var colors = ['red','blure'];
colors.push('brown');
colors[3] = 'black';
alert(colors.length);
var item = colors.pop();
alert(item)
複製代碼
在此咱們首先用兩個值來初始化這個數組。而後,使用push()添加第三個值,載經過直接在位置3上賦值來添加第四個值。而在調用pop()時,該方法返回了字符串「black」,即最後一個添加到數組的值。
隊列方法
棧數據結構的訪問規則是list in first out LIFO ,而隊列的數據結構的訪問規則是FIFO(first in first out,先進先出)。隊列在列表的末端添加項,從列表的前端移除項。因爲push()是項數組嗎,末端添加項的方法,所以要模擬隊列只需從一個數組前端取得項的方法。實現這一操做的數組方法就是shift(),它可以移除數組中的第一項並返回該項,同時將數組的長度減一。結合shift()和push()方法,能夠向使用隊列同樣使用數組。
var colors = new Array();
var count = colors.push('red','grreen');//2
alert(count);//2
count = colors.push('black');//3
alert(count);//3
var item = colors.shift();//'red'
alert(item);//red
alert(colors.length)//2
複製代碼
這個例子首先使用push()方法建立一個包含3中顏色名稱的數組。而後使用shift()方法從數組中取得了第一項,即‘red’。在移除第一項以後,‘green’就變成第一選項,‘black’就變成了第二項,數組也只包含兩項了。
ECMAScript 還爲數組提供了一個unshift()方法。顧名思義,unshift()與shift()的用途是相反的:它能在數組前端添加任意項並返回數組的長度。所以,同時使用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);
alert(colors.length);//2
複製代碼
這個例子建立了一個數組並屬於unshift()方法前後推入3個值。首先是‘red’和‘green’,而後是‘black’,數組中的順序是‘black’、‘red’、‘black’。在調用pop()方法時,移除並返回的是最後一項,及‘green’。IE7 及更早的版本對javaScript的實現中存在一個誤差,其中unshift()方法老是返回undefined而不是數組的新長度。IE8在非兼容模式下會返回正確的長度值
重排序方法
數組中已經存在兩個能夠直接用來從新排序的方法; reverse()和sort()。reverse()方法是反轉數組的順序
var arr = [1,2,3,4,5];
arr.reverse()
alert(arr)// 54321
複製代碼
數組初始化的時候是[1,2,3,4,5],通過reverse()方法處理後就變成了[5,4,3,2,1]。
在默認的狀況下,sort()的方法會按升序來排了數組的每一項------最小值在最前面,最大值排在數組的最後面。爲了實現排序,sort()方法會調用數組每一項的的toString()轉換方法,而後在比較獲得字符串,肯定如何排序,及時數組中的每一項都是數值,sort()方法比較的也是字符串,以下
var values = [0,1,5,10,15];
values.sort();
alert(values)//0,1,10,15,5
複製代碼
可見,及時例子中的未排序以前順序沒有問題,可是sort()方法也會根據測試字符串的結果改變原來的順序。由於數值5雖然小於10.但在進行字符串比較時,’10‘則位於’4‘的前面,因而數組的順序就被改變了,不用說,這種排序方式在不少狀況下都不是最佳方案。所以sort()方法能夠接受一個比較函數做爲參數,以便咱們定位那個值位於那個值的前面。
比較函數接受兩個參數,若是第一個參數應該位於第二個參數則返回一個負數,若是兩個參數相等則返回0,若是第一個參數應該位於第二個以後則返回正數,若是不排序就返回0.
function compare(value1,value2){
return value1-value2
}
var values = [0,5,1,18,15];
values.sort(compare);
alert(values)//0,1,5,15,18
複製代碼
固然若是想降序的,我們須要把compare的 return value1-value2換成 return value2-value1
function compare(value1,value2){
return value2-value1
}
var values = [0,5,1,18,15];
values.sort(compare);
alert(values)//18,15,5,1,0
複製代碼
固然我們也能夠在簡化一下上面的代碼
var values = [0,5,1,18,15];
values.sort((value1,value2){
return value2-value1
});
alert(values)//18,15,5,1,0
複製代碼
reverse()和 sort()方法的返回值是通過排序以後的數組。原數組也會放生改變
操做方法
ECMAScript爲了操做已經包含在數組中的項提供了不少的方法。其中,concat()方法能夠基於當數組中的全部項建立一個新數組。具體來講,原數組不改變,會建立一個新的數組副本,而後將接受的參數添加到這副本的末尾,最後返回新構建的數組。沒有給concat傳遞參數的就會建立當前數組的副本,若是傳遞給concat()方法的是一個或者多個數組,則該方法會將這些數組中的每一項都添加到結果的數組中。若是添加的不是數組,這些值就會被簡單的添加到結果數組的末尾。下面一個例子
var colors = ['red','green','blue'];
var colors2 = colors.concat('yellow',['black','brown']);
alert(colors); //red,green,blue
alert(coloes2);// red,green,blue,yellow,black,brown
複製代碼
concat(),使用的特色以下
能夠傳入多個參數
原數組不會發生改變
返回一個新的合併後的結果數組(copy的原數組+每項參數)
slice()方法,它可以基於當前數組中的一或者多項建立一個新的數組。slice()方法能夠接受一或者兩個參數,既要返回項的起始值和結束位置。在只有一個參數的狀況下,slice()方法會返回從該參數指定位置開始到當前數組末尾的全部項。若是有兩個參數,該方法返回起始位置和結束位置之間的項,可是不包含結束位置的項,slice()方法不會影響原始的數組。若是 slice()方法的參數中有一個負數,則用數組長度加上該數來肯定相應的位 置。例如,在一個包含 5 項的數組上調用 slice(-2,-1)與調用 slice(3,4)獲得的 結果相同。若是結束位置小於起始位置,則返回空數組看例子
var arr = [1,2,3,4,5,6,7,8];
var arr2 = arr.slice(1);
var carr3 = arr.slice(1,4);
var arr4 = arr.slice(-2,-1)===arr.slice(6,7);
var arr5 = arr.slice(-1,-2)
var arr6 = arr.slice(8,1)
var arr7 = arr.slice();
var arr8 = arr.slice(0);
alert(arr2) // 2,3,4,5,6,7,8
alert(arr3) // 2,3,4
alert(arr4) // 6
console.log(arr5) // []
console.log(arr6) // []
console.log(arr7) // [1,2,3,4,5,6,7,8]
console.log(arr8) // [1,2,3,4,5,6,7,8]
alert(arr) // 1,2,3,4,5,6,7,8
複製代碼
使用slice的特色
下面我們看看在數組最靈活而且最複雜的一個方法 splice(),它有不少種用途,splice主要用於向數組中途插入項,可是用這種方法的方式有下面三種
splice()方法始終都會返回一個數組,該數組中包含原始數組中刪除的項(若是美歐刪除任何項,則返回一個空的數組)。下面代碼針對增刪改的實例
var arr = [1,2,3,4,5]
var removed = arr.splice(0,1);//從位置0 開始刪除,刪除一項
alert(arr)// 2,3,4,5
alert(removed)// 1
removed = arr.splice(0,0,0,1)//
從位置0開始刪除,刪除0項,從位置0開始插入,插入兩項
alert(arr)//0,1,2,3,4,5
alert(removed)//''
removed = arr.splice(0,2,0,1,2)//
從位置0開始刪除,刪除0項,從位置0開始插入,插入兩項
alert(arr)//0,1,2,2,3,4,5
alert(removed)//0,1
複製代碼
位置方法
ECMAScript爲數組添加了兩個位置方法:indexOf()和lastIndexOf()。這兩個方法都接受兩個參數:要查找的項和(可選的)表示查找起點的索引。其中,indexOf()方法從數組的開頭(位置0)開始向後查找,lastIndexOf方法則從數組的末尾開始相前查找。
這兩個方法都返回要查找項在數組中的位置,或者沒有找到的狀況下返回-1.在比較第一個參數與數組中的每一項時,會使用全等於操做符;也就是說,要求查找的項必須嚴格相等(===),下面的例子
var number = [1,2,3,4,5,4,3,2,1];
alert(number.indexOf(4))//3
alert(number.lastIndexOf(4))//4
alert(number.indexOf(4,4))//4
alert(number.lastIndexOf(4,4))//3
var person = {name:'Nicholas'};
var people =[{name:'Nicholas'}];
var morePeople=[person];
alert(people.indexOf(person));//-1
alert(morePeople.indexOf(person));//0
複製代碼
使用indexOf()和lastIndexOf()方法查找特定項在數組中的位置很是簡單,支持它們的瀏覽器包含IE9+ Firefox2+ safari 3+ Opera9.5+和Chrome。
indexOf()方法的特色和屬性
迭代的方法
ECMAScript5 爲數組定義了5個迭代的方法。每一個方法都會有兩個參數;要在每一項上運行的函數和(可選的)運行該函數的做用域---影響this的值。傳入這些方法中的函數會接受三個參數;數組項的值、該項在數組中的位置,數組對象自己。根據使用的方法不一樣,這個函數執行後的返回值也是不一樣的,看下面五個方法的做用
以上的方法都不會修改原數組。 這些方法中最爲類似的是every()和some(),它們都用於查詢數組中的項是否知足某個條件。對every()來講,傳入的函數必須對沒一項都返回true,這個方法纔會返回true;不然,它們就會返回false。而some()方法則是隻要傳入函數對數組中的某一項返回true,就會返回true。
var numbers = [1,2,3,4,5,6,7];
var everyResult = numbers.every((item,index,arry)=>(item>2));
alert(everyResult);// false
var someResult = numbers.some((item,index,arr)=(item>2))
alert(someResult);//true
複製代碼
看一下 filter()方法,它利用指定的函數肯定是否在返回的數組中包含某一項。例如,要返回一個全部數值都大於2的數組,可使用一下代碼。
var numbers = [1,2,3,4,3,2,1];
var filterResult = numbers.filter((item,index,array)=>(item>2))
alert(filterReault);//[3,4,3]
複製代碼
map()方法也會返回一個數組,而這個數組的每一項都是在原始數組中的對於項上運行傳入函數的結果。例如,能夠給數組中的每一項乘以2,而後返回這些乘積的數組,以下所示。
var numbers = [1,2,3,4,5,6];
var mapRes = numbers.map((item,index,array)=>(item*2))
alert(mapRes);//[2,4,6,8,12]
複製代碼
forEach()方法,它只對是對象數組中的每一項運行傳入函數執行。這個方法沒有返回值,本質上與使用for循環迭代數組同樣。看一例子。
var numbers = [1,2,3,4,5,6];
numbers.forEach((item,index,array)={
// 執行某些操做
})
複製代碼
這些數組的方法經過執行不一樣的操做,能夠大大方便處理數組的任務。支持這些迭代方法的瀏覽器有IE9+、Firefox2+、Safari3+、Opera9.5+和chrome。
遞歸方法
ECMAScript5 還新增了兩個遞歸數組方法:reduce()和reduceRight()。這兩個方法都會迭代數組的全部項,而後構建一個最終返回的值。其中,reduce()方法從數組的第一項開始,逐個遍歷到最後。而redurceRight()則從數組的最後一項開始,向前遍歷到第一項。
這兩個方法都會接受兩個參數;一個在每一下上調用的函數和(可選的)做爲遞歸基礎的初始值。傳給reduce()和redurceRight()函數接受4個參數:前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會做爲第一個參數自動傳遞給下一項。第一次迭代發生在數組的第二項上,所以第一個參數是數組的第一項,第二個參數就是數組的第二項。
使用reduce()方法能夠執行求數組中全部值以後的操做
var values = [1,2,3,4,5];
var sum = values.reduce((prev,cur,index,array)=>(prev+cur))
alert(sum) ;// 15
複製代碼
第一次執行回調函數,prev是1,cur是2。第二次,perv是3(1+2的結果),cur是3(數組的第三項)。這個過程會持續到把數組中的每一項都訪問一遍,最後返回結果。
reduceRight()的做用相似,只不過方向相反而已。看一下面的例子
var values = [1,2,3,4,5];
var sum = values.reduceRight((prev,cur,index,array)=>(prev+cur))
alert(sum)//15
複製代碼
在這個例子中,第一次執行回調函數,prev是5,cur是4.固然,最終結果相同,由於執行的都是簡單相加的操做。
使用redurce和redurceRight(),主要的差異是從那頭開始遍歷。
數組的方法大概有22個,小夥伴們都記住了嗎,接下來一一列出來