JavaScript 數(shù)組方法總結(jié)

Array.prototype.pop()

pop() 方法從數(shù)組中刪除最后一個(gè)元素并返回該元素。此方法更改數(shù)組的長(zhǎng)度辫封。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

plants.pop() // "tomato"
console.log(plants) // ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop()
console.log(plants) // ["broccoli", "cauliflower", "cabbage"]

對(duì)空數(shù)組使用 pop 方法悴灵，不會(huì)報(bào)錯(cuò)晤柄，而是返回undefined。

[].pop() // undefined

注意：該方法會(huì)改變?cè)瓟?shù)組呼寸。

Array.prototype.push()

push() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回?cái)?shù)組的新長(zhǎng)度。

const animals = ['pigs', 'goats', 'sheep']

animals.push('cows') //  4
console.log(animals) // ["pigs", "goats", "sheep", "cows"]
animals.push('chickens') // 5
console.log(animals) //  ["pigs", "goats", "sheep", "cows", "chickens"]

注意：該方法會(huì)改變?cè)瓟?shù)組恭陡。

Array.prototype.shift()

shift() 方法從數(shù)組中刪除第一個(gè)元素并返回該元素。此方法更改數(shù)組的長(zhǎng)度干跛。

const arr = [1, 2, 3]
const firstElement = arr.shift()

console.log(arr) //  [2, 3]
console.log(firstElement) // 1

遍歷并清空一個(gè)數(shù)組

const arr = [1, 2, 3]
let item

while (item = list.shift()) {
  console.log(item)
}

list // []

上面代碼通過(guò) list.shift() 方法每次取出一個(gè)元素子姜，從而遍歷數(shù)組。它的前提是數(shù)組元素不能是 0 或任何布爾值等于 false 的元素，因此這樣的遍歷不是很可靠哥捕。

注意：該方法會(huì)改變?cè)瓟?shù)組牧抽。

Array.prototype.unshift()

unshift() 方法將一個(gè)或多個(gè)元素添加到數(shù)組的開(kāi)頭，并返回?cái)?shù)組的新長(zhǎng)度遥赚。

const arr = [1, 2, 3]

console.log(arr.unshift(4, 5)) //  5
console.log(arr) // [4, 5, 1, 2, 3]

注意：該方法會(huì)改變?cè)瓟?shù)組扬舒。

Array.prototype.join()

join() 方法以指定參數(shù)作為分隔符，將數(shù)組的所有元素連接為一個(gè)字符串返回凫佛。如果不提供參數(shù)讲坎，默認(rèn)用逗號(hào)分隔。

const arr = ['Fire', 'Air', 'Water']

console.log(arr.join()) // "Fire,Air,Water"
console.log(arr.join(' ')) // "Fire Air Water"
console.log(arr.join('-')) // "Fire-Air-Water"

如果數(shù)組成員是 undefined 或 null 或空位愧薛，會(huì)被轉(zhuǎn)成空字符串晨炕。

[undefined, null].join('#') // '#'

['a',, 'b'].join('-') // 'a--b'

通過(guò) call 方法，join 方法也可以用于字符串或類數(shù)組的對(duì)象毫炉。

Array.prototype.join.call('hello', '-') // "h-e-l-l-o"

const obj = { 0: 'a', 1: 'b', length: 2 }
Array.prototype.join.call(obj, '-') // 'a-b'

示例：重復(fù)字符串

使用 join 方法來(lái)重復(fù)字符串瓮栗。

Array(4).join('LOVE') // 'LOVELOVELOVE'

Array.prototype.concat()

concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組瞄勾，而是返回一個(gè)新數(shù)組费奸。

const arr1 = ['a', 'b', 'c']
const arr2 = ['d', 'e', 'f']

console.log(arr1.concat(arr2)) // ["a", "b", "c", "d", "e", "f"]

除了數(shù)組作為參數(shù)，concat也接受其他類型的值作為參數(shù)进陡，添加到目標(biāo)數(shù)組尾部愿阐。

const arr = []

arr.concat(1, '1', true, {}, null, undefined) // [1, '1', true, {…}, null, undefined]

如果數(shù)組成員包括對(duì)象，concat 方法返回當(dāng)前數(shù)組的一個(gè)淺拷貝趾疚。所謂“淺拷貝”缨历，指的是新數(shù)組拷貝的是對(duì)象的引用。

Array.prototype.isArray()

isArray() 方法確定傳遞的值是否為數(shù)組盗蟆。

Array.isArray([1, 2, 3])  // true
Array.isArray({ foo: 123 }) // false
Array.isArray('foobar')   // false
Array.isArray(undefined)  // false

Array.prototype.reverse()

reverse() 反轉(zhuǎn)數(shù)組的元素順序戈二。第一個(gè)數(shù)組元素變?yōu)樽詈笠粋€(gè)，最后一個(gè)數(shù)組元素變?yōu)榈谝粋€(gè)喳资。

const arr = ['one', 'two', 'three']
console.log(arr) // ['one', 'two', 'three']

const reversed = arr.reverse()
console.log(reversed) // ['three', 'two', 'one']
console.log(arr) // ['three', 'two', 'one']

注意：該方法會(huì)改變?cè)瓟?shù)組觉吭。

Array.prototype.slice()

slice() 方法選取數(shù)組的一部分，并返回一個(gè)新數(shù)組仆邓。原始數(shù)組不會(huì)被修改鲜滩。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']

console.log(animals.slice(2)) // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)) // ["camel", "duck"]
console.log(animals.slice(1, 5)) // ["bison", "camel", "duck", "elephant"]

如果 slice 方法的參數(shù)是負(fù)數(shù)，則表示倒數(shù)計(jì)算的位置节值。

animals.slice(-2) // ['duck', 'elephant']
animals.slice(-2, -1) // ['duck']

slice 方法的一個(gè)重要應(yīng)用徙硅，是將類數(shù)組的對(duì)象轉(zhuǎn)為真正的數(shù)組。

Array.prototype.slice.call({ 0: "a", 1: "b", length: 2 }) // ['a', 'b']

Array.prototype.splice()

splice() 方法通過(guò)刪除現(xiàn)有元素或添加新元素來(lái)更改數(shù)組的內(nèi)容搞疗。

const months = ['Jan', 'March', 'April', 'June']
months.splice(1, 0, 'Feb')

// 在第 1 個(gè)索引位置插入
console.log(months) // ['Jan', 'Feb', 'March', 'April', 'June']

// 在第 4 個(gè)索引處替換 1 個(gè)元素
months.splice(4, 1, 'May')
console.log(months) // ['Jan', 'Feb', 'March', 'April', 'May']

注意：該方法會(huì)改變?cè)瓟?shù)組嗓蘑。

Array.prototype.indexOf()

indexOf() 方法返回?cái)?shù)組中可以找到給定元素的第一個(gè)索引，如果該元素不存在，則返回 -1桩皿。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']

console.log(beasts.indexOf('bison')) // 1

// 從索引 2 開(kāi)始
console.log(beasts.indexOf('bison', 2)) // 4
console.log(beasts.indexOf('giraffe')) // -1

Array.prototype.lastIndexOf()

lastIndexOf() 方法返回?cái)?shù)組中可以找到給定元素的最后一個(gè)索引豌汇，如果該元素不存在，則返回 -1泄隔。從 fromIndex 開(kāi)始向后搜索數(shù)組拒贱。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo']

console.log(animals.lastIndexOf('Dodo')) // 3

console.log(animals.lastIndexOf('Tiger')) // 1

Array.prototype.includes()

includes() 是 ES7 新增的數(shù)組方法，用于判斷數(shù)組是否包含某個(gè)元素佛嬉，并根據(jù)條件返回 true 或 false逻澳。

const arr = [10, 11, 3, 20, 5]

const includesTwenty = arr.includes(20)
console.log(includesTwenty) // true

includes 方法還接受一個(gè)可選參數(shù)，根據(jù)索引來(lái)指定要從數(shù)組中的哪個(gè)位置開(kāi)始搜索暖呕。默認(rèn)情況下斜做，index 參數(shù)為零。

const arr = [1, 2, 3, 4, 5]

if(arr.includes(3, 2)) {
  console.log('item found')
} else {
  console.log('item not found')
}

建議：使用 includes 替代 indexOf 檢查數(shù)組是否包含某個(gè)元素缰揪。

Array.prototype.reduce()

reduce() 方法根據(jù) reducer 函數(shù)和初始值創(chuàng)建任何類型的輸出值陨享。根據(jù)提供的 reducer 函數(shù)葱淳，結(jié)果可以是任何類型钝腺，例如整數(shù)、對(duì)象或數(shù)組赞厕。

const arr = [1, 2, 3, 4]
const reducer = (acc, cur) => acc + cur

console.log(arr.reduce(reducer)) // 10
console.log(arr.reduce(reducer, 5)) // 15

通過(guò) reducer 函數(shù)僅獲取 name 鍵：

const input = [
  { 'name' : 'O.O', 'age': 18 },
  { 'name' : 'D.O', 'age': 18 },
  { 'name' : 'K.O', 'age': 18 },
  { 'name' : 'O.K', 'age': 18 }
]

const reducer = (acc, cur) => {
  acc.push({ 'name': cur.name })
  return acc
}

let output = input.reduce(reducer, [])
console.log(output)

注意：Reduce() 支持所以現(xiàn)代瀏覽器艳狐，以及 IE9 及更高版本，如果想支持低版本瀏覽器皿桑，可以添加一個(gè) polyfill 以支持 IE6毫目。

Array.prototype.reduceRight()

reduceRight() 方法對(duì)累加器應(yīng)用一個(gè)回調(diào)函數(shù)，數(shù)組的每個(gè)值（從右到左）都必須將其減少為單個(gè)值诲侮。

const arr = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (acc, cur) => acc.concat(cur)
)

console.log(arr) // [4, 5, 2, 3, 0, 1]

Array.prototype.filter()

filter() 方法使用一個(gè)過(guò)濾函數(shù)創(chuàng)建一個(gè)新數(shù)組镀虐，只保留基于該函數(shù)返回 true 的元素。結(jié)果是一個(gè)長(zhǎng)度等于或小于原始數(shù)組長(zhǎng)度的數(shù)組沟绪，包含與原始數(shù)組相同元素的子集刮便。

const array = [10, 11, 3, 20, 5]
const greaterThanTen = array.filter(item => item > 10)
console.log(greaterThanTen) //[11, 20]

示例：過(guò)濾對(duì)象數(shù)組

const countries = [
  { name: 'Nigeria', continent: 'Africa' },
  { name: 'Nepal', continent: 'Asia' },
  { name: 'Angola', continent: 'Africa' },
  { name: 'Greece', continent: 'Europe' },
  { name: 'Kenya', continent: 'Africa' },
  { name: 'Greece', continent: 'Europe' }
]

let asianCountries = countries.filter(country => country.continent === 'Asia')

console.log(asianCountries); // [{name: "Nepal", continent: "Asia"}]

示例：在數(shù)組中搜索特定字母

const names = ['Victoria', 'Pearl', 'Olivia', 'Annabel', 'Sandra', 'Sarah']
const filterItems = letters => names.filter(name => name.includes(letters))

console.log(filterItems('ia')) // ["Victoria", "Olivia"]

Array.prototype.map()

map() 方法將提供的函數(shù)應(yīng)用于數(shù)組的每個(gè)元素并返回一個(gè)新數(shù)組。

const arr = [1, 2, 3]
const double = x => x * 2
arr.map(double) // [2, 4, 6]

Array.prototype.flat()

flat 方法創(chuàng)建一個(gè)新數(shù)組绽慈，其中所有子數(shù)組元素遞歸連接到該數(shù)組中恨旱，直到指定的深度。

const arr1 = [1, 2, [3, 4]]
arr1.flat() // [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]]
arr2.flat() // [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]]
arr3.flat(2) // [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
arr4.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

更多實(shí)現(xiàn)技巧可查閱數(shù)組扁平化坝疼。

Array.prototype.flatMap()

flatMap() 方法首先使用 map 方法映射每個(gè)元素搜贤，然后將結(jié)果壓縮成一個(gè)新數(shù)組。它與 map 連著深度值為 1 的 flat 幾乎相同钝凶，但 flatMap 通常在合并成一種方法的效率稍微高一些仪芒。

const arr = [1, 2, 3, 4]

arr.flatMap(x => [x * 2]) // [2, 4, 6, 8]

// 只有一層是扁平的
arr.flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]

Array.prototype.sort()

sort() 方法對(duì)數(shù)組中的元素進(jìn)行適當(dāng)排序并返回?cái)?shù)組。這種情況不一定穩(wěn)定。默認(rèn)排序順序根據(jù)字符串 Unicode 代碼點(diǎn)掂名。

const months = ['March', 'Jan', 'Feb', 'Dec']
months.sort() // ['Dec', 'Feb', 'Jan', 'March']
console.log(months) // ["Dec", "Feb", "Jan", "March"]

const arr = [1, 30, 4, 21, 100000]
arr.sort()
console.log(arr) // [1, 100000, 21, 30, 4]

我們可以向 sort 方法傳入一個(gè)指定按某種順序進(jìn)行排列的函數(shù)夭咬。

arr.sort((a, b) => a - b) // [1, 4, 21, 30, 100000]
arr.sort((a, b) => b - a) // [100000, 30, 21, 4, 1]

更多內(nèi)容可查閱如何在 JavaScript 中對(duì)對(duì)象數(shù)組進(jìn)行排序？

注意：該方法會(huì)改變?cè)瓟?shù)組铆隘。

Array.prototype.every()

every() 方法對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)卓舵，如果函數(shù)對(duì)每一項(xiàng)都返回 true，則返回 true膀钠。

const arr = [1, 2, 3, 4, 5]

const isBelowThreshold = currentValue => currentValue < 10
console.log(arr.every(isBelowThreshold)) // true

Array.prototype.some()

some() 方法對(duì)數(shù)組中每一項(xiàng)運(yùn)行給定函數(shù)掏湾，如果函數(shù)對(duì)任一項(xiàng)返回 true，則返回 true肿嘲。

const arr = [1, 2, 3, 4, 5]

// 檢查元素是否為偶數(shù)
const even = item => item % 2 === 0
console.log(arr.some(even)) // true

示例：數(shù)組扁平化

let arr = [1, 2, [3, 4, 5, [6, 7], 8], 9, 10, [11, [12, 13]]]

const flatten = function (arr) {
  // 只要有一個(gè)元素為數(shù)組融击，那么循環(huán)繼續(xù)
  while (arr.some(Array.isArray)) {
    arr = [].concat(...arr)
  }
  return arr
}

console.log(flatten(arr))

Array.prototype.forEach()

forEach() 方法對(duì)每個(gè)數(shù)組元素執(zhí)行一次提供的回調(diào)函數(shù)。

const arr = ['a', 'b', 'c']

arr.forEach(item => console.log(item))

// "a"
// "b"
// "c"

Array.prototype.find()

find() 方法返回匹配器函數(shù)為其返回 true 的第一個(gè)元素雳窟。否則返回 -1尊浪。其結(jié)果是原始數(shù)組中的一個(gè)元素。

const arr = [10, 11, 3, 20, 5]

const greaterThanTen = arr.find(item => item > 10)
console.log(greaterThanTen) // 11

Array.prototype.findIndex()

findIndex() 方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引封救。否則返回 -1拇涤。

const arr = [5, 12, 8, 130, 44]

const isLargeNumber = item => item > 13
console.log(arr.findIndex(isLargeNumber)) // 3

Array.prototype.findLast/findLastIndex

通過(guò) find 和 findIndex 在數(shù)組中查找值是一種常見(jiàn)的做法。不過(guò)誉结，這些方法從數(shù)組開(kāi)頭開(kāi)始迭代鹅士。

const things = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}]

things.find(item => item.v > 3) // {v: 4}
things.findIndex(item => item.v > 3) // 3

如果您想從數(shù)組的末尾開(kāi)始搜索數(shù)組，則必須反轉(zhuǎn)數(shù)組并使用提供的方法惩坑。這并不好掉盅，因?yàn)樗枰槐匾臄?shù)組突變。

幸運(yùn)的是以舒，有一個(gè)針對(duì) findLast 和 findLastIndex 的 ECMAscript 提案趾痘。

const things = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}]

things.findLast(item => item.v > 3) // {v: 5}
things.findLastIndex(item => item.v > 3) // 4

該提案目前處于第三階段，目前已經(jīng) Edge蔓钟、chromium 和 Safari 的最新版本得到支持永票。至于其余的，core-js 和 Babel 已經(jīng)提供了一個(gè) polyfill奋刽。

以下是 findLast 的支持情況瓦侮，findLastIndex 與其相同：

findLast 的支持情況

Array.prototype.toLocaleString()

toLocaleString() 返回一個(gè)字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串佣谐，這些字符串將使用一個(gè)特定語(yǔ)言環(huán)境的字符串（例如一個(gè)逗號(hào) ","）隔開(kāi)肚吏。

const arr = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')]
const localeString = arr.toLocaleString('en', { timeZone: 'UTC' })

console.log(localeString) // "1,a,12/21/1997, 2:12:00 PM"
// 這假設(shè) 'en' 語(yǔ)言環(huán)境和 UTC 時(shí)區(qū) - 您的結(jié)果可能會(huì)有所不同

Array.prototype.keys()

keys() 方法返回一個(gè)新的數(shù)組可迭代對(duì)象，包含原始數(shù)組中每個(gè)索引的鍵狭魂。

const arr = ['a', 'b', 'c']
  
for (let key of arr.keys()) {
  console.log(key) // 0 1 2
}

Array.prototype.values()

values() 方法返回一個(gè)新的數(shù)組迭代器對(duì)象罚攀，該對(duì)象包含數(shù)組中每個(gè)索引的值党觅。

const arr = ['a', 'b', 'c']

for (const value of arr.values()) {
  console.log(value) // "a" "b" "c"
}

Array.prototype.entries()

entries() 方法返回一個(gè)新的數(shù)組可迭代對(duì)象，該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)斋泄。

const arr = ['a', 'b', 'c']
const iterator = arr.entries()

console.log(iterator.next().value) // [0, "a"]

console.log(iterator.next().value) // [1, "b"]

Array.prototype.fill()

fill() 方法使用一個(gè)固定值來(lái)填充從起始索引（默認(rèn) 0）到結(jié)束索引（默認(rèn) array.length）的數(shù)組的所有元素杯瞻。它返回修改后的數(shù)組。

const arr = [1, 2, 3, 4]

// 從位置 2 到位置 4 填充 0
console.log(arr.fill(0, 2, 4)) // [1, 2, 0, 0]

// 從位置 1 填充 5
console.log(arr.fill(5, 1)) // [1, 5, 5, 5]

console.log(arr.fill(6)) // [6, 6, 6, 6]

Array(3) // [empty × 3]
const money = () => '??' 
[...Array(3)].map(money) // ['??', '??', '??']
Array(3).fill('??') // ['??', '??', '??']

示例：重復(fù)字符串

Array(3)
  .fill('LOVE')
  .join('')

// "LOVELOVELOVE"

該片段的運(yùn)行很簡(jiǎn)單：Array(3) 創(chuàng)建一個(gè)包含 3 個(gè)空項(xiàng)的新數(shù)組炫掐，fill('LOVE') 在每個(gè)空項(xiàng)中填充 LOVE魁莉，join() 將所有元素連接成一個(gè)字符串。

注意：該方法會(huì)改變?cè)瓟?shù)組募胃。

Array.prototype.copyWithin()

copyWithin() 方法將數(shù)組的一部分復(fù)制到同一數(shù)組中的另一個(gè)位置并返回它旗唁，而不修改其大小。

const arr = ['a', 'b', 'c', 'd', 'e']

// 將索引 3 處的元素復(fù)制到索引 0
console.log(arr.copyWithin(0, 3, 4)) // ["d", "b", "c", "d", "e"]

// 將從索引 3 到末尾的所有元素復(fù)制到索引 1
console.log(arr.copyWithin(1, 3)) // ["d", "d", "e", "d", "e"]

注意：該方法會(huì)改變?cè)瓟?shù)組痹束。

Array.prototype.of()

Array.of() 方法從數(shù)量可變的參數(shù)創(chuàng)建一個(gè)新的數(shù)組實(shí)例检疫，而不管參數(shù)的數(shù)量或類型如何。

Array.of(7) // [7]
Array(7) // [empty × 7]祷嘶，7個(gè)空插槽的數(shù)組

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

Array.of() 和數(shù)組構(gòu)造函數(shù)之間的區(qū)別在于處理整數(shù)參數(shù)：Array.of(7) 創(chuàng)建一個(gè)包含單個(gè)元素 7 的數(shù)組屎媳，而 Array(7) 創(chuàng)建一個(gè)長(zhǎng)度屬性為 7 的空數(shù)組（注意：這意味著數(shù)組包含 7 個(gè)空插槽，而不是包含實(shí)際未定義值的插槽）论巍。

Array.prototype.from()

Array.from() 用于將類數(shù)組對(duì)象或可迭代對(duì)象轉(zhuǎn)化為一個(gè)新的淺拷貝數(shù)組實(shí)例烛谊。

console.log(Array.from('foo')) // ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)) // [2, 4, 6]

Array.from() 接受第二個(gè) map 參數(shù)。方便創(chuàng)建和填充特定長(zhǎng)度的數(shù)組环壤。

使用 Array.from 填充特定長(zhǎng)度

ES6 Set是可以相互轉(zhuǎn)換的晒来，可以使用 Array.from 轉(zhuǎn)換成數(shù)組

const article = new Set(['JavaScript', 'TypeScript', 'Node.js'])

article // Set(3) {'JavaScript', 'TypeScript', 'Node.js'}
Array.from(article) // ['JavaScript', 'TypeScript', 'Node.js']

示例：重復(fù)字符串

一個(gè)類數(shù)組對(duì)象必須含有 length 屬性，且元素屬性名必須是數(shù)值或者可轉(zhuǎn)換為數(shù)值的字符郑现。我們正好可以利用這一點(diǎn)。

我們將 length 屬性設(shè)置為 3荧降，使用 from() 方法初始化數(shù)組接箫，每個(gè)位置對(duì)應(yīng) 1 個(gè) undefined。 如下：

Array.from({ length: 3 }) // [undefined, undefined, undefined]

現(xiàn)在我們使用第二個(gè)參數(shù)朵诫，這是一個(gè) map 函數(shù)辛友，它將調(diào)用數(shù)組的每個(gè)元素。在這里剪返，我們用 'LOVE' 替換所有的 undefined废累。

Array.from({ length: 3 }, () => 'LOVE') // ['LOVE', 'LOVE', 'LOVE']

最后我們調(diào)用 join() 方法將數(shù)組中的所有元素組合成一個(gè)字符串。

Array.from({ length: 3 }, () => 'LOVE').join('') //'LOVELOVELOVE'

分塊

在使用 API 時(shí)脱盲，我經(jīng)常需要將用戶列表分塊并批量發(fā)送邑滨。Array.from() 是一種將數(shù)組分塊的好方法，因?yàn)榈诙€(gè)參數(shù)是一個(gè) map 函數(shù)钱反。

function chunkify(array, chunkSize = 10) {
  const chunks = Array.from(
    { length: Math.ceil(array.length / 10) },
    (_, i) => {
      const start = chunkSize * i
      return array.slice(start, start + chunkSize)
    }
  )
  return chunks
}

chunkify(hugeArray) // [[...], [...], ....]

Array.prototype.toString()

toString() 方法返回一個(gè)字符串掖看，表示指定的數(shù)組及其元素匣距。

const arr = [1, 2, 'a', 'b']
console.log(arr.toString()) // "1,2,a,b"

const arr = [1, 2, 3, [4, 5, 6]]
console.log(arr.toString()) // "1,2,3,4,5,6"

Array.prototype.valueOf()

valueOf() 方法返回指定對(duì)象的原始值。

不同對(duì)象的 valueOf 方法不盡一致哎壳，數(shù)組的 valueOf 方法返回?cái)?shù)組本身毅待。

const arr = [1, 2, 3]
arr.valueOf() // [1, 2, 3]

詳細(xì)查看 MDN 上valueOf 各個(gè)類型的示例。

有無(wú) mutation

mutation 譯為突變归榕，可以簡(jiǎn)單理解為是否改變?cè)瓟?shù)組尸红，有無(wú)副作用。

mutation:

  • splice()刹泄、copyWithin()驶乾、fill()、pop()循签、push()
  • reverse()级乐、shift()、sort()县匠、unshift()

no mutation:

  • some()风科、map()、forEach()乞旦、every()贼穆、filter()、reduce()兰粉、reduceRight()
  • find()故痊、findIndex()、lastIndexOf()玖姑、includes()愕秫、indexOf()、findLast()焰络、findLastIndex()
  • join()戴甩、slice()、concat()闪彼、flat()甜孤、flatMap()、of()畏腕、from()
  • toLocaleString()缴川、toSource()、toString()描馅、valueOf()把夸、keys()、values()流昏、entries()

根據(jù)特定條件搜索

上面已經(jīng)介紹了數(shù)組的所有方法扎即，我們可以使用一些數(shù)組方法來(lái)代替 for 循環(huán)來(lái)搜索數(shù)組吞获。根據(jù)需要，您可以決定哪種方法最適合您的用例谚鄙。

  • 如果要查找數(shù)組中滿足特定條件的所有項(xiàng)各拷，請(qǐng)使用 filter。
  • 如果要檢查至少一項(xiàng)是否滿足特定條件闷营，請(qǐng)使用 find烤黍。
  • 如果要檢查數(shù)組是否包含特定值，請(qǐng)使用 includes傻盟。
  • 如果要查找數(shù)組中特定項(xiàng)的索引速蕊，請(qǐng)使用 indexOf。
  • 如果要檢查數(shù)組中所有元素是否滿足給定條件娘赴，并且返回一個(gè)布爾值规哲，請(qǐng)使用 every。
  • 如果要檢查數(shù)組中任一元素是否滿足給定條件诽表，并且返回一個(gè)布爾值唉锌，請(qǐng)使用 some。

concat 和 push 的區(qū)別

concat 和 push 是將一個(gè)或多個(gè)項(xiàng)附加到給定數(shù)組的常用方法竿奏。

區(qū)別

concat 方法不會(huì)更改現(xiàn)有數(shù)組：

const shapes = ['Triangle', 'Square']

shapes.concat(['Circle', 'Rectangle']) // ['Triangle', 'Square', 'Circle', 'Rectangle']
shapes // ['Triangle', 'Square']

另一方面袄简，push 方法會(huì)修改原始數(shù)組。

const animals = ['cat', 'dog', 'mouse']
animals.push('bird', 'cow') // 5
animals // ['cat', 'dog', 'mouse', 'bird', 'cow']

在上面的示例代碼中泛啸，兩種方法產(chǎn)生不同的結(jié)果绿语。concat 返回一個(gè)新數(shù)組，push 返回更新數(shù)組的長(zhǎng)度候址。

因?yàn)?concat 創(chuàng)建了一個(gè)新數(shù)組來(lái)保存合并數(shù)組的結(jié)果吕粹，所以它比 push 慢。

對(duì)于小型數(shù)組宗雇，這兩種方法在性能方面不會(huì)產(chǎn)生顯著差異昂芜。但是如果你必須使用大數(shù)組，性能是應(yīng)用程序的關(guān)鍵赔蒲，那么考慮使用 push。

提示

您可以使用 ES6 擴(kuò)展運(yùn)算符將不同的數(shù)組合并為一個(gè)：

const a = [1, 2, 3]
const b = [4, 5, 6]
const c = [7, 8, 9]

const final = [...a, ...b, ...c] // [1, 2, 3, 4, 5, 6, 7, 8, 9]

如果我們也使用 push 方法良漱，則擴(kuò)展運(yùn)算符很方便：

const a = [1, 2, 3]
const b = [4, 5, 6]

a.push(...b) // 6
a // [1, 2, 3, 4, 5, 6]

Array.prototype.push.apply(firstArray, secondArray) 是另一個(gè)同樣適用于 ES5 的選項(xiàng)舞虱。但是，如果第二個(gè)數(shù)組非常大母市，則不建議使用這種方法矾兜，因?yàn)橐粋€(gè)函數(shù)中的最大參數(shù)數(shù)是有限的。

Array.prototype.push.apply(a, b) // 6
a // [1, 2, 3, 4, 5, 6]

如果你好奇的話患久，它的硬編碼是 65536椅寺。

Javascript Array.push is 945x faster than Array.concat ???? 提供了許多基準(zhǔn)來(lái)證明為什么 push 比 concat 更快浑槽。

slice 和 splice 的區(qū)別

slice 和 splice 是獲取給定數(shù)組子數(shù)組的常用方法。

區(qū)別

語(yǔ)法：

array.slice(startingIndex, endingIndex)
array.splice(startingIndex, length, ...items)

雖然第一個(gè)參數(shù)彼此相同返帕，表示刪除元素的起始索引桐玻，但第二個(gè)參數(shù)不同。

slice 和 splice 的第二個(gè)參數(shù)分別是結(jié)束索引和子項(xiàng)數(shù)荆萤。

splice 更改原始數(shù)組镊靴，而 slice 不更改。

給定從 1 到 5 的數(shù)字?jǐn)?shù)組：

const arr = [1, 2, 3, 4, 5]
const sub = arr.splice(2, 3)

// 原始數(shù)組已修改
arr // [1, 2]
sub // [3, 4, 5]

現(xiàn)在链韭，讓我們將相同的參數(shù)傳遞給 slice：

const arr = [1, 2, 3, 4, 5]
const sub = arr.slice(2, 3)

// 原始數(shù)組未被修改
arr // [1, 2, 3, 4, 5]
sub // [3]

使用 splice 方法偏竟，可以通過(guò)將項(xiàng)目傳遞到最后一個(gè)參數(shù)來(lái)保持項(xiàng)目不從原始數(shù)組中移除。

const arr = [1, 2, 3, 4, 5]
const sub = arr.splice(2, 3, 3, 4, 5)

arr // [1, 2, 3, 4, 5]

提示

我們可以通過(guò)忽略結(jié)束索引來(lái)克隆數(shù)組（淺拷貝）：

const clone = arr => arr.slice(0)

更多詳細(xì)內(nèi)容可查閱淺拷貝和深拷貝

some 和 every

這兩個(gè)方法類似斷言（assert）敞峭，返回一個(gè)布爾值踊谋，表示判斷數(shù)組成員是否符合某種條件。

在前面方法的介紹中旋讹，我們已經(jīng)大致了解了 every 和 some 方法的工作原理殖蚕，下面是您可以從中獲得的一些附加功能：

  • Array.every 和 Array.some 可以接受第二個(gè)參數(shù)，該參數(shù)將在回調(diào)函數(shù)的執(zhí)行中用作 this 參數(shù)骗村。
  • 回調(diào)函數(shù)可以接受兩個(gè)額外的參數(shù)：當(dāng)前項(xiàng)的索引和對(duì)調(diào)用該方法的數(shù)組的引用嫌褪。

來(lái)看看一個(gè)示例：

const obj = { name: 'Daffodil' }
const arr = [1, 2, 3, 4, 5, 6]

arr.every(function (el, i, arr) {
  return el > i && arr[i] === el && this === obj
}, obj) // true
  • 每個(gè)元素都大于其索引
  • arr[i]（其中 i 當(dāng)前索引與當(dāng)前元素相同）
  • 我們提供了 obj 作為 this 參數(shù)的引用，因此 this 等于 obj

注意：對(duì)于空數(shù)組胚股，some 方法返回 false笼痛，every 方法返回 true，回調(diào)函數(shù)都不會(huì)執(zhí)行琅拌。

const isEven = x => x % 2 === 0

[].some(isEven) // false
[].every(isEven) // true

some 和 every 方法還可以接受第二個(gè)參數(shù)缨伊，用來(lái)綁定參數(shù)函數(shù)內(nèi)部的 this 變量。

通過(guò)索引獲取元素

const list = [1, 2, 3, 4, 5]
list[1]                 // 2
list.indexOf(2)         // 1

通過(guò)索引獲取數(shù)組的子集

不改變?cè)瓟?shù)組

list.slice(0,1)         // [1]
list.slice(1)           // [2, 3, 4, 5]
list.slice(1,2)         // [2]

改變?cè)瓟?shù)組

re = list.splice(1)     // re = [2, 3, 4, 5]  list == [1]
re = list.splice(1,2)   // re = [2, 3]      list == [1, 4, 5]

刪除元素

const list = [1, 2, 3, 4, 5]
list.pop()              // 5    list == [1, 2, 3, 4]
list.shift()            // 1    list == [2, 3, 4, 5]
list.splice(2, 1)       // [3]  list == [1, 2, 3, 4]

替換元素

const list = [1, 2, 3, 4, 5]

list.splice(2, 1, 6)    // list == [1, 2, 6, 4, 5]

插入

const list = [1, 2, 3, 4, 5]

// 指定元素之后插入
list.splice(list.indexOf(2) + 1, 0, 1) // [1, 2, 1, 3, 4, 5]

// 指定元素之前插入
list.splice(list.indexOf(2), 0, 6) // [1, 6, 2, 1, 3, 4, 5]

添加元素

不改變?cè)瓟?shù)組

list.concat([6])      // [1, 2, 3, 4, 5, 6]

改變?cè)瓟?shù)組

list.push(6)            // list == [1, 2, 3, 4, 5, 6]
list.unshift(6)         // list == [6, 5, 4, 3, 2, 1]
list.splice(2, 0, 6)    // list == [1, 2, 6, 3, 4, 5]

更多資料

以下整理了過(guò)往寫(xiě)過(guò)關(guān)于數(shù)組的文章：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末谭胚，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子未玻，更是在濱河造成了極大的恐慌灾而，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,602評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件扳剿，死亡現(xiàn)場(chǎng)離奇詭異旁趟，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)庇绽，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)锡搜，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)橙困，“玉大人，你說(shuō)我怎么就攤上這事耕餐》哺担” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 152,878評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蛾方，是天一觀的道長(zhǎng)像捶。 經(jīng)常有香客問(wèn)我，道長(zhǎng)桩砰，這世上最難降的妖魔是什么拓春？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,306評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮亚隅，結(jié)果婚禮上硼莽，老公的妹妹穿的比我還像新娘。我一直安慰自己煮纵，他們只是感情好懂鸵，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5贊 373
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著行疏，像睡著了一般匆光。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上酿联，一...
    開(kāi)封第一講書(shū)人閱讀 49,071評(píng)論 1贊 285
  • 城市分裂傳說(shuō)
    那天终息，我揣著相機(jī)與錄音，去河邊找鬼贞让。 笑死周崭，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的喳张。 我是一名探鬼主播续镇，決...
    沈念sama閱讀 38,382評(píng)論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼销部！你這毒婦竟也來(lái)了摸航？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 37,006評(píng)論 0贊 259
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤舅桩，失蹤者是張志新（化名）和其女友劉穎忙厌，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體江咳，經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年哥放，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了歼指。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爹土。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖踩身，靈堂內(nèi)的尸體忽然破棺而出胀茵，到底是詐尸還是另有隱情，我是刑警寧澤挟阻，帶...
    沈念sama閱讀 33,732評(píng)論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布琼娘，位于F島的核電站，受9級(jí)特大地震影響附鸽，放射性物質(zhì)發(fā)生泄漏脱拼。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一坷备、第九天 我趴在偏房一處隱蔽的房頂上張望熄浓。 院中可真熱鬧，春花似錦省撑、人聲如沸赌蔑。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,286評(píng)論 0贊 19
  • 一樁弒父案竟秫，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)娃惯。三九已至，卻和暖如春肥败，著一層夾襖步出監(jiān)牢的瞬間趾浅，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,512評(píng)論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工拙吉， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留潮孽，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2贊 354
  • 代替公主和親
    正文 我出身青樓筷黔，卻偏偏與公主長(zhǎng)得像往史，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子佛舱，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2贊 345