溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“JavaScript數(shù)組操作方法有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
本文只講解標(biāo)準(zhǔn)化方法，而不會(huì)講解實(shí)驗(yàn)性方法，如at()、groupBy()、groupByMap()和toSource()。
數(shù)組中的部分方法需要提供區(qū)間范圍begin/start和end，所有含有這類范圍的方法，其區(qū)間都遵循左閉右開原則，如(1,4)，在數(shù)學(xué)上可以理解為[1,4)。
部分?jǐn)?shù)組方法會(huì)改變?cè)瓟?shù)組，這一點(diǎn)一定要注意。
填充與復(fù)制方法：fill()、copeWithin()；
棧方法：pop()、push()；
隊(duì)列方法：shift()、unshift()；
排序方法：sort()、reverse()；
刪除/插入/替換方法：splice()。
其實(shí)很好理解和記憶，除去上面列出的方法類型，其他方法類型大概為查找方法和迭代方法，這兩種類型的方法是不會(huì)改變?cè)瓟?shù)組的。
除去上面以外的其他方法不會(huì)改變?cè)瓟?shù)組，但有三個(gè)方法容易記錯(cuò)：
concat()：用于合并數(shù)組，該方法會(huì)返回合并后的新數(shù)組。
slice()：用于根據(jù)區(qū)間截取數(shù)組中的元素，返回截取后的新數(shù)組，主要是容易和splice()記混。
flat()：用于扁平化數(shù)組，該方法返回扁平化后的新數(shù)組。
棧是一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)，JavaScript中的數(shù)組通過push()和pop()兩個(gè)方法實(shí)現(xiàn)入棧和出棧的操作。
push()語法如下：
let newLength = arr.push(element1, element2, ..., elementN)
方法說明如下：
功能描述：push()方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾；
函數(shù)參數(shù)：一個(gè)或多個(gè)元素；
返回值：返回該數(shù)組的新長度length；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']
let result = arr.push('D')
console.log(arr) // [ 'A', 'B', 'C', 'D' ]
console.log(result) // 4
result = arr.push('E', 'F')
console.log(arr) // [ 'A', 'B', 'C', 'D', 'E', 'F' ]
console.log(result) // 6圖解如下：
pop()語法如下：
let deletedValue = arr.pop()
方法說明如下：
功能描述：pop()方法從數(shù)組中刪除最后一個(gè)元素；
函數(shù)參數(shù)：無參數(shù)；
返回值：返回被刪除的最后一個(gè)元素的值；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C'] let result = arr.pop() console.log(arr) // [ 'A', 'B' ] console.log(result) // C result = arr.pop() console.log(arr) // [ 'A' ] console.log(result) // B
圖解如下：
隊(duì)列是一種先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，JavaScript中的數(shù)組通過push()和shift()兩個(gè)方法實(shí)現(xiàn)入隊(duì)和出隊(duì)的操作。其中push()方法請(qǐng)參閱2.1節(jié)，本章節(jié)主要講解shift()及其逆向方法unshift()。
shift()語法如下：
let deletedValue = arr.shift()
方法說明如下：
功能描述：shift()方法從數(shù)組中刪除第一個(gè)元素；
函數(shù)參數(shù)：無參數(shù)；
返回值：返回被刪除的第一個(gè)元素的值；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C'] let result = arr.shift() console.log(arr) // [ 'B', 'C' ] console.log(result) // A result = arr.shift() console.log(arr) // [ 'C' ] console.log(result) // B
圖解如下：
unshift()unshift()方法說明如下：
功能描述：unshift()方法將一個(gè)或多個(gè)元素添加到數(shù)組的開頭；
函數(shù)參數(shù)：一個(gè)或多個(gè)元素；
返回值：返回該數(shù)組的新長度newLength；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
語法如下：
let newLength = arr.unshift(element1, element2, ..., elementN)
示例如下：
let arr = ['A', 'B', 'C']
let result = arr.unshift('D')
console.log(arr) // [ 'D', 'A', 'B', 'C' ]
console.log(result) // 4
result = arr.unshift('E', 'F')
console.log(arr) // [ 'E', 'F', 'D', 'A', 'B', 'C' ]
console.log(result) // 6圖解如下：
JavaScript中的數(shù)組提供自定義規(guī)則排序sort()方法和根據(jù)下標(biāo)逆置數(shù)組reverse()方法。
sort()語法如下：
let sortedArray = arr.sort([compareFunction]) // compareFunction是可選的
方法說明如下：
功能描述：sort()方法將數(shù)字元素按照字符串，然后依次比較其Unicode值（由小到大排序）；
函數(shù)參數(shù)：【可選】指定排序比較的函數(shù)compareFunction；
返回值：返回排序后的新數(shù)組；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = [4, 6, 3, 1, 5, 2]arr.sort()console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]
顯而易見，上面代碼的運(yùn)行結(jié)果是符合預(yù)期的，下面再舉一個(gè)例子：
let arr = [16, 2, 32, 4, 25]arr.sort()console.log(arr); // [ 16, 2, 25, 32, 4 ]
最后輸出的結(jié)果為[ 16, 2, 25, 32, 4 ]，這顯然是不符合預(yù)期的，造成這種情況的原因是當(dāng)不指定compareFunction比較函數(shù)時(shí)，默認(rèn)采用的是比較字符串Unicode值的形式，在進(jìn)行字符串比較時(shí)，依次比較字符串各個(gè)位置的值，由于字符串'1'的Unicode值比字符串'2'的Unicode值小，所以數(shù)組arr中的元素16會(huì)排在元素2和元素4之前，其他元素同理。
要解決這個(gè)問題，需要明確指定compareFunction比較函數(shù)，該函數(shù)的完全表達(dá)形式為compareFunction(a, b)，其中參數(shù)a和參數(shù)b表示將要比較的兩個(gè)元素，compareFunction(a, b)的返回值共有如下三種情況，決定著排序的結(jié)果：
小于0：a會(huì)排序在b之前；
等于0：a和b的相對(duì)位置不變；
大于0：a會(huì)排序在b之后。
下面舉個(gè)具體的例子，以升序排序?yàn)槔?，由于排序要求為升序排列，那么較小的數(shù)應(yīng)該排在前面，即當(dāng)a和b進(jìn)行比較時(shí)，若a比b的值小，那么應(yīng)該返回一個(gè)小于0的數(shù)；當(dāng)a比b的值大時(shí)，應(yīng)該返回一個(gè)大于0的數(shù)；根據(jù)以上分析，需要的compareFunction比較函數(shù)如下：
function compareFunction(a, b) {
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;}// 簡寫為function compareFunction(a, b) {
return a - b}// 箭頭函數(shù)簡寫為(a, b) => a - b最終修改后的代碼如下：
let arr = [16, 2, 32, 4, 25]arr.sort((a, b) => a - b)console.log(arr); // [ 2, 4, 16, 25, 32 ]
此時(shí)的輸出結(jié)果是符合預(yù)期的。
注：若要實(shí)現(xiàn)降序排序的效果，只需要將
compareFunction參數(shù)改為(a, b) => b - a即可。
reverse()語法如下：
arr.reverse()
方法說明如下：
功能描述：reverse()方法將數(shù)組中元素的位置按下標(biāo)逆置；
函數(shù)參數(shù)：無參數(shù)；
返回值：返回逆置后的新數(shù)組；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']arr.reverse()console.log(arr) // [ 'C', 'B', 'A' ]
圖解如下：
JavaScript中提供了slice()方法用于實(shí)現(xiàn)給定區(qū)間元素的提取，還提供了contact()方法用于給定數(shù)組或元素的合并。
slice()語法如下：
let newArray = arr.slice([begin[, end]])
方法說明如下：
功能描述：slice()方法將截取數(shù)組中固定區(qū)間中的元素；
函數(shù)參數(shù)：
【可選】begin：截取下標(biāo)的起始位置，閉區(qū)間，包括該下標(biāo)；默認(rèn)值為0，begin值不可大于數(shù)組長度，否則返回空數(shù)組；
【可選】end：截取下標(biāo)的終點(diǎn)位置，開區(qū)間，不包括該下標(biāo)；默認(rèn)為截取到數(shù)組末尾，end值若大于數(shù)組長度，則會(huì)截取到數(shù)組末尾。
返回值：返回截取后的新數(shù)組；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E'] let result = arr.slice() console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ] let result = arr.slice(1, 4) console.log(result) // [ 'B', 'C', 'D' ]
圖解如下：
slice()方法的begin和end兩個(gè)參數(shù)可以為負(fù)數(shù)：
begin為負(fù)數(shù)時(shí)，則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開始提取，slice(-2)表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素（包含最后一個(gè)元素）。
end為負(fù)數(shù)時(shí)，則表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。 slice(-2, -1)表示抽取了原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素（不包含最后一個(gè)元素，也就是只有倒數(shù)第二個(gè)元素）。
下面舉個(gè)例子：
let arr = ['A', 'B', 'C', 'D', 'E'] let result = arr.slice(-2, -1) console.log(result) // [ 'D' ] result = arr.slice(-3) console.log(result) // [ 'C', 'D', 'E' ]
圖解如下：
contact()語法如下：
let newArray = arr.concat(value1[, value2[, ...[, valueN]]])
方法說明如下：
功能描述： concat()方法用于合并兩個(gè)或多個(gè)元素；
函數(shù)參數(shù)：兩個(gè)或多個(gè)元素；
返回值：返回合并后的新數(shù)組；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']
let result = arr.concat('D', 'E')
console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]需要注意的是，concat()方法會(huì)將傳入的數(shù)組參數(shù)做一次扁平化處理，如下面代碼：
let arr = ['A', 'B', 'C'] let result = arr.concat(['D', 'E', ['F']]) console.log(result) // [ 'A', 'B', 'C', 'D', 'E', [ 'F' ] ]
splice()方法splice()方法是JavaScript中數(shù)組最為強(qiáng)大的方法之一，可以調(diào)整參數(shù)實(shí)現(xiàn)刪除、插入和替換元素操作。
語法如下：
let deletedItems = array.splice(start[, howmany[, item1[, item2[, ...]]]])
方法說明如下：
功能描述： splice()方法用于在數(shù)組中進(jìn)行刪除、插入和替換操作；
函數(shù)參數(shù)：（splice()方法的參數(shù)較為復(fù)雜，下面小節(jié)詳細(xì)講解）；
返回值：返回被刪除或替換的內(nèi)容；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
splice()方法的參數(shù)如下：
【必須】start：操作的起始下標(biāo)，規(guī)定刪除、插入或替換元素的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
【必須】howmany：要?jiǎng)h除的元素個(gè)數(shù)。
【可選】item1, ..., itemx：要插入或替換的元素。
上面三種參數(shù)進(jìn)行不同搭配可以實(shí)現(xiàn)刪除、插入和替換三種操作。
使用splice()方法進(jìn)行刪除元素操作的特征是只提供兩個(gè)參數(shù)：
start：要?jiǎng)h除元素的起始下標(biāo)；
howmany：要?jiǎng)h除元素的個(gè)數(shù)。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E'] let result = arr.splice(1, 3) console.log(arr); // [ 'A', 'E' ] console.log(result) // [ 'B', 'C', 'D' ]
在這個(gè)例子中，指定從下標(biāo)1開始刪除三個(gè)元素，返回被刪除的元素[ 'B', 'C', 'D' ]，刪除后原數(shù)組arr為[ 'A', 'E' ]。
使用splice()方法進(jìn)行插入元素操作的特征是提供三個(gè)參數(shù)，且第二個(gè)參數(shù)必須是0：
start：要插入元素的起始下標(biāo)；
howmany：要?jiǎng)h除元素的個(gè)數(shù)，既然是替換，則不刪除原數(shù)組的任何元素，所以是0。
item1, ..., itemx：要插入的元素。
示例如下：
let arr = ['A', 'B', 'C'] let result = arr.splice(1, 0, 'D', 'E') console.log(arr); // [ 'A', 'D', 'E', 'B', 'C' ] console.log(result) // []
在這個(gè)例子中，指定從下標(biāo)1開始插入元素，不刪除原數(shù)組的元素，插入元素'D', 'E'，由于沒有刪除或替換元素，所以返回值為空數(shù)組[]，插入元素后的原數(shù)組arr為[ 'A', 'D', 'E', 'B', 'C' ]。
使用splice()方法進(jìn)行插入元素操作的特征是提供三個(gè)參數(shù)，且第二個(gè)參數(shù)不為0，為要替換元素的個(gè)數(shù)：
start：要替換元素的起始下標(biāo)；
howmany：要替換元素的個(gè)數(shù)。
item1, ..., itemx：要插入的元素。
示例如下：
let arr = ['A', 'B', 'C'] let result = arr.splice(1, 2, 'D', 'E') console.log(arr); // [ 'A', 'D', 'E' ] console.log(result) // [ 'B', 'C' ]
在這個(gè)例子中，指定從下標(biāo)1開始替換元素，共替換2個(gè)元素，并將其替換為'D', 'E'，最后返回被刪除（替換）的元素[ 'B', 'C' ]，替換元素后的原數(shù)組arr為[ 'A', 'D', 'E' ]。
在ES6標(biāo)準(zhǔn)中新增了兩個(gè)方法用于數(shù)組的填充和復(fù)制，即fill()方法和copyWithin()。
fill()語法如下：
let filledArray = arr.fill(value[, start[, end]])
方法說明如下：
功能描述： fill()方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始下標(biāo)到終止下標(biāo)內(nèi)的全部元素。不包括終止下標(biāo)；
函數(shù)參數(shù)：若不提供start和end，則填充全部元素，若只提供start則填充到數(shù)組末尾：
【必選】value：指定用來填充的固定值；
【可選】start：進(jìn)行填充的起始下標(biāo)，閉區(qū)間，包括該下標(biāo)；
【可選】end：進(jìn)行填充的終止下標(biāo)，開區(qū)間，不包括該下標(biāo)；
返回值：返回填充后的數(shù)組；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']
let result = arr.fill('@', 2, 4)
console.log(result) // [ 'A', 'B', '@', '@', 'E' ]圖解如下：
copyWithin()語法如下：
let copiedArray = arr.copyWithin(target[, start[, end]])
方法說明如下：
功能描述： copyWithin()方法淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置；
函數(shù)參數(shù)：若不提供start和end，則從target開始復(fù)制后續(xù)全部元素，若只提供start則復(fù)制到數(shù)組末尾：
【必選】target：指定放置的目標(biāo)位置；
【可選】start：進(jìn)行復(fù)制的起始下標(biāo)，閉區(qū)間，包括該下標(biāo)；
【可選】end：進(jìn)行復(fù)制的終止下標(biāo)，開區(qū)間，不包括該下標(biāo)；
返回值：返回復(fù)制后的數(shù)組；
是否改變?cè)瓟?shù)組：改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E'] let result = arr.copyWithin(0, 1, 3) console.log(arr) // [ 'B', 'C', 'C', 'D', 'E' ] console.log(result) // [ 'B', 'C', 'C', 'D', 'E' ]
圖解如下：
JavaScript中數(shù)組的查找方法有很多：indexOf()、lastIndexOf()、find()、findIndex()和includes()。其中find()、findIndex()是ES6新增的方法；includes()是ES7新增的方法。
indexOf()語法如下：
let index = arr.indexOf(searchElement[, fromIndex])
方法說明如下：
功能描述： indexOf()方法返回在數(shù)組中正序可以找到一個(gè)給定元素的第一個(gè)下標(biāo)；
函數(shù)參數(shù)：
【必選】searchElement：指定要查找的元素；
【可選】fromIndex：指定開始查找的下標(biāo)，若該參數(shù)為負(fù)數(shù)，則從數(shù)組末尾開始倒數(shù)；
返回值：返回首個(gè)被找到的元素在數(shù)組中的下標(biāo)，如果不存在，則返回-1；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']
let result = arr.indexOf('C')
console.log(result) // 2
result = arr.indexOf('C', 3)
console.log(result) // -1第一次查找arr.indexOf('C')返回2這個(gè)容易理解，第二次查找arr.indexOf('C', 3)由于指定了從下標(biāo)3開始查找，即從數(shù)組元素D開始向后查找，顯然后面是沒有C元素，所以返回-1。
lastIndexOf()語法如下：
let index = arr.lastIndexOf(searchElement[, fromIndex])
方法說明如下：
功能描述： lastIndexOf()方法返回在數(shù)組中倒序可以找到一個(gè)給定元素的第一個(gè)下標(biāo)；
函數(shù)參數(shù)：
【必選】searchElement：指定要查找的元素；
【可選】fromIndex：指定開始查找的下標(biāo)，若該參數(shù)為負(fù)數(shù)，則從數(shù)組末尾開始倒數(shù)；
返回值：返回首個(gè)被找到的元素在數(shù)組中的下標(biāo)，如果不存在，則返回-1；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']
let result = arr.lastIndexOf('C')
console.log(result) // 2
result = arr.lastIndexOf('C', 3)
console.log(result) // 2第一次查找arr.lastIndexOf('C')返回2這個(gè)容易理解，第二次查找arr.lastIndexOf('C', 3)由于指定了從下標(biāo)3開始倒序查找，即從數(shù)組元素D開始向前查找，元素D之前是有C元素的，所以返回2。
find()語法如下：
let item = arr.find(callback[, thisArg])
方法說明如下：
功能描述： find()方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值；
函數(shù)參數(shù)：
【必選】callback()：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，find()方法會(huì)對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次callback()方法，直到有一個(gè)元素返回true，callback()有一個(gè)必選參數(shù)item，表示當(dāng)前元素；還有兩個(gè)可選參數(shù)index表示當(dāng)前下標(biāo)，array表示當(dāng)前數(shù)組本身；
【可選】thisArg：執(zhí)行回調(diào)時(shí)用作this的對(duì)象。
返回值：數(shù)組中第一個(gè)滿足所提供測試函數(shù)的元素的值，否則返回undefined；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.find(item => item === 'C')console.log(result) // C
在這個(gè)例子中提供的callback()方法為item => item === 'C'，find()方法會(huì)對(duì)每一個(gè)元素都執(zhí)行該函數(shù)判斷，直到遇到返回滿足item === 'C'的元素，所以最后返回C。
findIndex()若讀者已經(jīng)掌握
find()的使用方法，那么findIndex()與find()的區(qū)別只有返回值的區(qū)別，find()返回的是匹配的元素，而findIndex()返回的是匹配的元素的下標(biāo)。
語法如下：
let index = arr.findIndex(callback[, thisArg])
方法說明如下：
功能描述： findIndex()方法返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的下標(biāo)；
函數(shù)參數(shù)：
【必選】callback()：在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù)，find()方法會(huì)對(duì)數(shù)組中的每個(gè)元素都執(zhí)行一次callback()方法，直到有一個(gè)元素返回true，callback()有一個(gè)必選參數(shù)item，表示當(dāng)前元素；還有兩個(gè)可選參數(shù)index表示當(dāng)前下標(biāo)，array表示當(dāng)前數(shù)組本身；
【可選】thisArg：執(zhí)行回調(diào)時(shí)用作this的對(duì)象。
返回值：數(shù)組中第一個(gè)滿足所提供測試函數(shù)的元素的下標(biāo)，否則返回-1；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E'] let result = arr.findIndex(item => item === 'C') console.log(result) // 2
在這個(gè)例子中，元素C與item => item === 'C'匹配，返回元素C的下標(biāo)2。
includes()語法如下：
let isIncludes = arr.includes(valueToFind[, fromIndex])
方法說明如下：
功能描述： includes()方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值；
函數(shù)參數(shù)：
【必選】valueToFind：指定要查找的元素；
【可選】fromIndex：指定開始查找的下標(biāo)，若該參數(shù)為負(fù)數(shù)，則從數(shù)組末尾開始倒數(shù)；
返回值：如果包含則返回true，否則返回false；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']
let result = arr.includes('C')
console.log(result) // true
result = arr.includes('F')
console.log(result) // false數(shù)組的轉(zhuǎn)換方法主要有四個(gè)：toLocaleString()、toString()、valueOf()、join()。其中toLocaleString()、toString()、valueOf()屬于Object原型上的方法；而join()方法時(shí)數(shù)組轉(zhuǎn)字符串的方法。
toString()語法如下：
let str = arr.toString()
方法說明如下：
功能描述： toString()方法返回的是由數(shù)組中每個(gè)值的字符串拼接而成的一個(gè)逗號(hào)分隔的字符串；
函數(shù)參數(shù)：無參數(shù)；
返回值：數(shù)組元素拼接而成的字符串；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']let result = arr.toString()console.log(result) // A,B,C,D,E
toLocaleString()toString()和toLocaleString()在大多數(shù)情況下的使用是相同的，但有兩點(diǎn)需要注意：
當(dāng)數(shù)組元素有數(shù)字且數(shù)字長度大于等于四位時(shí)，toLocaleString()會(huì)添加千位分割逗號(hào)：
let arr = [1234]let result = arr.toLocaleString()console.log(result) // 1,234
當(dāng)數(shù)組元素有日期元素時(shí)，toLocaleString()會(huì)將其轉(zhuǎn)換為本地時(shí)間表示法：
let arr = [new Date()]let result = arr.toLocaleString()console.log(result) // 2022/3/24下午8:48:42
valueOf()語法如下：
let value = arr.valueOf()
方法說明如下：
功能描述： valueOf()方法返回的是數(shù)組本身；
函數(shù)參數(shù)：無參數(shù)；
返回值：數(shù)組本身；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E'] let result = arr.valueOf() console.log(result) // [ 'A', 'B', 'C', 'D', 'E' ]
join()語法如下：
let str = arr.join([separator])
方法說明如下：
功能描述： join()方法返回所有元素連接成一個(gè)字符串（數(shù)組轉(zhuǎn)字符串的方法）；
函數(shù)參數(shù)：【可選】separator分隔符，用于指定每個(gè)元素之間的分隔符，默認(rèn)值為逗號(hào),；
返回值：連接成的字符串；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C', 'D', 'E']
let result = arr.join()
console.log(result) // A,B,C,D,E
result = arr.join('@')
console.log(result) // A@B@C@D@EJavaScript為數(shù)組提供了兩個(gè)歸并方法：reduce()和reduceRight()，兩者用法幾乎相同，只是元素執(zhí)行的順序不同。
reduce()語法如下：
let newValue = reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)方法說明如下：
功能描述： reduce()方法正序?qū)?shù)組中的每個(gè)元素執(zhí)行一個(gè)reducer函數(shù)，每一次運(yùn)行reducer函數(shù)會(huì)將先前元素的計(jì)算結(jié)果作為參數(shù)傳入，最后將其結(jié)果匯總為單個(gè)返回值；
函數(shù)參數(shù)：
【必選】reducer()函數(shù)，該函數(shù)的參數(shù)較為復(fù)雜，后文會(huì)詳細(xì)介紹；
【可選】initialValue初始值，后文會(huì)舉例說明該參數(shù)的作用。
返回值：單個(gè)匯總值；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
reducer()函數(shù)的參數(shù)：
previousValue：上一次調(diào)用reducer()時(shí)的返回值。在第一次調(diào)用時(shí)，若指定了初始值initialValue，其值則為initialValue，否則為數(shù)組索引為0的元素array[0]。
currentValue：數(shù)組中正在處理的元素。在第一次調(diào)用時(shí)，若指定了初始值initialValue，其值則為數(shù)組索引為0的元素array[0]，否則為array[1]。
currentIndex：數(shù)組中正在處理的元素的索引。若指定了初始值initialValue，則起始索引號(hào)為0，否則從索引1起始。
array：當(dāng)前用于遍歷的數(shù)組。
由于是否指定initialValue參數(shù)對(duì)執(zhí)行過程有一定影響，下面將分兩種情況講解：
無initialValue參數(shù)
示例如下，以一個(gè)求數(shù)組各個(gè)元素的累積和為例：
let arr = [1, 2, 3, 4]
let result = arr.reduce((previousValue, currentValue, currentIndex, array) => {
console.log(previousValue, currentValue, currentIndex)
return previousValue + currentValue
})
console.log(result) // 10
// console.log(previousValue, currentValue, currentIndex)
// 1 2 1
// 3 3 2
// 6 4 3在這個(gè)例子中，可見console.log(previousValue, currentValue, currentIndex)輸出了三次，說明reducer()函數(shù)被執(zhí)行了三次，流程如下圖所示：
不難發(fā)現(xiàn)，上一次reducer函數(shù)返回的previousValue + currentValue為下一次reducer函數(shù)的previousValue參數(shù)。
有initialValue參數(shù)
同樣以求和為例，添加initialValue參數(shù)為5：
let arr = [1, 2, 3, 4]
let result = arr.reduce((previousValue, currentValue, currentIndex, array) => {
console.log(previousValue, currentValue, currentIndex)
return previousValue + currentValue
}, 5)
console.log(result) // 15
// console.log(previousValue, currentValue, currentIndex)
// 5 1 0
// 6 2 1
// 8 3 2
// 11 4 3可以發(fā)現(xiàn)console.log(previousValue, currentValue, currentIndex)輸出了四次，說明reducer函數(shù)被執(zhí)行了四次，流程如下圖所示：
可以發(fā)現(xiàn)，第一次執(zhí)行reducer函數(shù)的previousValue參數(shù)不是數(shù)組的第一個(gè)元素array[0]，而是指定的initialValue值。
總結(jié)來說：如果沒有提供initialValue，reduce函數(shù)會(huì)從索引1的地方開始執(zhí)行。如果提供了initialValue，從索引0開始。
reduceRight()reduceRight()方法和的上面的reduce()用法幾乎相同，只是該方法是對(duì)數(shù)組進(jìn)行倒序執(zhí)行。而reduce()方法是正序執(zhí)行的。
let arr = [1, 2, 3, 4]
let result = arr.reduceRight((previousValue, currentValue, currentIndex, array) => {
console.log(previousValue, currentValue, currentIndex)
return previousValue + currentValue
})
console.log(result) // 10
// console.log(previousValue, currentValue, currentIndex)
// 4 3 2
// 7 2 1
// 9 1 0圖解如下：
可參閱Iterator 和 for…of 循環(huán)
在ES6中提供了三個(gè)用于遍歷數(shù)組的方法：keys()、values()、entries()，它們都返回一個(gè)迭代器對(duì)象，可以使用for...of進(jìn)行遍歷。
keys()keys()方法返回?cái)?shù)組下標(biāo)的迭代器，無參數(shù)，不改變?cè)瓟?shù)組，示例如下：
let arr = ['A', 'B', 'C']
let result = arr.keys()
console.log(typeof result) // object
for (item of result) {
console.log(item)
}
// console.log(item)
// 0
// 1
// 2values()values()方法返回?cái)?shù)組元素的迭代器，無參數(shù)，不改變?cè)瓟?shù)組，示例如下：
let arr = ['A', 'B', 'C']
let result = arr.values()
console.log(typeof result) // object
for (item of result) {
console.log(item)
}
// console.log(item)
// A
// B
// Centries()entries()方法返回索引值對(duì)的迭代器，無參數(shù)，不改變?cè)瓟?shù)組，示例如下：
let arr = ['A', 'B', 'C']
let result = arr.entries()
console.log(typeof result) // object
for (item of result) {
console.log(item)
}
// console.log(item)
// [ 0, 'A' ]
// [ 1, 'B' ]
// [ 2, 'C' ]JavaScript中為數(shù)組提供了5個(gè)迭代方法，分別是every()、filter()、forEach()、map()、some()。
forEach()語法如下：
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
方法說明如下：
功能描述： forEach 方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)；
函數(shù)參數(shù)：
【必選】callback()：用于每個(gè)元素執(zhí)行的回調(diào)函數(shù)；
【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
返回值：無返回值；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = ['A', 'B', 'C']
arr.forEach((item, index, arr) => {
console.log(item, index)
})
// console.log(item, index)
// A 0
// B 1
// C 2該方法還可以有第二個(gè)參數(shù)thisArg，用來綁定回調(diào)函數(shù)內(nèi)部this變量（此時(shí)callback()函數(shù)不能為箭頭函數(shù)）：
let arr = ['A', 'B', 'C']
let arr2 = ['D', 'E', 'F']
arr.forEach(function(item, index, arr) {
console.log(this[index])
}, arr2)
// console.log(this[index])
// D
// E
// Fmap()語法如下：
let newArray = arr.map(callback(currentValue [, index [, array]])[, thisArg])
方法說明如下：
功能描述： map()方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素是調(diào)用一次提供的函數(shù)后的返回值；
函數(shù)參數(shù)：
【必選】callback()：用于每個(gè)元素執(zhí)行的回調(diào)函數(shù)；
【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
返回值：返回一個(gè)處理后的新數(shù)組；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下，下面例子將數(shù)組arr中的每個(gè)元素都乘以二：
let arr = [1, 2, 3] let result = arr.map((item, index, arr) => item * 2) console.log(result) // [ 2, 4, 6 ]
filter()語法如下：
let newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
方法說明如下：
功能描述： filter()方法創(chuàng)建一個(gè)新數(shù)組，其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素 ；
函數(shù)參數(shù)：
【必選】callback()：用于每個(gè)元素執(zhí)行測試的回調(diào)函數(shù)；
【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
返回值：一個(gè)新的、由通過測試的元素組成的數(shù)組，如果沒有任何數(shù)組元素通過測試，則返回空數(shù)組。；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下，返回?cái)?shù)組arr中所有大于3的元素組成的新數(shù)組：
let arr = [1, 2, 3, 4, 5] let result = arr.filter(item => item > 3) console.log(result) // [ 4, 5 ]
every()語法如下：
let isTested = arr.every(callback(element[, index[, array]])[, thisArg])
方法說明如下：
功能描述： every()方法測試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測試；
函數(shù)參數(shù)：
【必選】callback()：用于每個(gè)元素執(zhí)行測試的回調(diào)函數(shù)；
【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
返回值：當(dāng)所有元素都通過測試返回true，否則返回false；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = [1, 2, 3, 4, 5] let result = arr.every(item => item > 0) console.log(result) // true
some()語法如下：
let isTested = arr.some(callback(element[, index[, array]])[, thisArg])
方法說明如下：
功能描述： some()方法測試數(shù)組中是不是至少有一個(gè)元素通過了被提供的函數(shù)測試；
函數(shù)參數(shù)：
【必選】callback()：用于每個(gè)元素執(zhí)行測試的回調(diào)函數(shù)；
【可選】thisArg：當(dāng)執(zhí)行回調(diào)函數(shù)callback時(shí)，用作this的值。
返回值：只要有一個(gè)元素通過測試則返回true，否則返回false；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = [1, 2, 3, 4, 5]let result = arr.some(item => item > 5)console.log(result) // false
扁平化是指將多維數(shù)組轉(zhuǎn)換為一維數(shù)組，ES2019（ES10）中新增了flat()方法用于數(shù)組扁平化，除此之外還有flatMap()用于彌補(bǔ)map()方法的結(jié)果無法扁平化的缺陷。
flat()語法如下：
let newArray = arr.flat([depth])
方法說明如下：
功能描述： flat()方法會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回；
函數(shù)參數(shù)：【可選】depth指定要提取嵌套數(shù)組的結(jié)構(gòu)深度，默認(rèn)值為1。
返回值：一個(gè)包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組；
是否改變?cè)瓟?shù)組：不改變?cè)瓟?shù)組。
示例如下：
let arr = [1, [2, 3], [4, [5]]]let result = arr.flat()console.log(result) // [ 1, 2, 3, 4, [ 5 ] ]
在這個(gè)例子中，由于默認(rèn)只扁平化一層，所以結(jié)果并沒有完全扁平化，若要實(shí)現(xiàn)一個(gè)通用的扁平化方法，可以將參數(shù)depth設(shè)為Infinity：
let arr = [1, [2, 3], [4, [5]]]let result = arr.flat(Infinity)console.log(result) // [ 1, 2, 3, 4, 5 ]
flatMap()flatMap()方法是在map()方法的基礎(chǔ)上，將結(jié)果進(jìn)行一次扁平化操作，使用方法和map()完全一樣，只是返回結(jié)果不一樣。注意：flatMap()方法不能像flat()方法一樣指定扁平化層數(shù)，flatMap()方法只能扁平化一層。flatMap()的應(yīng)用場景在于某些情況下map()中的callback()方法可能會(huì)返回一個(gè)數(shù)組，那么最終map()方法返回的新數(shù)組是嵌套的數(shù)組，所以可以用flatMap()方法代替map()將結(jié)果扁平化，如下面例子：
let arr = ['hello!','my name is', 'syz']
let resultMap = arr.map(item => item.split(" "))
let resultFlatMap = arr.flatMap(item => item.split(" "))
console.log(resultMap) // [ [ 'hello!' ], [ 'my', 'name', 'is' ], [ 'syz' ] ]
console.log(resultFlatMap) // [ 'hello!', 'my', 'name', 'is', 'syz' ]在這個(gè)例子中，map()中的callback()方法將數(shù)組中的字符串使用空格拆分成數(shù)組，注意：這里就觸發(fā)了扁平化條件，即callback()方法返回的就是一個(gè)數(shù)組，正如預(yù)期的結(jié)果一樣，使用map()方法返回的結(jié)果是嵌套的數(shù)組，而使用flatMap()方法返回的數(shù)組會(huì)進(jìn)行一次扁平化操作。
“JavaScript數(shù)組操作方法有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼