【JavaScript基礎(chǔ)】你真正了解如今的Js數(shù)組嗎菲嘴，看這篇就（Go）夠了

?? 博客說(shuō)明

?????? 文章所涉及的部分資料來(lái)自互聯(lián)網(wǎng)整理，當(dāng)然還有自己個(gè)人的總結(jié)和看法汰翠，分享的目的在于共建社區(qū)和鞏固自己龄坪。

?????? 引用的資料如有侵權(quán)，請(qǐng)聯(lián)系本人刪除复唤！

?????? 幸好我在健田，感謝你來(lái)！

?? 說(shuō)明

數(shù)組用過(guò)很多了佛纫，應(yīng)該是太平常了妓局。在循環(huán)??的時(shí)候，我這么說(shuō)是不是不太專業(yè)呀（有點(diǎn)不太聰明的樣子）雳旅！

那好跟磨，這樣說(shuō)间聊？

在遍歷數(shù)組時(shí)候攒盈，甚至想對(duì)數(shù)組有所操作的（是不是已有內(nèi)置的方法了？）哎榴，都可以考慮一下型豁，先別自己寫(xiě)一大坨（我以前就是！Ｉ序颉Ｓ洹），特別是在加入了es6語(yǔ)法之后飘言。

熟悉數(shù)組的操作是一項(xiàng)基本工衣形，在刷LeetCode的時(shí)候，因?yàn)閷?duì)數(shù)組不熟悉而不能落實(shí)自己的思路，那簡(jiǎn)直就是谆吴，太可惜了倒源！所以學(xué)數(shù)組，從現(xiàn)在起＞淅恰Ｋ癜尽！

不過(guò)話說(shuō)回來(lái)腻菇，你看了本文也不一定記得全部胳螟，一定要多用，多練筹吐，多總結(jié)糖耸！然后多出點(diǎn)BUG（這個(gè)法子特別靈，一下就會(huì)Ｇ鹧Α）

?? 什么是數(shù)組蔬捷？

那當(dāng)然是一堆數(shù)字的組合？這樣說(shuō)有點(diǎn)不準(zhǔn)榔袋！

數(shù)組：小子周拐！注意！是相當(dāng)不準(zhǔn)凰兑！

我：是一堆元素的組合妥粟！

數(shù)組：。吏够。勾给。

來(lái)看百度百科的解釋

數(shù)組（Array）是有序的元素序列。 若將有限個(gè)類型相同的變量的集合命名锅知，那么這個(gè)名稱為數(shù)組名播急。

組成數(shù)組的各個(gè)變量稱為數(shù)組的分量，也稱為數(shù)組的元素售睹，有時(shí)也稱為下標(biāo)變量桩警。

用于區(qū)分?jǐn)?shù)組的各個(gè)元素的數(shù)字編號(hào)稱為下標(biāo)。數(shù)組是在程序設(shè)計(jì)中昌妹，為了處理方便捶枢， 把具有相同類型的若干元素按有序的形式組織起來(lái)的一種形式。 這些有序排列的同類數(shù)據(jù)元素的集合稱為數(shù)組飞崖。

數(shù)組是用于儲(chǔ)存多個(gè)相同類型數(shù)據(jù)的集合烂叔。

?? 數(shù)組的屬性

• constructor 返回創(chuàng)建數(shù)組對(duì)象的原型函數(shù)。

  [].length = 2
  // 2
  

• length 設(shè)置或返回?cái)?shù)組元素的個(gè)數(shù)固歪。

  [1,3].length
  // 2
  

• prototype 允許你向數(shù)組對(duì)象添加屬性或方法蒜鸡。

  // 添加屬性
  Array.prototype.myToUser = 'hahah'
  // 'hahah'
  [].myToUser
  // 'hahah'
  
  // 添加方法
  Array.prototype.toOne = function() {
    for (i = 0; i < this.length; i++) {
      this[i]='one';
    }
  }
  var arr = ["red","hi","good","hello"];
  arr.toOne()
  // arr ['one', 'one', 'one', 'one']
  

我知道xdm估計(jì)只有length用的最多，別問(wèn)我怎么知道??！

不過(guò)現(xiàn)在既然看了文章逢防，也同時(shí)了解一下其他的兩個(gè)屬性吧康聂！

?? 數(shù)組的方法

高階函數(shù)相關(guān)

這些高級(jí)數(shù)組操作，你看看有幾個(gè)眼熟胞四？

filter()

方法創(chuàng)建一個(gè)新的數(shù)組恬汁，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

注意

filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)辜伟。

filter() 不會(huì)改變?cè)紨?shù)組氓侧。

語(yǔ)法

array.filter(function(currentValue,index,arr), thisValue)

示例

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

arr.filter(item => item > 2)
// 注意是返回值！
(2) [3, 4]

forEach()

方法用于調(diào)用數(shù)組的每個(gè)元素导狡，并將元素傳遞給回調(diào)函數(shù)约巷。

注意

forEach() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

語(yǔ)法

array.forEach(function(currentValue, index, arr), thisValue)

示例

const arr = [1,2,3,4]
let sum = 0
arr.forEach(item => sum += item)
// arr 10

every()

方法用于檢測(cè)數(shù)組所有元素是否都符合指定條件旱捧。

注意

every() 方法使用指定函數(shù)檢測(cè)數(shù)組中的所有元素：

• 如果數(shù)組中檢測(cè)到有一個(gè)元素不滿足独郎，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會(huì)再進(jìn)行檢測(cè)枚赡。
• 如果所有元素都滿足條件氓癌，則返回 true。

every() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)贫橙。

every() 不會(huì)改變?cè)紨?shù)組贪婉。

語(yǔ)法

array.every(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]
arr.every(item => item > 1)
// false
arr.every(item => item > 0)
// true

find()

方法返回通過(guò)測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值。

注意

find() 方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行：

• 當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), find() 返回符合條件的元素卢肃，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)疲迂。
• 如果沒(méi)有符合條件的元素返回 undefined

find() 對(duì)于空數(shù)組，函數(shù)是不會(huì)執(zhí)行的莫湘。

find() 并沒(méi)有改變數(shù)組的原始值尤蒿。

語(yǔ)法

array.find(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.find(item => item > 1)
// 2

findIndex()

方法返回傳入一個(gè)測(cè)試條件（函數(shù)）符合條件的數(shù)組第一個(gè)元素位置。

注意

findIndex() 方法為數(shù)組中的每個(gè)元素都調(diào)用一次函數(shù)執(zhí)行：

• 當(dāng)數(shù)組中的元素在測(cè)試條件時(shí)返回 true 時(shí), findIndex() 返回符合條件的元素的索引位置幅垮，之后的值不會(huì)再調(diào)用執(zhí)行函數(shù)腰池。
• 如果沒(méi)有符合條件的元素返回 -1

注意: findIndex() 對(duì)于空數(shù)組，函數(shù)是不會(huì)執(zhí)行的军洼。

注意: findIndex() 并沒(méi)有改變數(shù)組的原始值巩螃。

語(yǔ)法

array.findIndex(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.findIndex(item => item > 1)
// 1
arr.findIndex(item => item === 7)
// -1

some()

方法返回通過(guò)測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的值。

注意

方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）匕争。

some() 方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素：

• 如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)爷耀。
• 如果沒(méi)有滿足條件的元素甘桑，則返回false。

注意： some() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意： some() 不會(huì)改變?cè)紨?shù)組跑杭。

語(yǔ)法

array.some(function(currentValue, index, arr),thisValue)

示例

const arr = [1,2,3,4]
arr.some(item => item > 1)
// true
arr.some(item => item > 5)
// false

map()

方法返回一個(gè)新數(shù)組铆帽，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

注意

map() 方法按照原始數(shù)組元素順序依次處理元素德谅。

map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)爹橱。

map() 不會(huì)改變?cè)紨?shù)組。

語(yǔ)法

array.map(function(currentValue,index,arr), thisValue)

示例

const arr = [1,2,3,4]
const arr2 = arr.map(item => item + 1)
// arr2
// (4) [2, 3, 4, 5]

sort()

方法用于對(duì)數(shù)組的元素進(jìn)行排序窄做。

排序順序可以是字母或數(shù)字愧驱，并按升序或降序。

默認(rèn)排序順序?yàn)榘醋帜干颉?/p>

注意

當(dāng)數(shù)字是按字母順序排列時(shí)"40"將排在"5"前面椭盏。

使用數(shù)字排序组砚，你必須通過(guò)一個(gè)函數(shù)作為參數(shù)來(lái)調(diào)用。

這種方法會(huì)改變?cè)紨?shù)組掏颊！

語(yǔ)法

array.sort(sortfunction)

示例

var arr = [1,3,5,3,2];
arr.sort(function(a,b){return a-b});
// arr [1, 2, 3, 3, 5]

操作數(shù)組相關(guān)

pop()

方法用于刪除數(shù)組的最后一個(gè)元素并返回刪除的元素糟红。

注意

此方法改變數(shù)組的長(zhǎng)度！

語(yǔ)法

array.pop()

示例

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

push()

方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素乌叶，并返回新的長(zhǎng)度盆偿。

注意

新元素將添加在數(shù)組的末尾。

此方法改變數(shù)組的長(zhǎng)度准浴！

語(yǔ)法

array.push(item1, item2, ..., itemX)

示例

const arr = [1,2,3,4]
arr.push(5)
// 5
// arr [1, 2, 3, 4, 5]

shift()

方法用于把數(shù)組的第一個(gè)元素從其中刪除陈肛，并返回第一個(gè)元素的值。

注意

此方法改變數(shù)組的長(zhǎng)度兄裂！

語(yǔ)法

array.shift()

示例

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

unshift()

方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素句旱，并返回新的長(zhǎng)度。

注意

該方法將改變數(shù)組的數(shù)目晰奖。

語(yǔ)法

array.unshift(item1,item2, ..., itemX)

示例

const arr = [1,2,3,4]
arr.unshift(3)
// 5
// arr [3, 1, 2, 3, 4]

查找數(shù)組相關(guān)

indexOf()

方法可返回?cái)?shù)組中某個(gè)指定的元素位置谈撒。

該方法將從頭到尾地檢索數(shù)組，看它是否含有對(duì)應(yīng)的元素匾南。開(kāi)始檢索的位置在數(shù)組 start 處或數(shù)組的開(kāi)頭（沒(méi)有指定 start 參數(shù)時(shí)）啃匿。

如果找到一個(gè) item，則返回 item 的第一次出現(xiàn)的位置蛆楞。開(kāi)始位置的索引為 0溯乒。

如果在數(shù)組中沒(méi)找到指定元素則返回 -1。

語(yǔ)法

array.indexOf(item,start)

示例

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

lastIndexOf()

方法可返回一個(gè)指定的元素在數(shù)組中最后出現(xiàn)的位置豹爹，從該字符串的后面向前查找裆悄。

如果要檢索的元素沒(méi)有出現(xiàn)，則該方法返回 -1臂聋。

該方法將從尾到頭地檢索數(shù)組中指定元素 item光稼。開(kāi)始檢索的位置在數(shù)組的 start 處或數(shù)組的結(jié)尾（沒(méi)有指定 start 參數(shù)時(shí)）或南。

如果找到一個(gè) item，則返回 item 從尾向前檢索第一個(gè)次出現(xiàn)在數(shù)組的位置艾君。數(shù)組的索引開(kāi)始位置是從 0 開(kāi)始的采够。

如果在數(shù)組中沒(méi)找到指定元素則返回 -1。

語(yǔ)法

array.lastIndexOf(item,start)

示例

const arr = [1,2,3,4]
arr.lastIndexOf(1)
// 0

includes()

方法用來(lái)判斷一個(gè)數(shù)組是否包含一個(gè)指定的值冰垄，如果是返回 true蹬癌，否則false。

語(yǔ)法

arr.includes(searchElement, fromIndex)

示例

const arr = [1,2,3,4]
arr.includes(1)
// true
arr.includes(1,2)
// false

字符串相關(guān)

join()

方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個(gè)字符串虹茶。

元素是通過(guò)指定的分隔符進(jìn)行分隔的逝薪。

語(yǔ)法

array.join(separator)

示例

const arr = [1,2,3,4]
arr.join(",")
// '1,2,3,4'

toString()

方法可把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果写烤。

注意

數(shù)組中的元素之間用逗號(hào)分隔翼闽。

語(yǔ)法

array.toString()

示例

const arr = [1,2,3,4]
arr.toString()
// '1,2,3,4'

計(jì)算數(shù)組相關(guān)

reduce()

方法接收一個(gè)函數(shù)作為累加器，數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減洲炊，最終計(jì)算為一個(gè)值感局。

reduce() 可以作為一個(gè)高階函數(shù)，用于函數(shù)的 compose暂衡。

注意

reduce() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的询微。

語(yǔ)法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

示例

const arr = [1,2,3,4]
arr.reduce((a, b) => a + b)
// 10

reduceRight()

方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加狂巢。

注意

reduce() 對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的撑毛。

語(yǔ)法

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

示例

const arr = [1,2,3,4]
arr.reduceRight((a, b) => a + b)
// 10

返回可迭代對(duì)象

entries()

方法返回一個(gè)數(shù)組的迭代對(duì)象，該對(duì)象包含數(shù)組的鍵值對(duì) (key/value)唧领。

迭代對(duì)象中數(shù)組的索引值作為 key藻雌， 數(shù)組元素作為 value。

語(yǔ)法

array.entries()

示例

const arr = [1,2,3,4]
arr.entries()
// Array Iterator {}
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]

keys()

方法用于從數(shù)組創(chuàng)建一個(gè)包含數(shù)組鍵的可迭代對(duì)象斩个。

如果對(duì)象是數(shù)組返回 true胯杭，否則返回 false。

語(yǔ)法

array.keys()

示例

const arr = [1,2,3,4]
arr.keys()
// Array Iterator {}

基本操作

from()

方法用于通過(guò)擁有 length 屬性的對(duì)象或可迭代的對(duì)象來(lái)返回一個(gè)數(shù)組受啥。

如果對(duì)象是數(shù)組返回 true做个，否則返回 false。

語(yǔ)法

Array.from(object, mapFunction, thisValue)

示例

const arr = [1,2,3,4]
Array.from(arr, item => item * 10);
// [10, 20, 30, 40]

reverse()

方法用于顛倒數(shù)組中元素的順序滚局。

語(yǔ)法

array.reverse()

示例

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

slice()

方法可從已有的數(shù)組中返回選定的元素居暖。

slice() 方法可提取字符串的某個(gè)部分，并以新的字符串返回被提取的部分藤肢。

注意

slice() 方法不會(huì)改變?cè)紨?shù)組太闺。

語(yǔ)法

array.slice(start, end)

示例

const arr = [1,2,3,4]
arr.slice(0, 1)
// [1]

copyWithin()

方法用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個(gè)指定位置中。

語(yǔ)法

array.copyWithin(target, start, end)

示例

const arr = [1,2,3,4]
arr.copyWithin(2, 0, 2)
// [1, 2, 1, 2]

valueOf()

方法返回 Array 對(duì)象的原始值谤草。

注意

該原始值由 Array 對(duì)象派生的所有對(duì)象繼承跟束。

valueOf() 方法通常由 JavaScript 在后臺(tái)自動(dòng)調(diào)用莺奸，并不顯式地出現(xiàn)在代碼中丑孩。

valueOf() 方法不會(huì)改變?cè)瓟?shù)組冀宴。

數(shù)組中的元素之間用逗號(hào)分隔。

語(yǔ)法

array.valueOf()

示例

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

splice()

方法用于添加或刪除數(shù)組中的元素温学。

注意

這種方法會(huì)改變?cè)紨?shù)組略贮。

語(yǔ)法

array.splice(index,howmany,item1,.....,itemX)

示例

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

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

concat()

方法用于連接兩個(gè)或多個(gè)數(shù)組。

該方法不會(huì)改變現(xiàn)有的數(shù)組仗岖，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本逃延。

語(yǔ)法

arr.concat(arr1,arr2,...,arrN)

案例

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

arr.concat(arr1, arr2)
// 注意是返回值！
(4) [1, 2, 3, 4]

isArray()

方法用于判斷一個(gè)對(duì)象是否為數(shù)組轧拄。

語(yǔ)法

Array.isArray(obj)

注意

不是這樣用的哈揽祥，它是Array對(duì)象提供的方法，把需要檢測(cè)的對(duì)象傳參進(jìn)去

image-20220109174511411

示例

const arr = []
Array.isArray(arr)
// true

fill()

方法用于將一個(gè)固定值替換數(shù)組的元素檩电。

語(yǔ)法

array.fill(value, start, end)

示例

var arr = ["good", "yes", "no", "hello"];
arr.fill("one", 2, 4);

// 改變了原數(shù)組
(4) ['good', 'yes', 'one', 'one']

?? 總結(jié)

這一番總結(jié)下來(lái)拄丰，著實(shí)花了我不少時(shí)間，不光是讓你們學(xué)到的很多俐末，我也是務(wù)實(shí)了不少基礎(chǔ)料按。

修修補(bǔ)補(bǔ)，查漏補(bǔ)缺卓箫，慢慢堆積成堡壘载矿！你我都是高級(jí)，即使不是烹卒，將來(lái)也是闷盔！

?? 感謝

???????????? 萬(wàn)能的網(wǎng)絡(luò)！

?????? 以及勤勞的自己旅急，個(gè)人博客逢勾，GitHub測(cè)試，GitHub

?????? 公眾號(hào)【歸子莫】坠非，小程序【小歸博客】

?????? 如果你感覺(jué)對(duì)你有幫助的話敏沉，不妨給我點(diǎn)贊吧，持續(xù)關(guān)注也行哈炎码！