JavaScript在其內(nèi)部封裝了一個Array對象，使得我們可以方便地使用數(shù)組這種簡單的數(shù)據(jù)結(jié)構(gòu)，同時，也在 Array對象的原型上定義了一些常用并且很有用的操作數(shù)組的函數(shù)。
本文就將詳細介紹一下每個操作數(shù)組的函數(shù)是如何使用的
引言
就問你，你在寫JavaScript代碼的時候，是不是經(jīng)常用到像這樣的數(shù)據(jù)結(jié)構(gòu) var arr = [1, 2, 3, 4]，如果是的話，那你可就要好好看下文了，每一個函數(shù)方法都給你安排明白了。
數(shù)組方法
數(shù)組的方法一共有很多，見下表
| 函數(shù) | 作用 |
|---|---|
| join() | 將數(shù)組中所有元素都轉(zhuǎn)化為字符串連接在一起 |
| sort() | 將數(shù)組中的元素排序 |
| reverse() | 將數(shù)組中的元素顛倒順序 |
| concat() | 將多個數(shù)組或數(shù)連接起來，組成一個新的數(shù)組 |
| slice() | 返回指定數(shù)組的一個片段或子數(shù)組 |
| splice() | 在數(shù)組指定位置插入或刪除元素 |
| push() | 在數(shù)組的尾部添加一個或多個元素 |
| pop() | 刪除數(shù)組的最后一個元素，并返回該元素 |
| unshift() | 在數(shù)組的頭部添加一個或多個元素 |
| shift() | 刪除數(shù)組第一個元素，并返回該元素 |
| toString() | 返回將數(shù)組每個元素轉(zhuǎn)化為字符串并用逗號分隔連接起來的字符串 |
| forEach() | 從頭至尾遍歷數(shù)組，為每個元素調(diào)用指定的函數(shù) |
| map() | 將調(diào)用的數(shù)組的每個元素傳遞給指定的函數(shù)，并返回一個數(shù)組 |
| filter() | 根據(jù)回調(diào)函數(shù)內(nèi)的邏輯判斷過濾數(shù)組元素，并返回一個新的數(shù)組 |
| every() | 對數(shù)組元素應(yīng)用指定的函數(shù)進行判斷，返回true或false |
| some() | 對數(shù)組元素應(yīng)用指定的函數(shù)進行判斷，返回true或false |
| reduce() | 使用指定的函數(shù)將數(shù)組元素進行組合 |
| reduceRigth() | 使用指定的函數(shù)將數(shù)組元素進行組合 |
| indexOf() | 判斷一個數(shù)在該數(shù)組中的索引位置 |
| lastIndexOf() | 判斷一個數(shù)在該數(shù)組中的索引位置 |
| find() | 遍歷數(shù)組，找出第一個符合回調(diào)函數(shù)的元素 |
| findIndex() | 遍歷數(shù)組，找出第一個符合回調(diào)函數(shù)的元素的索引 |
| fill() | 用于填充數(shù)組 |
| includes() | 判斷一個數(shù)是否在該數(shù)組中 |
join()方法主要是用于將數(shù)組內(nèi)的所有元素連接在一起轉(zhuǎn)化為字符串，并返回這個字符串。
參數(shù)（共1個）：
join()方法使用實例
var arr = [1, 2, 3, 4]
arr.join() //返回 '1,2,3,4'
arr.join('-') //返回 '1-2-3-4'
sort()方法是將數(shù)組中的每個元素按一定條件排序后并返回排序后的新數(shù)組（會改變原數(shù)組）
參數(shù)（共1個）：
a和b。當回調(diào)函數(shù)返回一個小于0的數(shù)時，參數(shù)a將排在前面；當返回一個大于0的數(shù)時，參數(shù)b將排在前面；當返回0時，則這兩個值不進行比較排序。若省略該參數(shù)，則將每個元素按照字母表的順序排列。sort()方法使用實例
var arr = ['cherry', 'apple', 'banana']
arr.sort() //未傳入回調(diào)函數(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] 升序排列
調(diào)用sort()方法，會每次從數(shù)組中取出兩個數(shù)，分別作為參數(shù)a和參數(shù)b，若回調(diào)函數(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] 降序排列
reverse()方法是將數(shù)組中的元素顛倒，并返回顛倒后的數(shù)組（會改變原數(shù)組）
這個方法很簡單，直接來看例子
var arr = [54, 78, 12, 64]
arr.reverse()
console.log(arr) //返回 [64, 12, 78, 54]
該方法無非就是將數(shù)組轉(zhuǎn)成了逆序數(shù)組
concat()方法將調(diào)用每一個參數(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ù)組中
slice()方法是返回指定的一個數(shù)組片段
該方法有兩個參數(shù)，分別代表了數(shù)組片段的起始位置和結(jié)束位置，第一個參數(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ù)組片段的結(jié)束位置，所以取到的片段是從第一個參數(shù)表示的位置取到第二個參數(shù)表示的位置的前一個元素。
若省略第二個參數(shù)，則表示從第一個參數(shù)表示的位置一直取到最后一個元素
用負數(shù)表示元素位置時，是從末尾往前數(shù)，分別為-1 、-2 、-3……
splice()方法在數(shù)組指定位置插入或刪除元素，并返回刪除元素組成的數(shù)組（會改變原數(shù)組）
參數(shù)（共3個）：
我們直接來看幾個簡單的例子
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ù)，它既可以刪除元素，又可以插入元素
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]
pop()方法是刪除數(shù)組的最后一個元素，并返回該元素（會改變原數(shù)組）
該函數(shù)不需要傳入任何參數(shù)
來簡單看下例子
var arr = [6,8,7]
arr.pop() //返回 7, 此時arr為 [6,8]
arr.pop() //返回 8, 此時arr為 [6]
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]
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為 []
toString()方法是返回將數(shù)組每個元素轉(zhuǎn)化為字符串并用逗號分隔連接起來的字符串（不會改變原數(shù)組）
若遇到數(shù)組里嵌套數(shù)組的話，同樣也會將該嵌套數(shù)組里的每個元素轉(zhuǎn)化為字符串并連接起來
來看幾個例子
[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'
forEach()方法是ES5新增的，它是用來為每個元素調(diào)用指定的函數(shù)（可以修改原數(shù)組）
該方法只有一個參數(shù)，該參數(shù)為回調(diào)函數(shù)，該回調(diào)函數(shù)有三個參數(shù)，這三個參數(shù)的含義分別為數(shù)組元素 、元素的索引 、數(shù)組本身
來看一個例子，現(xiàn)在要求將某一數(shù)組內(nèi)的每個元素都+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ù)組內(nèi)各元素之和
var a = [1,2,3,4,5]
var sum = 0
a.forEach(function(value) {
sum += value
})
console.log(sum) // 15
map()方法是是ES5新增的，它是將調(diào)用的數(shù)組的每個元素傳遞給指定的函數(shù)，把每次調(diào)用回調(diào)函數(shù)的返回值存入到一個新的數(shù)組中，最后返回這個新的數(shù)組（不會改變原數(shù)組）
該方法只有一個參數(shù)，該參數(shù)為回調(diào)函數(shù)，該回調(diào)函數(shù)只有一個參數(shù)，該參數(shù)的含義是數(shù)組的每個元素
來看一個例子，返回一個新的數(shù)組，該數(shù)組內(nèi)的每個元素為原數(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]
filter()方法是ES5新增的，相當于一個過濾器，它是通過回調(diào)函數(shù)里的邏輯判斷來過濾掉不需要的元素，再將剩下的元素都放到一個新的數(shù)組中并返回（不會改變原數(shù)組）
該方法只有一個參數(shù)，該參數(shù)為回調(diào)函數(shù)，該回調(diào)函數(shù)有兩個參數(shù)，他們的含義分別為數(shù)組中的元素 、 元素的索引
當回調(diào)函數(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]
every()方法是針對一個數(shù)組的邏輯判定（不會改變原數(shù)組）
該方法有一個參數(shù)，該參數(shù)為回調(diào)函數(shù)，該回調(diào)函數(shù)有一個參數(shù)，該參數(shù)含義是數(shù)組中的每個元素
當每個元素調(diào)用回調(diào)函數(shù)的返回值全部都為true時，最后返回true；相反，只要有一個元素調(diào)用回調(diào)函數(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中的元素改變幾個，再來看看代碼運行結(jié)果
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
some()方法跟every()方法類似，只是邏輯判斷略有不同，前者是當每個元素調(diào)用回調(diào)函數(shù)后的返回值中，只要有一個為true，則最終返回true；反之，只有當每個元素調(diào)用回調(diào)函數(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刪除以后，我們再來看看返回結(jié)果
var arr = [3, 8, 9, 45]
var result = arr.some(function (value) {
return value === 12
})
console.log(result) // false, 表示該數(shù)組中并沒有元素12
reduce()方法是通過調(diào)用指定的回調(diào)函數(shù)將數(shù)組元素進行組合，并返回組合后的值（不會改變原數(shù)組）
參數(shù)（共2個）：
x、y，這兩個參數(shù)都為調(diào)用數(shù)組的元素成員當省略了第二個參數(shù)時，該方法第一次調(diào)用回調(diào)函數(shù)時，將數(shù)組的第一個元素作為回調(diào)函數(shù)的第一個參數(shù)x的值，將數(shù)組的第二個元素作為回調(diào)函數(shù)的第二個參數(shù)y的值。然后運行回調(diào)函數(shù)里的代碼，將return后的值作為下一次調(diào)用回調(diào)函數(shù)的第一個參數(shù)x的值，然后將數(shù)組的第三個元素作為參數(shù)y的值……以此類推，直到數(shù)組內(nèi)所有元素都被調(diào)用以后，將最后一次調(diào)用回調(diào)函數(shù)的return值作為最終的返回值。
如果給第二個參數(shù)賦值了的話，則在第一次調(diào)用回調(diào)函數(shù)時，是將第二個參數(shù)的值作為該回調(diào)函數(shù)的第一個參數(shù)x的值，將數(shù)組的第一個參數(shù)作為該回調(diào)函數(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個學(xué)生的年齡，現(xiàn)在要計算這5個學(xué)生的年齡和，并加上老師的年齡，老師的年齡為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
reduceRight()方法與reduce()方法類似，唯一不同的就是，后者在調(diào)用數(shù)組元素的時候是從左往右調(diào)用的；前者是從右往左調(diào)用的。這里就不做過多的講解了。
indexOf()方法是獲取某元素在數(shù)組中的索引，并且只返回第一個匹配到的元素的索引；若該元素不在數(shù)組中，則返回 -1（不會改變原數(shù)組）
參數(shù)（共2個）：
我們來看一個例子。需求是：一個班級的學(xué)生按成績從高到低排列好存儲在數(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, 表示成績差點的張三排名第四
再來看一個例子。需求是：判斷這個班級里是否有小王這個人，若調(diào)用indexOf()方法返回-1，則表示小王不在這個班級中；否則表示小王在這個班級中
var arr = ['小紅', '小明', '張三', '李四', '王五']
var index = arr.indexOf('小王')
if(index === -1) {
console.log('false')
}
else {
console.log('true')
}
// false
lastIndexOf()方法與indexOf()類似，唯一的區(qū)別就是，前者是從數(shù)組的末尾開始搜索，后者是從數(shù)組的開頭開始搜索。所以這里就對該方法做過多的講解了。
find()方法是ES6新增的，它是遍歷數(shù)組，找出并返回第一個符合回調(diào)函數(shù)的元素（可以通過回調(diào)函數(shù)的某些參數(shù)對原數(shù)組進行改動）
該方法只有一個參數(shù)，該參數(shù)為回調(diào)函數(shù)，該回調(diào)函數(shù)有三個參數(shù)，它們的含義分別為：數(shù)組元素 、元素的索引 、數(shù)組本身
該方法是遍歷數(shù)組的每一個元素，并依次調(diào)用回調(diào)函數(shù)，回調(diào)函數(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
findIndex()方法也是ES6新增的方法，它是遍歷數(shù)組，找出第一個符合回調(diào)函數(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
fill()方法是ES6新增方法，它是用于填充數(shù)組的（會改變原數(shù)組）
參數(shù)（共3個）：
我們來看幾個簡單的例子就能理解這個方法的用法了
[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]
includes()方法也是ES6新增的非常實用的一個方法，它是判斷一個數(shù)是否在該數(shù)組中的（不會改變原數(shù)組）
參數(shù)（共2個）：
我們來看個例子。需求是：判斷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
結(jié)束語
之所以整理了一下JavaScript數(shù)組的常用函數(shù)方法，其實是因為我最近準備寫一系列的【數(shù)據(jù)結(jié)構(gòu)與算法】的文章，發(fā)現(xiàn)數(shù)組是JS中最常用的數(shù)據(jù)結(jié)構(gòu)了，那必須得寫一篇，這樣到時候大家在看我文章的時候可以利用這些函數(shù)來完成數(shù)據(jù)結(jié)構(gòu)的增刪改查或算法的實現(xiàn)。
當然了，這篇文章也是非常的基礎(chǔ)，可以供大家在學(xué)習(xí)JavaScript基礎(chǔ)時使用，也可以作為一個寶典，在忘記函數(shù)的使用方法或者參數(shù)的含義時，可以來查閱。
希望這篇文章能對你們有所幫助，創(chuàng)作不易，喜歡的加個關(guān)注，積極轉(zhuǎn)發(fā)，給個贊~ 我們一起玩轉(zhuǎn)前端
