JS數(shù)組中常用方法技巧學(xué)會(huì)進(jìn)階成為大佬
splice()方法
截取替換數(shù)組
第一個(gè)參數(shù)是起始位置,第二個(gè)是截取的個(gè)數(shù),第三是替換的元素 ,返回值是截取的元素,原數(shù)組是剩余的元素。
join()方法
數(shù)組轉(zhuǎn)字符串
()里的是以什么來連接,如果輸入空字符串join('')則直接拼接不分割
例如:
let aaa = [1,2,3] let bbb = aaa.join('-') let ccc = aaa.join('0') console.log(bbb) // '1-2-3' console.log(ccc) //'10203'
reverse()方法
翻轉(zhuǎn)數(shù)組
arr.reverse() 翻轉(zhuǎn)數(shù)組,返回值是翻轉(zhuǎn)好的數(shù)組
every()方法
查找數(shù)組不符合條件的
遍歷檢測(cè)數(shù)組的每一項(xiàng) 如果有一項(xiàng)不符合你定義的條件 則返回false 剩余的不再執(zhí)行 ,只有每一項(xiàng)都符合條件 才返回true
第一個(gè)參數(shù)是數(shù)組的每一項(xiàng),第二個(gè)是索引 第三個(gè)是當(dāng)前數(shù)組
例:
arr:[121,3322,3215,3549,6899,46456] arr.every(function(item,index,array){ return item>2000 //檢測(cè)數(shù)組的每一個(gè)值是否大于2000 }) //結(jié)果是false 除非數(shù)組每個(gè)值都大于2000 才是true
reduce()方法
求累加的值
可以將前面數(shù)組項(xiàng)遍歷產(chǎn)生的結(jié)果與當(dāng)前遍歷項(xiàng)進(jìn)行運(yùn)算
第一個(gè)參數(shù)是 累計(jì)器(保存第二個(gè)值返回回來的結(jié)果)prev
第二個(gè)值是當(dāng)前正在處理的值(遍歷數(shù)組重頭到尾)cur
第三個(gè)索引 index
第四個(gè)當(dāng)前數(shù)組 arr
第五個(gè) 初始值 (函數(shù)后面)init
例:
var arr = [3,9,4,3,6,0,9]; var sum = arr.reduce(function (prev, cur) { return prev + cur; },0);//由于初始值是0 也就是prev剛開始的值是0 索以運(yùn)算起來就是 0+3=3 3+9=12 12+4=16 .... 每次得到的結(jié)果都會(huì)被prev存儲(chǔ)進(jìn)行下一次運(yùn)算 這就是最簡(jiǎn)單的reduce求和
filter()方法
遍歷并篩選數(shù)組
第一個(gè)參數(shù)是數(shù)組的每一項(xiàng),第二個(gè)是索引 第三個(gè)是當(dāng)前數(shù)組
它會(huì)遍歷數(shù)組 按你定義的條件篩選你定義的條件 并且返回一個(gè)新數(shù)組,新數(shù)組里裝著所有滿足條件的元素
例:
var arr=[1,3,5,7,8] var sum = arr.filter(function(value,index,arr){ return value >3 //篩選arr數(shù)值中 大于3的元素 }) console.log(sum) //返回的值是[5,7,8]
findIndex()方法 和find()方法
findIndex()
找出第一個(gè)滿足條件的數(shù)組成員的索引 找不到返回-1
對(duì)于空數(shù)組,函數(shù)是不會(huì)執(zhí)行的并沒有改變數(shù)組的原始值。
find()
find()函數(shù)用來查找目標(biāo)元素,找到就返回該元素,找不到返回undefined
查找函數(shù)有三個(gè)參數(shù):
value:每一次迭代查找的數(shù)組元素。
index:每一次迭代查找的數(shù)組元素索引。
arr:被查找的數(shù)組。
forEach()方法
遍歷循環(huán)數(shù)組
第一個(gè)值是每個(gè)參數(shù)
第二個(gè)值是索引
第三個(gè)是數(shù)組本身
多用于遍歷數(shù)組里的元素
arr:[1,2,3] arr.forEach(function(item,index,array){ console.log(item) //1,2,3 })
some()方法
檢測(cè)數(shù)組中的元素是否滿足條件,用于查找唯一的值 返回true 或false
var a = arr.some(function(item,index,array){ return item>3 //檢測(cè)是否有大于3的元素,有則返回true,沒有則返回false })
只要找到一個(gè)滿足條件的元素則終止循環(huán) 在some里面 遇到了return trun 就會(huì)終止循環(huán)
indexOf()方法
查找數(shù)組是否存在某個(gè)元素,返回下標(biāo)。返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引,如果不存在,則返回-1。
參數(shù)
第一個(gè)參數(shù)(必須):被查找的元素
第二個(gè)(可選):開始查找的位置(不能大于等于數(shù)組的長(zhǎng)度,返回-1),接受負(fù)值,默認(rèn)值為0。
嚴(yán)格相等的搜索:
數(shù)組的indexOf搜索跟字符串的indexOf不一樣,數(shù)組的indexOf使用嚴(yán)格相等===搜索元素,即數(shù)組元素要完全匹配才能搜索成功。
sort ()方法
參數(shù)可選: 規(guī)定排序順序的比較函數(shù)。
默認(rèn)情況下sort()方法沒有傳比較函數(shù)的話,默認(rèn)按字母升序,如果元素不是字符串的話,會(huì)調(diào)用toString()方法將元素轉(zhuǎn)化為字符串的Unicode(萬國(guó)碼)位點(diǎn),然后再比較字符。
// 字符串排列 首字母 var a = ["Banana", "Orange", "Apple", "Mango"]; a.sort(); // ["Apple","Banana","Mango","Orange"] // 數(shù)字排序的時(shí)候 因?yàn)檗D(zhuǎn)換成Unicode字符串之后,有些數(shù)字會(huì)比較大會(huì)排在后面 var a = [10, 1, 3, 20,25,8]; console.log(a.sort()) // [1,10,20,25,3,8];
push()方法
push 向數(shù)組末尾添加新元素(可一次性添加多個(gè))
返回值:新數(shù)組的length (長(zhǎng)度)
const aa = [1,2,3] aa.push(5,6) console.log(aa) // [1,2,3,5,6]
pop()方法
尾部刪除一個(gè) 返回值是被刪除的元素
unshift()方法
頭部添加, 返回值是數(shù)組長(zhǎng)度
shift()方法
頭部刪除元素 返回值:被刪除的元素
以上就是JS數(shù)組中常用方法技巧學(xué)會(huì)進(jìn)階成為大佬的詳細(xì)內(nèi)容,更多關(guān)于JS數(shù)組中常用方法技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS基于cookie實(shí)現(xiàn)來賓統(tǒng)計(jì)記錄訪客信息的方法
這篇文章主要介紹了JS基于cookie實(shí)現(xiàn)來賓統(tǒng)計(jì)記錄訪客信息的方法,通過javascript記錄訪客信息到cookie的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)非常好看的計(jì)數(shù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-06-06BootStrap中的Fontawesome 圖標(biāo)
這篇文章主要介紹了BootStrap中Fontawesome 圖標(biāo)的相關(guān)知識(shí),需要的朋友可以參考下2017-05-05Bootstrap modal 多彈窗之疊加關(guān)閉陰影遮罩問題的解決方法
這里也會(huì)遇到一次性關(guān)閉所有modal引起陰影遮罩的問題,也就是所有modal都關(guān)閉了,但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案,需要的朋友參考下吧2017-02-02html a標(biāo)簽-超鏈接中confirm方法使用介紹
confirm可以彈出確定取消對(duì)話框,然后根據(jù)用戶的選擇執(zhí)行相應(yīng)的操作,接下來介紹實(shí)現(xiàn)過程,需要了解的朋友可以參考下2013-01-01靜態(tài)頁面html中跳轉(zhuǎn)傳值的JS處理技巧
這篇文章主要介紹了靜態(tài)頁面html中跳轉(zhuǎn)傳值的JS處理技巧,結(jié)合實(shí)例形式分析了HTML頁面跳轉(zhuǎn)通過URL傳遞參數(shù)的方法與javascript處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06