JS數組方法彙總

Javascript原生方法

注意: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裏能夠輸入其它連接符

push、pop、unshift、shift

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

reverse、sort、concat、slice

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
剪切數組，返回剪切以後的數組，元素不會改變
一、傳入一個參數，表示起始位置，結束位置爲最末尾

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

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

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

splice()

刪除：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

ES6數組方法擴展

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

因爲js不提供求數組最大元素的函數，因此只能套用Math.max函數將數組轉爲一個參數序列，而後求最大值；有了擴展運算符之後就能夠直接使用了Math.max了

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

二、經過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改變

三、合併數組

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

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

四、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"]

五、Array.of()
替代Array() 或 new Array(),而且不存在參數不一樣而致使的重載

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

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

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

七、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

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

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

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

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

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

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

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

tips:裏面可使用break continue提高效率

Jquery方法

$.each(arr, fn)

遍歷數組或者對象，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

$.grep(arr, fn)

過濾方法，功能類同原生中的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 ] 不會改變

$.map(arr, fn)

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

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

$.inArray(item, array)

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

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

$.merge(arr1, arr2)

合併數組，會改變第一個參數的數組爲合併以後的數組，返回合併以後的數組

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

$.unique(arr)

過濾DOM數組中重複的元素

$.makeArray(obj)

將類數組對象轉換爲數組

$(elem).toArray()

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

參考：
數組方法彙總

若是你以爲此文對你有必定的幫助，能夠點擊下方的【贊】收藏備用