Javascript:數(shù)組常用方法整理

下面以var arr = ['x', 'u', 'e', 'y', 'i', 'n', 'g']為例

修改器方法:

修改器方法會(huì)改變?cè)瓟?shù)組

1. arr.pop() && arr.push()

會(huì)改變?cè)瓟?shù)組

arr.pop()刪除數(shù)組最后一個(gè)元素,并返回這個(gè)元素

arr.pop() // "g"

arr.push()在數(shù)組末尾增加一個(gè)元素,返回?cái)?shù)組的新長(zhǎng)度

arr.push('l') // 8
arr // ["x", "u", "e", "y", "i", "n", "g", "l"]

2. arr.shift() && arr.unshift()

arr.shift() 刪除數(shù)組開頭第一個(gè)元素,并返回這個(gè)元素

arr.shift() // "x"

arr.unshift() 在數(shù)組開頭增加一個(gè)元素,返回?cái)?shù)組新長(zhǎng)度。

arr.unshift('l')  // 8 
arr // ["l", "x", "u", "e", "y", "i", "n", "g"]

3. arr.reverse()

會(huì)改變?cè)瓟?shù)組

數(shù)組倒序,返回倒序后的數(shù)組

arr.reverse() // ["g", "n", "i", "y", "e", "u", "x"]

4. arr.sort() || arr.sort(compareFunction)

對(duì)數(shù)組進(jìn)行排序,并返回排好序的當(dāng)前數(shù)組。(寫得這么拗口是為了強(qiáng)調(diào)是原數(shù)組的順序改變
.sort()使用的是就地排序算法,且不一定穩(wěn)定。
(就地排序意思是直接在原數(shù)組上排序。穩(wěn)定指的是兩個(gè)相等的元素排好序后前后順序不變)

默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。
這意味著:

var scores = [1, 10, 21, 2]; 
scores.sort();  // [1, 10, 2, 21]
// 10在2之前,因?yàn)樵?Unicode 指針順序中"10"在"2"之前

不過(guò).sort()可以接受一個(gè)函數(shù)作為參數(shù),自己指定排序規(guī)則:

var scores = [1, 10, 21, 2]; 
scores.sort(function (a, b) { // 從小到大排序
  return a - b
}) // [ 1, 2, 10, 21 ]

函數(shù)compareFunction 的規(guī)則如下:

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 會(huì)被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相對(duì)位置不變。
    備注: ECMAScript 標(biāo)準(zhǔn)并不保證這一行為,而且也不是所有瀏覽器都會(huì)遵守(例如 Mozilla 在 2003 年之前的版本);
  • 如果 compareFunction(a, b) 大于 0 , b 會(huì)被排列到 a 之前。
  • compareFunction(a, b) 必須總是對(duì)相同的輸入返回相同的比較結(jié)果,否則排序的結(jié)果將是不確定的。

5. arr.splice(start, deleteCount, item1, item2, ...)

修改數(shù)組,從start開始,刪除deleteCount個(gè)元素,再插入后面的item1, item2, ...

// 從下標(biāo)0開始,刪除一個(gè)元素,并插入‘X'
arr.splice(0, 1, 'X') // ["x"]
arr // ["X", "u", "e", "y", "i", "n", "g"]

訪問(wèn)方法:

訪問(wèn)方法不會(huì)改變?cè)瓟?shù)組,一般都是返回一個(gè)新數(shù)組

1. arr1.concat(arr2)

合并arr1arr2

var arr1 = ["x", "u", "e"]
var arr2 = ["y", "i", "n", "g"]
arr1.concat(arr2) // ["x", "u", "e", "y", "i", "n", "g"]

2. arr.includes(searchElement, fromIndex)

fromIndex開始查找searchElement,找到了返回true,找不到返回false
fromIndex可省略,默認(rèn)從下標(biāo)0開始找。

arr.includes('u') // true
arr.includes('u', 2) // false

3. arr.join(separator)

數(shù)組合并成一個(gè)字符串,每一個(gè)元素用separator隔開。
separator可省略,默認(rèn)為,

arr.join() // "x,u,e,y,i,n,g"
arr.join('') // "xueying"

4. arr.slice(begin, end)

抽取數(shù)組在[begin,end)區(qū)間內(nèi)的元素,返回一個(gè)新數(shù)組。

arr.slice(0, 3) // ["x", "u", "e"]

5. arr.toString()

arr.toString() // "x,u,e,y,i,n,g"

6. arr.indexOf(searchElement[, fromIndex = 0])

返回searchElement的下標(biāo),沒(méi)有則返回 -1
可以指定fromIndex表示從哪個(gè)下標(biāo)開始查找,默認(rèn)為下標(biāo)0

arr.indexOf('u') // 1
arr.indexOf('u', 2) // -1

7. arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

找到數(shù)組中最后一個(gè)和searchElement相等的元素的下標(biāo)。
可以指定fromIndex表示從哪個(gè)下標(biāo)開始查找,默認(rèn)從數(shù)組最后一個(gè)元素開始。

var arr = ["x", "u", "l", "e", "y", "i", "n", "g", "l"]
arr.lastIndexOf('l') // 8

迭代方法

1. arr.forEach()

語(yǔ)法:

array.forEach(callback(currentValue, index, array){
    //do something
}, thisArg)

對(duì)數(shù)組每一個(gè)元素執(zhí)行callback函數(shù)。

callback函數(shù)接收3個(gè)參數(shù):

  1. currentValue:當(dāng)前元素的值
  2. index: 當(dāng)前元素的下標(biāo)
  3. array:原數(shù)組

thisArg:可選,用作callback函數(shù)的this值。

var arr = ['x', 'u', 'e', 'y', 'i', 'n', 'g']
arr.forEach((element, index, array) => console.log('arr[' + index + '] = ' + element))
/* 
arr[0] = x
arr[1] = u
arr[2] = e
arr[3] = y
arr[4] = i
arr[5] = n
arr[6] = g
*/

2. arr.every(callback[, thisArg]) && arr.some(callback[, thisArg])

arr.every(callback[, thisArg])
測(cè)試數(shù)組的 所有 元素是否都通過(guò)了callback函數(shù)的測(cè)試。
全部通過(guò)返回true ,否則返回false
thisArg指定this值。

// 格式和forEach方法沒(méi)區(qū)別
var arr = ['x', 'u', 'e', 'y', 'i', 'n', 'g']
console.log(arr.every((element, index, array) => element === element.toLowerCase())) // 數(shù)組中的元素是否都為小寫
// true

arr.some(callback[, thisArg])
測(cè)試數(shù)組的 某些 元素是否全部通過(guò)了callback函數(shù)的測(cè)試。

// 語(yǔ)法和forEach方法沒(méi)區(qū)別
var arr = ['X', 'u', 'e', 'y', 'i', 'n', 'g'] // 第一個(gè)元素大寫
console.log(arr.some((element, index, array) => element === element.toLowerCase())) // 數(shù)組中是否有小寫的元素
// true

3. arr.filter(callback[, thisArg])

過(guò)濾器,創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素
語(yǔ)法還是跟forEach方法沒(méi)區(qū)別。

var arr = ['X', 'u', 'e', 'y', 'i', 'n', 'g'] // 第一個(gè)元素大寫
console.log(arr.filter((element, index, array) => element === element.toLowerCase())) 
// [ 'u', 'e', 'y', 'i', 'n', 'g' ]

4. arr.find(callback[, thisArg]) && arr.findIndex(callback[, thisArg])

arr.find(callback[, thisArg])
語(yǔ)法同上。
返回?cái)?shù)組中第一個(gè)滿足callback函數(shù)的元素的值。否則返回 undefined。

var arr = ['X', 'u', 'e', 'y', 'i', 'n', 'g'] // 第一個(gè)元素大寫
console.log(arr.find((element, index, array) => element === element.toLowerCase()))
// "u"

arr.findIndex(callback[, thisArg])
語(yǔ)法同上。
返回?cái)?shù)組中第一個(gè)滿足callback函數(shù)的元素的索引。否則返回-1。

var arr = ['X', 'u', 'e', 'y', 'i', 'n', 'g'] // 第一個(gè)元素大寫
console.log(arr.findIndex((element, index, array) => element === element.toLowerCase()))
// 1

5. arr.entries()

(迭代器)返回一個(gè)新的Array Iterator對(duì)象,該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)。
跟Python中迭代器一樣,用.next()訪問(wèn)下一鍵值對(duì)。

var iterator = arr.entries();
iterator.next() // {value: Array(2), done: false} done表示迭代是否已經(jīng)完成
iterator.next().value //  [1, "u"]

6. arr.keys() && arr.values()

arr.keys()
返回一個(gè)新的Array迭代器,它包含數(shù)組中每個(gè)索引的鍵。

var iterator = arr.keys();
iterator.next() // {value: 0, done: false}
iterator.next().value // 1
// 不斷next直到最后一個(gè)
console.log(iterator.next())  // {value: undefined, done: true}

arr.values()
返回一個(gè)新的 Array Iterator 對(duì)象,它包含數(shù)組每個(gè)索引的值。

PS: Chrome 未實(shí)現(xiàn),F(xiàn)irefox未實(shí)現(xiàn),Edge已實(shí)現(xiàn)。
Chrome 及Firefox可以用"arrSymbol.iterator"方法來(lái)代替values()方法。

var arr = [1,2,3,4,5]
var i = arr[Symbol.iterator]()
i.next() // {value: 1, done: false}
i.next() // {value: 2, done: false}

7. arr.map(callback)

創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用callback函數(shù)后返回的結(jié)果。
語(yǔ)法:

arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])

例子:

arr.map((element, index, array) => element.toUpperCase()) // ["X", "U", "E", "Y", "I", "N", "G"]

8. arr.reduce(callback[, initialValue])

累加器, 數(shù)組中的每個(gè)元素(從左到右)應(yīng)用一個(gè)函數(shù),將其減少為單個(gè)值。

callback函數(shù)接收4個(gè)參數(shù):

  1. accumulator:累加器累加回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時(shí)返回的累積值,或initialValue
  2. currentValue:數(shù)組中正在處理的元素
  3. currentIndex:數(shù)組中正在處理的當(dāng)前元素的索引。
  4. array:原數(shù)組

initialValue:用作第一個(gè)調(diào)用 callback的第一個(gè)參數(shù)的值。 如果沒(méi)有提供初始值,則將使用數(shù)組中的第一個(gè)元素。 在沒(méi)有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。

回調(diào)函數(shù)第一次執(zhí)行時(shí),accumulator 和currentValue的取值有兩種情況:

  1. 調(diào)用reduce時(shí)提供initialValue,accumulator取值為initialValue,currentValue取數(shù)組中的第一個(gè)值。
  2. 沒(méi)有提供 initialValue,accumulator取數(shù)組中的第一個(gè)值,currentValue取數(shù)組中的第二個(gè)值。
// 取最大值
var arr = [1, 2, 3, 4, 5, 6]
console.log(arr.reduce((accumulator, currentValue) =>  Math.max(accumulator, currentValue)))
// 6

// 連接數(shù)組的元素
var arr = ['x', 'u', 'e', 'y', 'i', 'n', 'g']
console.log(arr.reduce((accumulator, currentValue) =>  accumulator.concat(currentValue)))
// xueying
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容