JS中的內置對象有:String,Array,Math,Date。今天我們來詳解一下數組的創建及其方法。
數組的創建:
①使用數組構造函數:?var?arr?=?new?Array();?
在這里需要說明的是()中可以是預先知道數組要保存的項目數量;也可以向Array構造函數中傳遞數組應包含的項。
②使用數組字面量表示方法:var?arr?=?[1,2,3];??
Array的棧方法:
①push()
語法:arr.push();
功能:把參數添加到arr的尾部(會改變原數組)
返回值:把指定的值添加到數組后的新長度
②unshift()
語法:arr.unshift();
功能:把參數添加到arr的開頭(會改變原數組)
返回值:把指定的值添加到數組后的新長度
③pop()
語法:arr.pop();
功能:刪除arr的最后一個元素,如果數組已經為空則不改變數組,并返回 undefined 值(會改變原數組)
返回值:被刪除的元素
④shift()
語法:arr.shift();
功能:刪除arr的第一個元素,如果數組為空,shift() 方法將不進行任何操作,如果是一個空數組,返回undefined(會改變原數組)
返回值:被刪除的元素
Array的轉換方法:join()
語法:arr.join();
功能:把arr中所有元素放入字符串(不會改變原數組)
返回值:字符串
Array的重排序方法
①reverse()
語法:arr.reverse();
功能:顛倒數組中元素的順序(會改變原數組)
返回值:顛倒順序后的數組
②sort()
語法:arr.sort();
功能:對數組進行排序(會改變原數組)
返回值:重新排序后的數組
我們來看一個例子:
var?arr?=?[24,12,13,88,9];???
var?newArr?=?arr.sort();???
console.log(newArr);
大家認為打印的出來應該是9,12,13,24,88才對吧,可是結果呢
我們會發現9明明是最小的,但是卻排在了最后面,這是因為sort()其實是把每個一個數組項都調用了toString()方法,先將數組項轉成字符串,再按字符串來排序,所以“9”就成為了最大的。
如果我們希望按照數字大小來排序的話,可以給sort()傳入比較函數作為參數。
從小到大排序:arr.sort(function(a,b){return a-b ;}) ;
從大到小排序:arr.sort(function(a,b){return b-a;});
這個時候我們再將數組排序就會出現我們想要的結果。
var?arr?=?[24,12,13,88,9];???
var?newArr?=?arr.sort(function(a,b){return?a-b;});???
console.log(newArr);?
如果你想從大到小排序只需要將比較函數中的返回值改一下就OK了。
Array中的連接方法:concat()
語法:arr.concat();
功能:用于連接兩個或多個數組(不會改變原數組)
返回值:連接后的數組
Array中的截取方法:slice()
語法:arr.slice(start,end);
功能:從已有的數組中返回選定的元素(不會改變原數組)
返回值:數組
參數說明:①start和end是數組中的索引,即整數;
②start是必需的,規定了從何處開始選取;
③end是可選的,規定了從何處結束選取,如果沒有指定end時,截取的數組包含從start開始到數組結束的所有元素;
④?截取范圍是start到end-1的元素,end不包含在截取范圍內;
⑤slice()的參數中有負數,則用數組長度加上該數來確定相應的位置。
Array中的splice方法:可以實現刪除,插入,替換功能
刪除功能
語法:arr.splice(index,count);
功能:刪除從index開始的count個元素(會改變原數組)
返回值:含有被刪除元素的數組
參數說明:①index是開始刪除的元素的索引;
②count是刪除的項目數,如果為0,則不會刪除;如果不設置,則刪除從index開始的所有數組項。
插入功能
語法:arr.splice(index,0,item1..... itemx);
功能:在指定位置前插入指定內容
返回值:空數組
參數說明:①index是起始位置的索引;
②0是要刪除的項數(因為插入不需要刪除數組項,所以是0);
③item1... itemx是要插入的內容。
替換功能
語法:arr.splice(index,count,item1..... itemx);
功能:在指定位置前插入指定內容,同時刪除任意數量的項
返回值:從原始數組中刪除的項(如果沒有刪除任何項,則返回空數組)
參數說明:①index是起始位置的索引;
②count是要刪除的項數;
③item1... itemx是插入的內容。
ECMAScript中為數組實例添加了兩個位置方法:indexOf和lastIndexOf
① indexOf()
語法:arr.indexOf(searchValue,startIndex);
功能:從數組的開頭開始向后查找(不會改變原數組)
返回值:查找的項在數組中的位置,沒有找到的情況下返回-1
②lastIndexOf()
語法:arr.lastIndexOf(searchValue,startIndex);
功能:從數組的末尾開始查找(不會改變原數組)
返回值:查找的項在數組中的位置,沒有找到的情況下返回-1
說明:①這兩個方法在比較第一個參數與數組中的每一項時,將使用===操作符,即要求查找的項必須嚴格相等;
②兼容性問題,支持的瀏覽器有:IE9 +,FireFox2 +,Chrome,Safari3。
ECMAScript 6為數組增添的新方法:map(),reduce(),filter()
①map()
語法:arr.map(函數);
功能:相當于讓arr的每個數據執行了一次()中的方法,(不會改變原數組)例:
function add(a){
??? return? b =a*a;
}
var arr = [1,2,3,4];
var newArr =?arr.map(add);
console.log( newArr);
②reduce()
語法:arr.reduce(函數);
功能:把一個函數作用在arr的每一個元素上,它必須接收兩個參數,reduce()把結果繼續和序列的下一個元素做累積計算。例:要把[1,2,3,4,5,6]變換成整數123456,就可以用reduce()做到
function changeNumber(x,y){
????? return? x * 10 + y;
?}
var arr = [1,2,3,4,5,6];
var newArr = arr.reduce(changeNumber);
console.log(newArr);
③filter()
語法:arr.filter(函數);
功能:用于把Array的某些元素過濾掉,然后返回剩下的元素,和map()類似,Array的filter()也接收一個函數。和map()不同的是,filter()把傳入的函數依次作用于每個元素,然后根據返回值是true還是false決定保留還是丟棄該元素。例:利用filter()刪除數組中的偶數項
function deleteOushu(x){
???? return x % 2 !== 0;
}
var arr = [1,2,3,4,5,6,7,8,9,10];
var newArr = arr.filter(deleteOushu);
console.log(newArr);
filter()接受的回調函數可以有多個參數,第一個參數表示arr的某個元素,第二個參數表示元素在arr中的位置,第三個參數表示數組本身:
var arr =["a","b","c"];
var newArr = arr.filter(function(element,index,self){
??? console.log(element);???? //依次打印"a","b","c"
???? console.log(index);??????? //依次打印0,1,2
???? console.log(self);??????? ?? //打印arr本身
????? return true;
})