JS中陣列的方法有很多，但是自己一直沒有抽時間進行整理分類，故單獨寫一篇博文，對目前我所掌握的JS中陣列相關的方法進行整理，夯實一下自己的基礎。

我將陣列相關的方法分為兩類

1.方法會改變原陣列

相應的方法有：shift、unshift、pop、push、reverse、sort、splice
shift：將第一個元素刪除並且返回刪除元素，空即為undefined

var arr = [1,2,3,4];
var res = arr.shift();
console.log("arr:",arr);
console.log("res:",res);
//輸出
 

//arr: (3) [2, 3, 4]
//res: 1

unshift：向陣列開頭新增元素，並返回新的長度

var arr = [1,2,3,4];
var res = arr.unshift(33);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (5) [33, 1, 2, 3, 4]
//res: 5

pop：刪除最後一個並返回刪除的元素

var arr = [1,2,3,4];
var res = arr.pop();
console.log("arr:",arr);
console.log("res:",res);
//輸出
 

//arr: (3) [1, 2, 3]
//res: 4

push：向陣列末尾新增元素，並返回新的長度

var arr = [1,2,3,4];
var res = arr.push(88);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (5) [1, 2, 3, 4, 88]
//res: 5

reverse：顛倒陣列順序

var arr = [1,2,3,4];
var res = arr.reverse();
console.log("arr:",arr);
console.log("res:",res);
//輸出
 

//arr: (4) [4, 3, 2, 1]
//res: (4) [4, 3, 2, 1]

sort：對陣列排序
注意–預設是按照字元編碼的順序對陣列中的元素進行排序

如果想按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數 a 和 b，其返回值如下：
若 a 小於 b，在排序後的陣列中 a 應該出現在 b 之前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。

預設按照字元編碼排序

var arr = [10,3,20,41];     
var res = arr.sort();
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [10, 20, 3, 41]
//res: (4) [10, 20, 3, 41]

給予排序函式，從大到小排序

var arr = [10,3,20,41];     
var res = arr.sort((a,b)=>(a-b));
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [3, 10, 20, 41]
//res: (4) [3, 10, 20, 41]

給予排序函式，從大到小排序

var arr = [10,3,20,41];     
var res = arr.sort((a,b)=>(b-a));
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [41, 20, 10, 3]
//res: (4) [41, 20, 10, 3]

splice:splice(start,length,item)刪，增，替換陣列元素，返回被刪除陣列

這個方法還是很強大的,有三個引數，下面我將依次嘗試不同引數個數時該函式的效果

一個引數：從start開始刪除元素，返回刪除的元素陣列

var arr = [1,2,8,4,5];      
var res = arr.splice(2);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (2) [1, 2]
//res: (3) [8, 4, 5]

兩個引數：從start開始刪除length個元素，返回刪除的元素陣列

var arr = [1,2,8,4,5];      
var res = arr.splice(2,2);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (3) [1, 2, 5]
//res: (3) [8, 4]

三個以上引數：從start開始刪除length個元素，並將item及item後的引數從index處插入到陣列中

var arr = [1,2,8,4,5];      
var res = arr.splice(2,1,9,9);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (6) [1, 2, 9, 9, 4, 5]
//res: [8]

2.方法不會改變原陣列

相應的方法有：forEach，map，every， some，concat，filter ， slice ，indexOf，find，findIndex，join，reduce

forEach:沒有返回值(undefined)，迴圈呼叫回撥函式會處理每一項，且無法正常退出迴圈，除非丟擲異常

var  arr = [1,2,3];
var  res = arr.forEach((val,i)=>{
    console.log(val,i);
    return  2 * val;
});
console.log("arr:",arr);
console.log("res:",res);
//輸出
//1 0
//2 1
//3 2
//arr: (3) [1, 2, 3]
//res: undefined

map：返回一個新的陣列，新陣列的每一項都是回撥函式處理的結果

var  arr = [1,2,3];
var  res = arr.map((val,i)=>{           
    console.log(val,i);
    return  2 * val;
});
console.log("arr:",arr);
console.log("res:",res);
//輸出
//1 0
//2 1
//3 2
//arr: (3) [1, 2, 3]
//res: (3) [2, 4, 6]

every(callback)：檢測陣列所有元素是否都符合callback中的指定條件

如果陣列中檢測到有一個元素不滿足，則表示式返回 false ，且不再檢測剩餘元素。
如果所有元素都滿足條件，則返回 true。

var  arr = [1,2,3];
var  res = arr.map((val,i)=>{           
    console.log(val,i);
    return  2 * val;
});
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [1, 2, 8, 4]
//res: false

some(callback):檢測陣列中是否有符合callback中條件的元素，如果有就返回true，否則返回false

如果有一個元素滿足條件，則表示式返回true , 且不再檢測剩餘元素。
如果沒有滿足條件的元素，則返回false。

var arr = [1,2,8,4];        
var res = arr.some((val)=>(val > 3));
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [1, 2, 8, 4]
//res: true

concat(a,b,…):這個方法就是將陣列進行拼接，不會進行去重處理，可以同時連線很多個數組，返回一個連線後的新陣列

var arr = [1,2,3];
var res = arr.concat([1,2],[3,4]);  
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (3) [1, 2, 3]
//res: (7) [1, 2, 3, 1, 2, 3, 4]

filter(callback):返回數值中符合callback中條件的所有元素組成的新陣列

var arr = [1,2,8,4];        
var res = arr.filter((val)=>(val > 3));
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [1, 2, 8, 4]
//res: (2) [8, 4]

slice（from,end）:這個方法就是從陣列中擷取從from開始，end結束的陣列

var  arr = [1,2,3,4,5];
var  res = arr.slice(1,4);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (5) [1, 2, 3, 4, 5]
//res: (3) [2, 3, 4]

indexOf(val):這個方法就是尋找陣列中值為val項的索引

var  arr = [1,2,3];
var  res = arr.indexOf(2);
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (3) [1, 2, 3]
//res: 1

find( callback(val) ):返回callback中符合測試條件的第一個陣列元素的值，如果沒有符合條件的元素返回 undefined

var arr = [1,22,23,24];
var res = arr.find((val)=> val > 22 );
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [1, 22, 23, 24]
//res: 23

findIndex(callback):返回callback中符合測試條件的第一個陣列元素索引，如果沒有符合條件的則返回 -1

var arr = [1,2,8,4];        
var res = arr.findIndex((val)=>(val > 3));
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [1, 2, 8, 4]
//res: 2

join(item):將陣列以item為分隔符進行連線，並返回字串

var arr = [1,2,'aa',4];     
var res = arr.join('|');
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (4) [1, 2, "aa", 4]
//res: 1|2|aa|4

reduce:接收一個函式作為累加器，陣列中的每個值（從左到右）開始縮減，最終計算為一個值

var arr = [1,2,3,4,5];      
var res = arr.reduce((prev,val)=>(prev + val));
console.log("arr:",arr);
console.log("res:",res);
//輸出
//arr: (5) [1, 2, 3, 4, 5]
//res: 15

這個reduce方法還是挺有意思的，後面會專門寫一篇講解reduce的文章，此處立flag!

上面是我對陣列array相關方法的總結，歡迎大家在評論區進行補充！