注意:js數組每一項可以保存任何類型的數據，比如第一個元素是字符串，第二個元素是數字，第三個元素是對象

tips: 建議使用數組字面量方式【簡單】

var colors = new Array()
var colors = new Array("red","blue")

var colors = [];
var colors = ["red","blue"];

對于一個網頁或一個全局作用域，可以通過如下方法

if(arr instanceof Array){
    //對數組執行某些操作
}

網頁中包含多個框架，通過如下ES5方法檢測

if(Array.isArray(arr)){
    //對數組執行某些操作
}

arr.valueOf()

var colors = ["red","blue","green"]
colors.valueOf() //["red","blue","green"]

arr.toString()

var colors = ["red","blue","green"]
colors.toString() //"red,blue,green"

tips: arr.toString() 與 arr.join()輸出相同，不過join里可以輸入其它鏈接符

arr.push(item)
接受任意數量的參數，添加到數組末尾，返回新數組的長度

var colors = ["red"]
colors.push("blue","green"); //3

arr.pop()
刪除數組最后一項，返回刪除的項

var colors = ["blue","green"]
colors.pop() //green

arr.unshift()
接受任意數量的參數，添加到數組頭部，返回新數組的長度

var colors = ["red"]
colors.unshift("green") //2

arr.shift()
刪除數組第一項，返回刪除的項

var colors = ["blue","green"]
colors.shift() //blue

arr.reverse()
反轉數組的順序，并返回重新排序之后的數組， 原數組會被改變

var arr1 = [1,2,3,"red","blue"]
arr1.reverse() //["blue", "red", 3, 2, 1]

arr.sort()
如果不傳參數，默認情況下數組內的元素會被轉換為字符串進行比較，因此一般不推薦直接使用默認的arr.sort()進行排序。
返回值為排序后的新數組。原數組會被改變
注意：sort里接收一個比較參數

var b = [1,2,3]
//升序
b.sort((a,b)=>a-b) //[1, 2, 3]
//降序
b.sort((a,b)=>b-a) //[3, 2, 1]

sort擴展(非數字類型排序，對象里的某個key值排序)

arr.concat()
沒有傳遞參數，那么只是復制當前數組并返回副本，原數組不變；
傳遞一個元素（數組）或多個元素（數組）,會將其合并到arr中，返回新數組，原數組不變

var colors = ["red","blue","green"]
colors.concat("gray",["a","green"])  //["red", "blue", "green", "gray", "a", "green"]
console.log(colors) // ["red", "blue", "green"]

tips: js數組復制

arr.concat()    //原生
 
[...arr]   //ES6

Array.from(arr) //ES6

$.extend(arr) //JQ

arr.slice
剪切數組，返回剪切之后的數組，元素不會改變
1、傳入一個參數，表示起始位置，結束位置為最末尾

var colors = ["red","blue","green"]
colors.slice(2) //["green"]

2、傳入2個參數，表示起始位置與結束位置，但不包括結束位置所在的元素

var colors = ["red","blue","green"]
colors.slice(1,2) //["blue"]

刪除：arr.splice(index, num)
傳入兩個參數，第一個為位置（ 數組下標），第二個為刪除的項數，可以刪除任意項，返回刪除元素組成的數組，原數組變了

var colors = ["red","blue","green"]
colors.splice(1,1) //["blue"]

插入：arr.splice(index,0,item)
傳入3個參數， [起始位置（ 數組下標） | 要刪除的項數 為0 | 要插入的元素]， 最終返回刪除掉的元素組成的數組，因為這里刪除項數為0，因此會返回空數組

var colors = ["red","blue","green"]
colors.splice(1,0,"gray") //[]
console.log(colors) // ["red","gray","blue","green"]

替換：arr.splice(index, num, item)
傳入3個參數，[起始位置 | 要刪除的項數 | 要插入的任意項數]， 最終返回刪除掉的元素組成的數組

var colors = ["red", "gray", "blue", "green"]
colors.splice(2,2,"yellow") // ["blue", "green"]
console.log(colors); //["red", "gray", "yellow"]

tips:這個方法會因為參數的不同而實現不同的功能

arr.indexOf()
驗證數組中是否含有某個元素，返回第一個匹配到的元素在數組中所在的位置，如果沒有，則返回 -1

var colors =  ["red", "gray", "yellow"]
colors.indexOf("gray") // 1
colors.indexOf("mm") //-1

arr.lastIndexOf()
驗證數組中是否含有某個元素，不過是從數組尾部開始查找，返回第一個匹配到的元素所在的位置，如果沒有，則返回-1

var colors =  ["red", "gray", "yellow","gray"]
colors.indexOf("gray") // 3
colors.lastIndexOf("mm") //-1

ES5定義了5個迭代方法，每個方法接收2個參數----》[要在每一項上運行的函數 | 運行該函數的作用域對象（可選）]
運行的函數包括3個參數 ---》 [數組項的值 | 該項在數組中的位置 | 數組對象本身]

arr.every()
檢查數組中的項是否滿足某個條件，傳入的函數對每一項都返回true,則返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.every((item, index, arr)=> item >2 ) //false

arr.some()
檢查數組中的項是否滿足某個條件，只要傳入的函數對數組中某一項返回true,則返回true

var nums = [1,2,3,4,5,4,3,2,1]
nums.some((item, index, arr)=> item >2 ) //true

arr.filter()
對數組中的每一項運行給定函數，返回該函數會返回true的項組成的新數組

//返回nums中所有值大于2的數組
var nums = [1,2,3,4,5,4,3,2,1]
nums.filter((item, index, arr)=> item >2 ) //[3, 4, 5, 4, 3]

arr.map()
對數組中的每一項運行給定函數，返回每次函數調用的結果組成的新數組

//返回nums中每一項乘以2的數組
var nums = [1,2,3,4,5,4,3,2,1]
nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

arr.forEach()
對數組中的每一項運行給定函數，這個方法沒有返回值

//返回nums中每一項乘以2的數組
var nums = [1,2,3,4,5,4,3,2,1]
nums.forEach((item, index, arr)=> item * 2 ) // undefined

tips： map、forEach里不可以使用continue、break ,每一項都會執行，如果遍歷中要用到continue或break提升效率，則可以使用for()循環 或 for...of..循環

每個方法接收兩個參數[在每一項上調用的函數 | 作為歸并基礎的初始值（可選）],都會迭代數組每一項，返回一個最終的值
函數接收4個參數[前一個值 | 當前值 | 項的索引 | 數組對象本身]

arr.reduce()
從左開始

//求數組所有元素之和
var nums = [1,2,3,4,5]
nums.reduce((prev,cur,index,arr)=>prev+cur) //15

arr.reduceRight()
從右開始

//求數組所有元素之和
var nums = [1,2,3,4,5]
nums.reduceRight((prev,cur,index,arr)=>prev+cur) //15

1、求一個數組中最大元素

由于js不提供求數組最大元素的函數，所以只能套用Math.max函數將數組轉為一個參數序列，然后求最大值；有了擴展運算符以后就可以直接使用了Math.max了

//ES5的寫法
Math.max.apply(null,[1,3,6]) ///6
//ES6的寫法
Math.max(...[1,3,6]) //6

2、通過push函數將一個數組添加到另一個數組的尾部

ES5的寫法中，push的參數不可以是數組，所以只好通過apply方法變通使用push方法；有了擴展運算符，可以直接將數組傳入push方法中

//ES5的寫法
var arr1 = [1,2]
var arr2 = [4,5]
Array.prototype.push.apply(arr1,arr2) //返回新數組長度，arr1改變

//ES6的寫法
var arr1 = [1,2]
var arr2 = [4,5]
arr1.push(...arr2) //返回新數組長度，arr1改變

3、合并數組

//ES5寫法
var arr = [4,5]
[1,2].concat(arr) //[1, 2, 4, 5]

//ES6寫法
var arr = [4,5]
[1,2,...arr]

4、Array.from()妙用

//數組去重
function combine(){ 
    let arr = [].concat.apply([], arguments);  //沒有去重復的新數組 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n)); // [1, 2, 3]

//遍歷Nodelist對象
let ps = document.querySelectorAll("p")
Array.from(ps).forEach(function(p){
    console.log(p)
})

//將字符串轉化為數組
Array.from("hello") //["h", "e", "l", "l", "o"]

5、Array.of()
替代Array() 或 new Array(),并且不存在參數不同而導致的重載

Array.of(2,3,5) //[2,3,5]
Array.of(2) //[2]
Array.of(2).length //1

6、arr.copyWithin()
將當前數組內部制定位置的成員復制到其他位置，返回當前新數組，原數組改變
接收三個參數[從該位置開始替換 | 從該位置開始讀取數據 | 到該位置停止讀取數據]

//將4,5移動到前兩位
[1,2,3,4,5].copyWithin(0,3) //[4,5,3,4,5]

7、arr.find() arr.findIndex()
找出第一個符合條件的數組成員，它參數是一個函數，每一個成員執行這個函數，找到返回true,沒找到返回undefined
函數的參數[當前值 | 當前的位置 | 原數組]

[1,4,9,10,15].find((item, index, arr)=>{
    return item > 9;
}) //10

[1,4,9,10,15].findIndex((item, index, arr)=>{
    return item > 10;
}) //4

8、arr.fill()
用給定的值填充一個數組

["a","b","c"].fill(7) //[7,7,7]

["a","b","c"].fill(7,1,2) //["a",7,"c"]

9、arr.includes()
數組是否包含某個值，返回true 或 false

[1,2,3].includes(2) //true

10、for...of...
遍歷數組元素

for(let item of colors){
    console.log(item) // red,gray,yellow
}

tips:里面可以使用break continue提升效率

遍歷數組或者對象，fn有2個參數，分別為， 比原生的for in 更加健壯
[ 數組的索引或者對象的key值 | 索引或者key值對應的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

tips:跳過一次循環 return | return true 終止循環 return false

過濾方法，功能類同原生中的arr.filter(fn)。此處fn的參數如下
[ value: 對象/數組的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不會改變

對每項進行處理，返回處理結果組成的數組，此處fn的參數如下
[ value: 對象/數組的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原數組不受影響

檢測某一個元素item是否存在與數組之中，返回其所在的位置，如果不在，則返回-1

$.inArray(3, [1, 2, 3]);
// > 2

合并數組，會改變第一個參數的數組為合并之后的數組，返回合并之后的數組

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 為了防止第一個數組被改變，可以使用下面的方式來寫
$.merge($.merge([], arr), arr2);

過濾DOM數組中重復的元素

將類數組對象轉換為數組

將jQuery對象集合恢復成DOM數組

參考：
數組方法匯總

如果你覺得此文對你有一定的幫助，可以點擊下方的【贊】收藏備用