最全的JavaScript常見的操作數(shù)組的函數(shù)方法寶典

JavaScript在其內部封裝了一個Array對象，使得我們可以方便地使用數(shù)組這種簡單的數(shù)據(jù)結構，同時，也在 Array對象的原型上定義了一些常用并且很有用的操作數(shù)組的函數(shù)。

本文就將詳細介紹一下每個操作數(shù)組的函數(shù)是如何使用的

就問你，你在寫JavaScript代碼的時候，是不是經常用到像這樣的數(shù)據(jù)結構 var arr = [1, 2, 3, 4]，如果是的話，那你可就要好好看下文了，每一個函數(shù)方法都給你安排明白了。

數(shù)組的方法一共有很多，見下表

1、join()

join()方法主要是用于將數(shù)組內的所有元素連接在一起轉化為字符串，并返回這個字符串。

參數(shù)（共1個）：

1. 第一個參數(shù)：為可選參數(shù)，該參數(shù)表示數(shù)組的每個元素之間的連接符號，若省略該參數(shù)，則默認為逗號

join()方法使用實例

var?arr?=?[1,?2,?3,?4]

arr.join()??????????????//返回?"1,2,3,4"

arr.join('-')???????????//返回?"1-2-3-4"

2、sort()

sort()方法是將數(shù)組中的每個元素按一定條件排序后并返回排序后的新數(shù)組（會改變原數(shù)組）

參數(shù)（共1個）：

1. 第一個參數(shù)：可選參數(shù)，該參數(shù)為回調函數(shù)，該回調函數(shù)需傳入兩個參數(shù)a和b。當回調函數(shù)返回一個小于0的數(shù)時，參數(shù)a將排在前面；當返回一個大于0的數(shù)時，參數(shù)b將排在前面；當返回0時，則這兩個值不進行比較排序。若省略該參數(shù)，則將每個元素按照字母表的順序排列。

sort()方法使用實例

var?arr?=?['cherry',?'apple',?'banana']

arr.sort()???????????//未傳入回調函數(shù)作為參數(shù)

console.log(arr)?????//返回??['apple',?'banana',?'cherry']

該例子中，省略了第一個參數(shù)，所以在排序時默認按照字母表順序進行排列，若首字母相同，則按第二個字母的先后順序排列。

接下來看一下第一個參數(shù)的詳細使用

var?arr?=?[54,?78,?12,?64]

arr.sort(function?(a,?b)?{
????return?a?-?b
})

console.log(arr)????????//返回??[12,?54,?64,?78]??升序排列

調用sort()方法，會每次從數(shù)組中取出兩個數(shù)，分別作為參數(shù)a和參數(shù)b，若回調函數(shù)return一個負數(shù)，則參數(shù)a排在前面；若return一個正數(shù)，則參數(shù)b排在前面；若return 0，則兩個數(shù)不進行排序。

該例子就實現(xiàn)了升序排列

那么如果把a - b改成b - a，就能實現(xiàn)降序排列了

var?arr?=?[54,?78,?12,?64]

arr.sort(function?(a,?b)?{
????return?b?-?a
})

console.log(arr)????????//返回??[78,?64,?54,?12]??降序排列

3、reverse()

reverse()方法是將數(shù)組中的元素顛倒，并返回顛倒后的數(shù)組（會改變原數(shù)組）

這個方法很簡單，直接來看例子

var?arr?=?[54,?78,?12,?64]

arr.reverse()

console.log(arr)???????//返回??[64,?12,?78,?54]

該方法無非就是將數(shù)組轉成了逆序數(shù)組

4、concat()

concat()方法將調用每一個參數(shù)創(chuàng)建并返回一個數(shù)組（不會改變原數(shù)組）

該方法可以省略參數(shù)或者傳入多個參數(shù)。

當省略參數(shù)時，則表示創(chuàng)建一個新的空數(shù)組，將原始數(shù)組的數(shù)據(jù)傳入這個空數(shù)組中，有點類似copy的感覺 ； 當傳入1個或多個參數(shù)時，則表示創(chuàng)建一個新的空數(shù)組，將原始數(shù)組的數(shù)據(jù)和每個參數(shù)都添加到這個空數(shù)組中。

接下來我們來看看具體的例子，首先是不傳入任何參數(shù)

var?arr?=?[1,2,3,4]

var?new_arr?=?arr.concat()

console.log(new_arr)???????//返回??[1,2,3,4]

再來看傳入?yún)?shù)的例子

var?arr?=?[1,2,3,4]

var?new_arr?=?arr.concat(5,6,7,8)

console.log(new_arr)?????//返回??[1,2,3,4,5,6,7,8]

跟定義說的一樣，傳入的參數(shù)也被當成新創(chuàng)建的數(shù)組中的成員添加了進去

其實我們還可以傳入數(shù)組作為該方法的參數(shù)，最后會將數(shù)組中每一個元素添加到新的數(shù)組中去

var?arr?=?[1,2,3,4]

var?new_arr?=?arr.concat([5,6,7,8])

console.log(new_arr)?????//返回??[1,2,3,4,5,6,7,8]

但是，如果數(shù)組中還嵌套了數(shù)組，那么嵌套的那個數(shù)組會被當成一個整體添加到新的數(shù)組中去。簡而言之，也就是說該方法只能拆分一層的數(shù)組參數(shù)

var?arr?=?[1,2,3,4]

var?new_arr?=?arr.concat([5,6,7,8,[9,10]])

console.log(new_arr)?????//返回??[1,2,3,4,5,6,7,8,[9,10]]

可以很清楚地看到，嵌套的數(shù)組[9,10]并沒有被拆開添加到新數(shù)組中，而是作為整體添加到了新數(shù)組中

5、slice()

slice()方法是返回指定的一個數(shù)組片段

該方法有兩個參數(shù)，分別代表了數(shù)組片段的起始位置和結束位置，第一個參數(shù)不能省略，第二個參數(shù)可以省略

接下來看該方法的使用例子

var?arr?=?[1,2,3,4,5,6,7]

arr.slice(1,3)????????????????//返回??[2,3]
arr.slice(3)??????????????????//返回??[4,5,6,7]
arr.slice(4,-1)???????????????//返回??[5,6]
arr.slice(-3)?????????????????//返回??[5,6,7]
arr.slice(-3,-2)??????????????//返回??[5]

第二個參數(shù)表示的是數(shù)組片段的結束位置，所以取到的片段是從第一個參數(shù)表示的位置取到第二個參數(shù)表示的位置的前一個元素。

若省略第二個參數(shù)，則表示從第一個參數(shù)表示的位置一直取到最后一個元素

用負數(shù)表示元素位置時，是從末尾往前數(shù)，分別為-1 、-2 、-3……

6、splice()

splice()方法在數(shù)組指定位置插入或刪除元素，并返回刪除元素組成的數(shù)組（會改變原數(shù)組）

參數(shù)（共3個）：

1. 第一個參數(shù)：刪除或插入元素的起始位置
2. 第二個參數(shù)：從起始位置開始往后需要刪除的元素個數(shù)。若該元素省略，則表示從起始位置開始到最后的所有元素都刪除
3. 第三個參數(shù)及之后的所有參數(shù)：將該值作為數(shù)組的元素依次插入到第一個參數(shù)表示的位置上

我們直接來看幾個簡單的例子

var?arr?=?[1,2,3,4,5,6,7]

arr.splice(4)?????????????//返回?[5,6,7],此時arr為[1,2,3,4]

arr.splice(1,?2)??????????//返回?[2,3],此時arr為[1,4]

arr.splice(1,?0,?'new1',?'new2')?//返回[],此時arr為[1,'new1','new2',4]

所以這是一個很方便并且功能很全的數(shù)組操作函數(shù)，它既可以刪除元素，又可以插入元素

7、push()

push()方法是在數(shù)組的尾部添加一個或多個元素，并返回數(shù)組的長度（會改變原數(shù)組）

該函數(shù)的有1個或多個參數(shù)，函數(shù)依次獲取每個參數(shù)將其插入到數(shù)組的末尾

直接來看例子

var?arr?=?[]

arr.push(1)???????//返回?1,?此時arr為?[1]

arr.push(5)???????//返回?2,?此時arr為?[1,5]

arr.push(3,2)?????//返回?4,?此時arr為?[1,5,3,2]

8、pop()

pop()方法是刪除數(shù)組的最后一個元素，并返回該元素（會改變原數(shù)組）

該函數(shù)不需要傳入任何參數(shù)

來簡單看下例子

var?arr?=?[6,8,7]

arr.pop()??????????//返回?7,?此時arr為?[6,8]

arr.pop()??????????//返回?8,?此時arr為?[6]

9、unshift()

unshift()方法是在數(shù)組的頭部添加一個或多個元素，并返回數(shù)組的長度（會改變原數(shù)組）

該函數(shù)的有1個或多個參數(shù)，函數(shù)依次獲取每個參數(shù)將其插入到數(shù)組的最前面

來看幾個例子

var?arr?=?[]

arr.unshift(1)???????//返回?1,?此時arr為?[1]

arr.unshift(5)???????//返回?2,?此時arr為?[5,1]

arr.unshift(3,2)?????//返回?4,?此時arr為?[2,3,5,1]

10、shift()

shift()方法是刪除數(shù)組第一個元素，并返回該元素（會改變原數(shù)組）

該函數(shù)不需要傳入任何參數(shù)

來簡單看下例子

var?arr?=?[6,8,7]

arr.shift()??????????//返回?6,?此時arr為?[8,7]

arr.shift()??????????//返回?8,?此時arr為?[7]

arr.shift()??????????//返回?7,?此時arr為?[]

11、toString()

toString()方法是返回將數(shù)組每個元素轉化為字符串并用逗號分隔連接起來的字符串（不會改變原數(shù)組）

若遇到數(shù)組里嵌套數(shù)組的話，同樣也會將該嵌套數(shù)組里的每個元素轉化為字符串并連接起來

來看幾個例子

[1,2,3].toString()??????????????//返回?'1,2,3'

['cherry','apple','bannana'].toString()????//返回?'cherry,apple,banana'

[1,2,[6,7]].toString()??????????//返回?'1,2,6,7'

[1,[3,6,[8,9]]].toString()??????//返回?'1,3,6,8,9'

12、forEach()

forEach()方法是ES5新增的，它是用來為每個元素調用指定的函數(shù)（可以修改原數(shù)組）

該方法只有一個參數(shù)，該參數(shù)為回調函數(shù)，該回調函數(shù)有三個參數(shù)，這三個參數(shù)的含義分別為數(shù)組元素 、元素的索引 、數(shù)組本身

來看一個例子，現(xiàn)在要求將某一數(shù)組內的每個元素都+2

var?a?=?[1,2,3,4,5]

a.forEach(function?(value,?index,?arr)?{
????arr[index]?=?value?+?2
})

console.log(a)??????????//?[3,4,5,6,7]

再來看一個例子，計算數(shù)組內各元素之和

var?a?=?[1,2,3,4,5]
var?sum?=?0

a.forEach(function(value)?{
?sum?+=?value
})

console.log(sum)???????//?15

13、map()

map()方法是是ES5新增的，它是將調用的數(shù)組的每個元素傳遞給指定的函數(shù)，把每次調用回調函數(shù)的返回值存入到一個新的數(shù)組中，最后返回這個新的數(shù)組（不會改變原數(shù)組）

該方法只有一個參數(shù)，該參數(shù)為回調函數(shù)，該回調函數(shù)只有一個參數(shù)，該參數(shù)的含義是數(shù)組的每個元素

來看一個例子，返回一個新的數(shù)組，該數(shù)組內的每個元素為原數(shù)組每個元素的平方

var?arr?=?[1,2,3,4,5]

var?new_arr?=?arr.map(function?(value)?{
????return?value?*?value
})

console.log(new_arr)??????//??[1,?4,?9,?16,?25]

14、filter()

filter()方法是ES5新增的，相當于一個過濾器，它是通過回調函數(shù)里的邏輯判斷來過濾掉不需要的元素，再將剩下的元素都放到一個新的數(shù)組中并返回（不會改變原數(shù)組）

該方法只有一個參數(shù)，該參數(shù)為回調函數(shù)，該回調函數(shù)有兩個參數(shù)，他們的含義分別為數(shù)組中的元素 、 元素的索引

當回調函數(shù)的返回值為true時，即return true時，該元素將被加入到新的數(shù)組中；反之，該元素將被不被加入到新的數(shù)組中

接下來我們來看一個例子。需求是：挑選出數(shù)組中小于6的所有元素，并保存在數(shù)組中返回

var?arr?=?[6,?12,?7,?1,?9,?3,?0,?19]

var?new_arr?=?arr.filter(function?(value)?{
????return?value?6
})

console.log(new_arr)????????//?[1,?3,?0]

再來看一個例子。需求是：將一個數(shù)組中偶數(shù)位置的元素取出來保存在一個新數(shù)組中并返回

var?arr?=?[6,12,7,1,9,3,0,19]

var?new_arr?=?arr.filter(function?(value,?index)?{
????return?index?%?2?===?0
})

console.log(new_arr)???????//?[6,?7,?9,?0]

15、every()

every()方法是針對一個數(shù)組的邏輯判定（不會改變原數(shù)組）

該方法有一個參數(shù)，該參數(shù)為回調函數(shù)，該回調函數(shù)有一個參數(shù)，該參數(shù)含義是數(shù)組中的每個元素

當每個元素調用回調函數(shù)的返回值全部都為true時，最后返回true；相反，只要有一個元素調用回調函數(shù)，返回的值不為true，最后都會返回false

我們來看一個例子。需求：判斷該數(shù)組中每個元素是否都小于10

var?arr?=?[1,2,3,4,5,6,7,8]

var?result?=?arr.every(function?(value)?{
????return?value?10
})

console.log(result)??????????//?true,?表示該數(shù)組所有元素都小于10

我們把arr中的元素改變幾個，再來看看代碼運行結果

var?arr?=?[1,?2,?3,?4,?5,?6,?12,?8]

var?result?=?arr.every(function?(value)?{
????return?value?10
})

console.log(result)???????//?false,?表示該數(shù)組中有某個元素不小于10

16、some()

some()方法跟every()方法類似，只是邏輯判斷略有不同，前者是當每個元素調用回調函數(shù)后的返回值中，只要有一個為true，則最終返回true；反之，只有當每個元素調用回調函數(shù)后的返回值全部都為false時，最后才返回false

我們直接來看例子。需求是：判斷該數(shù)組中是否有元素12

var?arr?=?[3,?8,?9,?45,?12]

var?result?=?arr.some(function?(value)?{
????return?value?===?12
})

console.log(result)??????//?true,?表示該數(shù)組中有元素12

那當把arr數(shù)組中的元素12刪除以后，我們再來看看返回結果

var?arr?=?[3,?8,?9,?45]

var?result?=?arr.some(function?(value)?{
????return?value?===?12
})

console.log(result)??????//?false,?表示該數(shù)組中并沒有元素12

17、reduce()

reduce()方法是通過調用指定的回調函數(shù)將數(shù)組元素進行組合，并返回組合后的值（不會改變原數(shù)組）

參數(shù)（共2個）：

1. 第一個參數(shù)：為回調函數(shù)，用于處理數(shù)組元素。該回調函數(shù)有兩個參數(shù)x、y，這兩個參數(shù)都為調用數(shù)組的元素成員
2. 第二個參數(shù)：為可選參數(shù)，作為傳遞給回調函數(shù)的初始值。若省略該參數(shù)，則將數(shù)組的第一個數(shù)作為初初始值

當省略了第二個參數(shù)時，該方法第一次調用回調函數(shù)時，將數(shù)組的第一個元素作為回調函數(shù)的第一個參數(shù)x的值，將數(shù)組的第二個元素作為回調函數(shù)的第二個參數(shù)y的值。然后運行回調函數(shù)里的代碼，將return后的值作為下一次調用回調函數(shù)的第一個參數(shù)x的值，然后將數(shù)組的第三個元素作為參數(shù)y的值……以此類推，直到數(shù)組內所有元素都被調用以后，將最后一次調用回調函數(shù)的return值作為最終的返回值。

如果給第二個參數(shù)賦值了的話，則在第一次調用回調函數(shù)時，是將第二個參數(shù)的值作為該回調函數(shù)的第一個參數(shù)x的值，將數(shù)組的第一個參數(shù)作為該回調函數(shù)的第二個參數(shù)y的值……接下來的操作都跟上述一樣，這里不再重述

我們來看一個例子。需求是：將數(shù)組中的每一個元素相乘并返回最終的值

var?arr?=?[1,2,3,4,5,6]

var?result?=?arr.reduce(function?(x,?y)?{
????return?x?*?y
})

console.log(result)??????????//?720

再來看一個例子。需求是：某數(shù)組中存儲著一個班級里5個學生的年齡，現(xiàn)在要計算這5個學生的年齡和，并加上老師的年齡，老師的年齡為29

var?arr?=?[10,?11,?13,?14,?12]

var?result?=?arr.reduce(function?(x,?y)?{
????return?x?+?y
},?29)?????????//這里將老師的年齡29作為reduce()方法的第二個參數(shù)

console.log(result)?????????????//?89

18、reduceRight()

reduceRight()方法與reduce()方法類似，唯一不同的就是，后者在調用數(shù)組元素的時候是從左往右調用的；前者是從右往左調用的。這里就不做過多的講解了。

19、indexOf()

indexOf()方法是獲取某元素在數(shù)組中的索引，并且只返回第一個匹配到的元素的索引；若該元素不在數(shù)組中，則返回 -1（不會改變原數(shù)組）

參數(shù)（共2個）：

1. 第一個參數(shù)：必填，為需要查詢的元素
2. 第二個參數(shù)：為可選參數(shù)，表示從數(shù)組的哪個位置開始搜索

我們來看一個例子。需求是：一個班級的學生按成績從高到低排列好存儲在數(shù)組中，現(xiàn)在查詢張三在班級里排名第幾

var?arr?=?['小紅',?'小明',?'張三',?'李四',?'王五']

var?index?=?arr.indexOf('張三')?+?1

console.log(index)??????????//?3,?表示張三成績排名第三

我們來改變一下上個例子的需求，現(xiàn)在的需求是：班里有兩個張三，已知成績好的那個張三在班里排名第一，現(xiàn)在要獲取另一個成績差點的張三在班級里的排名

var?arr?=?['張三',?'小紅',?'小明',?'張三',?'李四',?'王五']

//給indexOf()方法的第二個參數(shù)賦值1，表示從數(shù)組的第二個元素開始找
var?index?=?arr.indexOf('張三',?1)?+?1?

console.log(index)??????????//?4,?表示成績差點的張三排名第四

再來看一個例子。需求是：判斷這個班級里是否有小王這個人，若調用indexOf()方法返回-1，則表示小王不在這個班級中；否則表示小王在這個班級中

var?arr?=?['小紅',?'小明',?'張三',?'李四',?'王五']

var?index?=?arr.indexOf('小王')

if(index?===?-1)?{
????console.log('false')
}
else?{
????console.log('true')
}

//??false

20、lastIndexOf()

lastIndexOf()方法與indexOf()類似，唯一的區(qū)別就是，前者是從數(shù)組的末尾開始搜索，后者是從數(shù)組的開頭開始搜索。所以這里就對該方法做過多的講解了。

21、find()

find()方法是ES6新增的，它是遍歷數(shù)組，找出并返回第一個符合回調函數(shù)的元素（可以通過回調函數(shù)的某些參數(shù)對原數(shù)組進行改動）

該方法只有一個參數(shù)，該參數(shù)為回調函數(shù)，該回調函數(shù)有三個參數(shù)，它們的含義分別為：數(shù)組元素 、元素的索引 、數(shù)組本身

該方法是遍歷數(shù)組的每一個元素，并依次調用回調函數(shù)，回調函數(shù)最先返回true的元素作為最終的返回值

我們來看一個例子。需求是：在一個數(shù)組中，找出第一個大于10的元素

var?arr?=?[1,?7,?3,?10,?12,?20]

var?result?=?arr.find(function?(value)?{
????return?value?>?10
})

console.log(result)???//?12,?表示數(shù)組中找到的第一個比10大的元素為12

22、findIndex()

findIndex()方法也是ES6新增的方法，它是遍歷數(shù)組，找出第一個符合回調函數(shù)的元素的索引（不會改變原數(shù)組）

該方法只有一個參數(shù)，那就是數(shù)組的元素

直接來看例子。需求是：找出一個數(shù)組中，第一個大于9的元素在數(shù)組中的索引

var?result?=?[3,?4,?10,?8,?9,?0].findIndex(function?(value)?{
????return?value?>?9
})

console.log(result)???//?2，表示該數(shù)組中第一個大于9的元素索引為2

23、fill()

fill()方法是ES6新增方法，它是用于填充數(shù)組的（會改變原數(shù)組）

參數(shù)（共3個）：

1. 第一個參數(shù)：表示用于填充數(shù)組的值
2. 第二個參數(shù)：可選參數(shù)，表示填充的起始位置
3. 第三個參數(shù)：可選參數(shù)，表示填充的結束位置，若省略該參數(shù)并且填寫了第二個參數(shù)，則表示從起始位置開始一直到末尾的所有元素都被填充

我們來看幾個簡單的例子就能理解這個方法的用法了

[1,2,3,4,5].fill(6)?????????//返回?[6,?6,?6,?6,?6]

[1,2,3,4,5].fill(6,?2)??????//返回?[1,?2,?6,?6,?6]

[1,2,3,4,5].fill(6,?2,?3)???//返回?[1,?2,?6,?4,?5]

24、includes()

includes()方法也是ES6新增的非常實用的一個方法，它是判斷一個數(shù)是否在該數(shù)組中的（不會改變原數(shù)組）

參數(shù)（共2個）：

1. 第一個參數(shù)：該參數(shù)為需要判斷是否存在于數(shù)組中的數(shù)
2. 第二個參數(shù)：表示搜索的起始位置，默認為0，即從頭開始搜索。若為負數(shù)，則表示從倒數(shù)第幾個開始搜索，若輸入的位置超出了數(shù)組長度，則默認還是為0

我們來看個例子。需求是：判斷banana是否在數(shù)組中

var?arr?=?['chery',?'banana',?'apple',?'watermelon']

var?result?=?arr.includes('banana')

console.log(result)????//true,?表示banana在數(shù)組中

我們再來看看，加上第二個參數(shù)以后是什么樣的

var?arr?=?['chery',?'banana',?'apple',?'watermelon']

var?result?=?arr.includes('banana',?-2)?//表示從倒數(shù)第二個開始找

console.log(result)?//false,?表示從倒數(shù)第二個開始找，沒有找到banana

之所以整理了一下JavaScript數(shù)組的常用函數(shù)方法，其實是因為我最近準備寫一系列的【數(shù)據(jù)結構與算法】的文章，發(fā)現(xiàn)數(shù)組是JS中最常用的數(shù)據(jù)結構了，那必須得寫一篇，這樣到時候大家在看我文章的時候可以利用這些函數(shù)來完成數(shù)據(jù)結構的增刪改查或算法的實現(xiàn)。

當然了，這篇文章也是非常的基礎，可以供大家在學習JavaScript基礎時使用，也可以作為一個寶典，在忘記函數(shù)的使用方法或者參數(shù)的含義時，可以來查閱。

希望這篇文章能對你們有所幫助，創(chuàng)作不易，喜歡的加個關注，積極轉發(fā)，給個贊~ 我們一起玩轉前端