今天來整理那些 Array 方法們:)

陣列爲似列表的物件，利用索引值取內容值，透過 Array 所提供的方法，我們可以進行許多處理，今天就整理一下常見的這些 Array 方法。

開始之前來一個簡單的陣列

var arraytest = [1,2,3,4,5];

一、查看

1. valueOf( )：用於陣列會回傳該陣列本身

console.log(arraytest.valueOf());  //[1,2,3,4,5]

2. toString( ) ：回傳陣列的字串形式

console.log(arraytest.toString()); //1,2,3,4,5

3. join( )：指定特定參數作爲陣列內容的連接，若未指定任何參數，默認使用逗號

console.log(arraytest.join()); //1,2,3,4,5
console.log(arraytest.join("-")); //1–2–3–4–5

二、新增與刪除陣列元素

1. unshift( )：新增第一個值，並回傳編輯後的陣列長度

var unshiftTest = arraytest.unshift(0);
console.log(arraytest);//[0, 1, 2, 3, 4, 5]
console.log(unshiftTest); //6

2. push( )：新增最後一個值，並回傳編輯後的陣列長度

var pushTest = arraytest.push(6);
console.log(arraytest);//[1, 2, 3, 4, 5, 6]
console.log(pushTest); //6

3. shift( )：刪除第一個值，並回傳被刪除的元素

var shiftTest = arraytest.shift();
console.log(arraytest);//[1, 2, 3, 4, 5]
console.log(shiftTest); //0

4. pop( )：刪除最後一個值，並回傳被刪除的元素

var popTest = arraytest.pop();
console.log(arraytest);//[1, 2, 3, 4, 5]
console.log(popTest);//6

5.splice( )：可新增刪除，語法 array.splice(start[, deleteCount[, item1[, item2[, …]]]])，start 表示開始編輯的位置； deleteCount 表示刪除的元素數量；item1, item2, … 表示從 start 開始，要加入陣列的元素，若無指定任何元素，則依照 start 和 deleteCount 刪除陣列的元素。回傳值爲被刪除的元素陣列。若沒有元素被刪除，則回傳空陣列。

• 新增值，例如在第一個位置新增數字0

var addSplice = arraytest.splice(0,0,0);
console.log(arraytest); //[0, 1, 2, 3, 4, 5]
console.log(addSplice); //[]

• 新增值，例如在第三個位置新增數字8

var addSplice2 = arraytest.splice(2,0,8);
console.log(arraytest); //[0, 1, 8, 2, 3, 4, 5]
console.log(addSplice2); //[]

• 刪除值，例如在刪除第一個位置的 0

var deleteSplice = arraytest.splice(0,1);
console.log(arraytest); //[1, 8, 2, 3, 4, 5]
console.log(deleteSplice); //[0]

• 刪除值，例如在刪除第二個位置的 8

var deleteSplice = arraytest.splice(1,1);
console.log(arraytest); //[1, 2, 3, 4, 5]
console.log(deleteSplice); //[8]

• 刪除第一個值，並加上 8 及 9

var mixSplice = arraytest.splice(0,1,8,9);
console.log(arraytest); //[8, 9, 2, 3, 4, 5]
console.log(mixSplice); //[1]

三、遍歷

1. map( )：將陣列中的所有元素依序傳入，並回傳每一次執行結果所組成的一個新陣列，不影響原陣列。map( )方法可以接收一個函數當做參數，map( ) 方法會傳入該函數三個參數，分別爲目前元素、目前索引值和原陣列。

var mapTest =[1, 2, 3];
var mapTestResult = mapTest.map(function (item,index,array) {
 return item + 2;
});
console.log(mapTest);// [1, 2, 3]
console.log(mapTestResult);// [3, 4, 5]

map( )方法不會跳過 undefined 和 null，但是會跳過空位。

var mapTest2 =[1, 2 ,undefined,,null];
var mapTestResult2 = mapTest2.map(function (item,index,array) {
 return item + 2;
});
console.log(mapTest2);// [1, 2, undefined, empty, null]
console.log(mapTestResult2);// [3, 4, NaN, empty, 2]

2. forEach( )：與 map( ) 方法相似，但是不會回傳新陣列，而是對原陣列進行遍歷操作

var forEachTest =[1, 2, 3];
forEachTest.forEach(function (item,index,array) {
 console.log(item);
 //1
 //2
 //3
});

當我們需要得到操作後的新陣列，使用 map( ) 方法，否則使用 forEach( ) 即可。

四、其他

1. slice( )： 回傳陣列的一部分，傳入兩個參數，第一個參數 start 代表自哪一個索引值開始取值，第二個參數 end，代表取值到哪一個值之前。此爲淺拷貝。

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

2. sort( )：對陣列元素進行排序，默認是以元素 Unicode 編碼位置從前到後依序比較排序，可以指定函數方法定義排序方式。函數方法回傳值若小於 0 (false)，則前者排在後者前面(不更改排序)；回傳值若大於 0 (true)，則前者排在後者後面(更改排序)。

var sortTest =[112, 22, 32];
sortTest.sort();
console.log(sortTest); //[112, 22, 32]
//以編碼位置而非數字大小排列，因此112的第一個位置1是最小的，排序第一，接著是22的2，接著是32的3

var sortTest2 =[112, 22, 32];
sortTest2.sort(function(a,b){
 return a>b;
});
console.log(sortTest2); //[22, 32, 112]

3. filter( )： 篩選出符合條件的陣列元素，並組合回傳一個新陣列，條件是 return 後方為 true 的陣列元素。

var filterTest = [1,2,3,4,5];
var filterTestResult = filterTest.filter(function(item,index,array){
 return item > 3;
});
console.log(filterTestResult); //[4, 5]

4. reverse( )： 反轉排序所有陣列元素，不改變原陣列，回傳一個反轉排序後的新陣列

var reverseTest = [1,2,3,4,5];
var reverseTestResult = reverseTest.reverse();
console.log(reverseTestResult); //[5, 4, 3, 2, 1]

以上是今天對陣列方法的小整理，並非所有 Array 方法，有興趣可以到 MDN 一一查看。