JavaScript數(shù)組方法-系統(tǒng)性總結(jié)詳解
首先總結(jié)的意義就是讓雜亂無(wú)章變得更加井然有序,這樣在使用的過(guò)程思路會(huì)更加清晰。
數(shù)組使用方法注意點(diǎn):
- 變異方法和非變異方法。即變異方法使用會(huì)改變?cè)瓟?shù)組,后者則不會(huì)。下面腦圖將其進(jìn)行了標(biāo)注。
- 你或許需要注意數(shù)組方法和字符串方法有幾個(gè)方法相似,數(shù)組和字符串是如何切換的?
- 有些方法參數(shù)是支持負(fù)數(shù)的,有些方法第二個(gè)參數(shù)不是代表坐標(biāo)代表的是個(gè)數(shù)。
- 甚至回調(diào)函數(shù)我們也可以將其梳理一遍,大部分回調(diào)函數(shù)參數(shù)格式是一樣的,有些回調(diào)函數(shù)是不一樣的。
- 當(dāng)split,slice,splice,join,contains,includes,push,pop,shift,unshift甚至你被相似的單詞搞得暈頭轉(zhuǎn)向,以至于你分不清哪個(gè)是數(shù)組的方法哪個(gè)是字符串方法,哪個(gè)功能是干嘛來(lái)著。當(dāng)然我現(xiàn)在可以告訴你上面那些方法究竟是數(shù)組方法還是字符串方法,甚至字符串方法和數(shù)組都有這么一個(gè)方法,但是沒(méi)必要,因?yàn)槟憬K究很難記住。所以下面將其進(jìn)行系統(tǒng)的歸類(lèi)總結(jié),你就很容易區(qū)分出來(lái)了。
接下來(lái)你只需要忘記你之前雜亂無(wú)章的記憶,通過(guò)梳理重新建立你的記憶。
數(shù)組常用方法
數(shù)組元素增添和刪除
操作數(shù)組頭部
- unshift(value)
變異方法
數(shù)組頭部插入一個(gè)元素 - shift()
變異方法
移出數(shù)組頭部的第一個(gè)元素
操作數(shù)組尾部
- push(value) 變異方法 向數(shù)組尾部壓入一個(gè)元素
- pop() 變異方法 彈出數(shù)組尾部一個(gè)元素
任意位置增刪
splice(start,length[…,value]) 變異方法
第二個(gè)參數(shù)為個(gè)數(shù),不為0的時(shí)候表示需要從start開(kāi)始刪除length個(gè)元素支持增刪一起做。
數(shù)組拼接
- concat(…arr) 字符串有該類(lèi)似方法
數(shù)組轉(zhuǎn)換成字符串
- join(str) 以指定字符進(jìn)行拼接將數(shù)組轉(zhuǎn)換成字符串
- toString() 以","號(hào)進(jìn)行分割將數(shù)組轉(zhuǎn)換字符串
截取數(shù)組
- slice(start[,end])
支持負(fù)數(shù) 字符串有該類(lèi)似方法
數(shù)組排序方法
排序
- sort(callback)
變異方法
對(duì)數(shù)組進(jìn)行排序
回調(diào)函數(shù)返回 a-b為從大到小進(jìn)行排序,b-a則為從小到大進(jìn)行排序。
//callback回調(diào)函數(shù)格式 function callback(a,b) { return a-b }
順序翻轉(zhuǎn)
reverse()變異方法
對(duì)數(shù)組的順序進(jìn)行反轉(zhuǎn)
數(shù)組迭代方法
數(shù)組遍歷查找
返回值為下標(biāo)
- indexOf(targetValue) 從左到右數(shù)組進(jìn)行遍歷,查找目標(biāo)值的所在下標(biāo),返回第一次出現(xiàn)的下標(biāo)值.
- lastIndexOf(targetValue) 從右到左對(duì)數(shù)組進(jìn)行遍歷,查找目標(biāo)值所在下標(biāo),返回第一次出現(xiàn)的下標(biāo)值.
- findIndex(callback) 通過(guò)回調(diào)函數(shù)對(duì)數(shù)組元素進(jìn)行條件判斷,返回第一次滿足條件的元素下標(biāo)值
返回值為內(nèi)容
- find(callback) 通過(guò)回調(diào)函數(shù)對(duì)數(shù)組元素進(jìn)行條件判斷,返回第一次滿足條件的元素值
數(shù)組遍歷處理
callback(value[,index[,array]])
//callback回調(diào)函數(shù)格式 function callback( value, index, array) { //處理 ... return ... //此處是否不需要retrun語(yǔ)句下面對(duì)其進(jìn)行標(biāo)注 }
- forEach(callback) 對(duì)數(shù)組進(jìn)行遍歷處理僅處理無(wú)返回值。callback不需要return語(yǔ)句
- map(callback) 遍歷數(shù)組每一個(gè)元素使用callback對(duì)數(shù)組進(jìn)行處理,并且將callback處理過(guò)的返回值加入到新數(shù)組并返回新數(shù)組。
- filter(callback) 對(duì)數(shù)組進(jìn)行過(guò)濾操作,返回callback返回值為true的元素組成的新數(shù)組。
- every(callback) 對(duì)數(shù)組進(jìn)行遍歷,如果callback返回值都為true,則方法的返回值為true
- some(callback) 對(duì)數(shù)組進(jìn)行遍歷,如果callback返回值有一個(gè)為true,則方法的返回值為true
callback(total,value[,index[,array]])
//callback回調(diào)函數(shù)格式 function callback(total, value, index, array) { return total + value; }
- reduce(callback[,初始值])
從左往右數(shù)組依次縮短,同時(shí)上一次處理的結(jié)果total傳入下次回調(diào)函數(shù)的作為參數(shù)供回調(diào)函數(shù)使用
- reduceRight(callback[,初始值])
從右往左數(shù)組依次縮短,同時(shí)上一次處理的結(jié)果total傳入下次回調(diào)函數(shù)的作為參數(shù)供回調(diào)函數(shù)使用
數(shù)組其他方法
includes(value) ES6 判斷數(shù)組是否包含某個(gè)元素
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
layui實(shí)現(xiàn)左側(cè)菜單點(diǎn)擊右側(cè)內(nèi)容區(qū)顯示
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)左側(cè)菜單點(diǎn)擊右側(cè)內(nèi)容區(qū)顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07WebGL學(xué)習(xí)教程之Three.js學(xué)習(xí)筆記(第一篇)
Three.js是一個(gè)js的開(kāi)源框架,它把webgl的所有東西都封裝好了,我們不再需要去了解webgl那些比較麻煩的細(xì)節(jié),直接在此框架上進(jìn)行開(kāi)發(fā),既方便,又快捷,而且很容易就能學(xué)習(xí),感興趣的朋友跟隨小編一起看看吧2019-04-04uniapp實(shí)現(xiàn)附近商家定位的示例代碼
本文主要介紹了uniapp實(shí)現(xiàn)附近商家定位的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08純js實(shí)現(xiàn)仿QQ郵箱彈出確認(rèn)框
仿QQ郵箱的彈出層,彈出確認(rèn)框,主要是用火狐的firebug把html和css扣了下來(lái),沒(méi)有做封裝,就定義了一個(gè)拖動(dòng)事件. 大家可以封裝自己的彈出窗,嘿嘿!2015-04-04微信小程序項(xiàng)目實(shí)踐之主頁(yè)tab選項(xiàng)實(shí)現(xiàn)
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之主頁(yè)tab選項(xiàng)實(shí)現(xiàn),本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-07-07微信小程序引入map組件并在地圖上標(biāo)點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序引入map組件并在地圖上標(biāo)點(diǎn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10element?UI中在?el-select?與?el-tree?結(jié)合組件實(shí)現(xiàn)過(guò)程
項(xiàng)目上實(shí)現(xiàn)某個(gè)功能,使用到了?el-select?和?el-tree?組合實(shí)現(xiàn),記錄下兩者結(jié)合的實(shí)現(xiàn)過(guò)程,對(duì)?el-select?與?el-tree?結(jié)合組件實(shí)現(xiàn)過(guò)程感興趣的朋友跟隨小編一起看看吧2023-02-02js屏蔽F12審查元素,禁止修改頁(yè)面代碼等實(shí)現(xiàn)代碼
有時(shí)候我們需要屏蔽客戶端的F12,以防菜鳥(niǎo)也可以隨意修改我們的代碼,也處于源碼的保護(hù)等操作,這里就為大家分享一下常見(jiàn)的代碼2020-10-10js如何獲取訪問(wèn)IP、地區(qū)、當(dāng)前操作瀏覽器
這篇文章主要介紹了js如何獲取訪問(wèn)IP、地區(qū)、當(dāng)前操作瀏覽器,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07