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

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

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

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

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

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

網(wǎng)頁中包含多個框架，通過如下ES5方法檢測

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

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)
接受任意數(shù)量的參數(shù)，添加到數(shù)組末尾，返回新數(shù)組的長度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

tips: js數(shù)組復制

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

Array.from(arr) //ES6

$.extend(arr) //JQ

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

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

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

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

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

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

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

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

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

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

tips:這個方法會因為參數(shù)的不同而實現(xiàn)不同的功能

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

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

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

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

ES5定義了5個迭代方法，每個方法接收2個參數(shù)----》[要在每一項上運行的函數(shù) | 運行該函數(shù)的作用域?qū)ο螅蛇x）]
運行的函數(shù)包括3個參數(shù) ---》 [數(shù)組項的值 | 該項在數(shù)組中的位置 | 數(shù)組對象本身]

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

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

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

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

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

//返回nums中所有值大于2的數(shù)組
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()
對數(shù)組中的每一項運行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的新數(shù)組

//返回nums中每一項乘以2的數(shù)組
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()
對數(shù)組中的每一項運行給定函數(shù)，這個方法沒有返回值

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

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

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

arr.reduce()
從左開始

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

arr.reduceRight()
從右開始

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

1、求一個數(shù)組中最大元素

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

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

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

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

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

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

3、合并數(shù)組

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

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

4、Array.from()妙用

//數(shù)組去重
function combine(){ 
    let arr = [].concat.apply([], arguments);  //沒有去重復的新數(shù)組 
    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)
})

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

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

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

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

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

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

[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()
用給定的值填充一個數(shù)組

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

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

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

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

10、for...of...
遍歷數(shù)組元素

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

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

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

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

tips:跳過一次循環(huán) return | return true 終止循環(huán) return false

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

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

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

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

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

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

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

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

過濾DOM數(shù)組中重復的元素

將類數(shù)組對象轉(zhuǎn)換為數(shù)組

將jQuery對象集合恢復成DOM數(shù)組

參考：
數(shù)組方法匯總

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