JavaScript數組使用方法總結

做爲最經常使用的類型，JavaScript中的數組仍是和其餘語言中有很大的區別的。
主要體如今兩點：

• 數組中的每一項均可以保存任何類型的數據
• 數組的大小能夠動態調整

首先來介紹建立數組的兩種方法

1.第一種方式

var arr1 = new Array();

var arr2 = new Array(3);

var arr3 = new Array('jerry');

能夠看到這種方式創建數組，arr1是一個空數組，arr2是一個長度爲3的數組，arr3是一個包含‘jerry’一個元素的數組。同時經過這種方式建立的數組，new操做符能夠省略。

2.第二種方式稱爲數組字面量表示法。

var a = [];
var arr = ['tom','jack']

數組的長度是可動態調整，致使咱們直接就能夠設置它的長度

var a = [123,423];
a.length = 10;
a[9]='123';
console.log(a[8])//undefined

a[10] = '123'
console.log(a.length)//10

從上面的代碼中咱們能夠看出：

• 若是咱們設置的長度大於原來的數組的長度的時候， 數組後面的元素自動設置爲undefined。
• 若是咱們對大於當前數組長度的位置賦值的時候，那麼就會致使數組的長度自動變爲你所賦值位置+1.

咱們能夠把數組的方法分爲三類

改變數組的方法

棧方法

pop和push很簡單，也很容易理解。pop就是從數組的末尾刪除一個元素並返回。push是在數組的末尾添加一個元素。

var arr = [1,3,4];
arr.pop();
console.log(arr);//[1,3]

arr.push(5);
console.log(arr);//[1,3,5]

隊列方法

shift和unshift是和棧方法是相對的，它倆是從數組的頭部進行操做。shift是從頭部刪除一個元素，unshift是從同步加入一個元素。

var arr = [1,3,4];
arr.shift();
console.log(arr);//[3,4]

arr.unshift(5);
console.log(arr);//[5,3,4]

重排序方法

reverse是對數組進行翻轉。

var arr = [1,3,4];
arr.reverse();
console.log(arr);//[4,3,1]

sort是對數組進行排序。

var arr = [1,3,5,4];
arr.sort();
console.log(arr);//[1,3,4,5];

sort默認的對數組進行升序排序。sort能夠接收一個自定義的比較函數，自定義排序規則。

sort方法會調用每一個元素的toString()方法，從而經過字符串進行比較大小。即便是數值，依然要變換成字符串，從而就會帶來一些問題。好比

var arr = [1,3,15,4];
arr.sort()
console.log(arr);//[1,15,3,4];

轉換爲字符串以後，‘15’是排在‘3’，‘4’的前面的。這就帶來了問題，因此在進行數值數組的排序，必須進行自定義排序規則。

var arr = [1,3,15,4];
function compare(v1,v2){
    if(v1 > v2)
        return 1;
    if(v1 < v2)
        return -1;
    return 0;
}
arr.sort(compare)
console.log(arr);//[1,3,4,15]

splice方法

splice方法能夠說是數組中功能最強大的方法，集多項功能於一身。主要的用途就是用來向數組的中部插入元素。

splice方法主要有三種用法。

splice的返回值爲刪除的元素組成的數組。若是刪除的元素爲空，返回空數組。

• 刪除元素

splice（index,count）,index表示刪除的位置，count表示刪除的項數。

var arr = [1,3,4];
console.log(arr.splice(2,1));//[4]
//刪除元素
console.log(arr);[1,3];

• 插入元素

splice(index,0,element,....)
index 表示要插入的位置，0表明刪除0個元素，element要插入的元素,若是要插入多個元素，能夠繼續添加。

var arr = [1,3,4];
console.log(arr.splice(2,0,'tom'));//[ ]

console.log(arr);//[1,3,'tom',4]

若是index的值大於數組自己的長度，那麼就在最後位置添加。且數組的長度只會加1.

var arr = [1,3,4];
console.log(arr.splice(5,0,'tom'));//[ ]

console.log(arr);//[1,3,4,'tom']
console.log(arr.length);//4

若是index的值爲負數,那麼就從（arr.length+index）位置開始插入，若是（arr.length+index）的值小於0，那麼就從數組的開始位置進行插入。

var arr = [1,3,4,4,7,6];
console.log(arr.splice(-1,0,'tom'));//[ ]

console.log(arr);//[1,3,4,4,7,'tom',6]
console.log(arr.length);//7

console.log(arr.splice(-7,0,'tom'));//[ ]

console.log(arr);//['tom',1,3,4,4,7,'tom',6]
console.log(arr.length);//8

console.log(arr.splice(-10,0,'jack'));//[ ]

console.log(arr);//['jack','tom',1,3,4,4,7,'tom',6]
console.log(arr.length);//9

• 替換元素

splice（index,count,element,....）.index表明替換開始的位置，count > 0,element表示要替換成的元素。其實替換過程包含兩個過程:1.刪除. 2插入.也就是上面的兩個過程的融合。

var arr = [1,3,4];
console.log(arr.splice(1,1,'tom'));//[3]

console.log(arr);//[1,'tom',4]

若是index大於數組的長度，或者小於0，處理的結果同上面插入元素處理的方式同樣。

不改變數組的方法

轉換方法

join方法主要是用來將數組的元素經過規定的方式鏈接成字符串。

var arr = [1,3,4,5];
console.log(arr.join(','))//1,3,4,5
console.log(arr.join('+'))//1+3+4+5
console.log(arr.join('?'))//1?3?4?5
console.log(arr)//[1,3,4,5]

操做方法

slice和concat方法。
slice方法主要用來返回指定位置的數組的子數組。slice(start,end)。end省略，返回的是從開始位置到數組的末尾。end不省略，返回的是從start到end之間的子數組，包括start位置但不包括end位置的數組。

var arr = [1,3,4,5];

console.log(arr.slice(1));//[3,4,5]
console.log(arr.slice(1,2));//[3]

若是slice方法的參數中有一個負數，則用數組長度加上該數來肯定相應的位置。例如在一個長度爲5的數組上調用slice(-2,-1)與調用slice(3,4)獲得的結果相同。若是結束位置小於起始位置，則返回空數組。

concat 方法，主要是鏈接多個數組。

var arr = [1,3,4,5];
var testArr = [1,23,4];
console.log(arr.concat(testArr));//[1,3,4,5,1,23,4]
console.log(arr.concat('tom'));//[1,3,4,5,'tom']

迭代方法

ES5新增長的迭代方法主要包括以下幾種

map
every
some
fliter
forEach

這幾個方法有一下共同點，都接收兩個參數，一個是要在數組上每一項運行的函數，一個是運行該函數做用域的對象，改變this的指向（可選）。其中函數須要傳入三個參數，一個是每一個元素的值，每一個元素的index，數組自己。

function(value,index,array)
{
}

下面一個一個的來介紹

• map

map返回數組中每個數組元素通過傳入的函數處理後組成的新數組

var arr = [1,3,4];
var newArr = arr.map(function(value,index,array){
    return value*2;
})
console.log(newArr);//[2,6,8]
console.log(arr);//[1,3,4]

• some和every

some和every比較相像。some是對每個數組中的元素運行傳入的函數，若是有一個返回true，那麼就返回true；every是對每個數組中的元素運行傳入的函數，若是全部的都返回true，那麼就返回true。

var arr = [1,3,4];
var result1 = arr.some(function(value,index,array){
    return value > 2;
})

var result2 = arr.every(function(value,index,array){
    return value > 2;
})
console.log(result1);// true
console.log(result2);// false

• filter

從名字能夠看出，這是一個過濾的方法，返回的一個數組，這個數組是知足傳入的參數的函數的元素所組成的。

var arr = [1,3,4];
var result = arr.filter(function(value,index,array){
    return value > 2;
})
console.log(result);// [3,4]

• forEach

forEach主要用來遍歷，遍歷數組中每個元素，對其進行操做。該方法沒有返回值。

var arr = [1,3,4];
arr.forEach(function(value,index,array){
    console.log('arr['+index+']='+value);
})
// 結果
arr[0]=1
arr[1]=3
arr[2]=4

縮小方法

reduce和reduceRight.這兩個方法接收兩個參數，一個是每項都運行的函數，一個是縮小基礎的初始值（可選）。reduce和reduceRight返回的是一個值。其中每項都運行的函數包含四個參數，

funciton(prev,cur,index,array){
}

下面經過一個例子就能夠說明這個函數是幹嗎的。

var arr = [1,3,4];
var result = arr.reduce(function(prev,cur,index,array){
    return prev+cur;
},10);
console.log(result)//18
var result1 = arr.reduce(function(prev,cur,index,array){
    return prev+cur;
});
console.log(result1)//8

reduceRight和reduce同樣，無非他開始的位置是從數組的後面。

其餘方法

• indexOf()
• lastIndexOf()

這兩個主要是用來判斷元素在數組中的位置,未找到返回-1，接收兩個參數，indexOf(searchElement[, fromIndex]),lastIndexOf(searchElement[, fromIndex])。fromIndex可選。其中formIndex也能夠指定字符串。

var arr = [1,3,4,4,1,5,1];
var value = arr.indexOf(1)
console.log(value)//0
value = arr.indexOf(1,4)
console.log(value)//4
value = arr.indexOf(1,5)
console.log(value)//6

value = arr.lastIndexOf(1)
console.log(value)//6

value = arr.lastIndexOf(1,3)
console.log(value)//0

• toString()
• toLocalString()
• valueOf()

這三個方法是全部對象都具備的方法。

toString()返回的是一個字符串，toLocaleString同它相似。valueOf()返回的是一個數組

var arr= [1,3,4]
console.log(arr.toString());//1,3,4
console.log(arr.valueOf());//[1,3,4]
console.log(arr.toLocaleString());//1,3,4

能夠複寫toString(),toLocaleString()返回不一樣的結果。