JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法小結(jié)
本文實(shí)例講述了JS學(xué)習(xí)筆記之?dāng)?shù)組去重實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
操作的數(shù)組
let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5']
1、
利用ES6 的set 來(lái)進(jìn)行數(shù)組去重
console.time("set") let type1=new Set(arr) console.log(type1) type1=[...type1] console.log(type1) console.timeEnd("set")
2、
利用indexof和forEach 多次遍歷來(lái)搜索是否有相同的值
console.time("indexOf") let type2=[] arr.forEach(function(item,index){ if(type2.indexOf(item)<0){ type2.push(item) } }) console.log(type2) console.timeEnd("indexOf")
3、
雙循環(huán)實(shí)現(xiàn)數(shù)組去重
splice()
方法向/從數(shù)組中添加/刪除項(xiàng)目,然后返回被刪除的項(xiàng)目。
缺點(diǎn) 會(huì)對(duì)元素組造成影響,所以建議先拷貝數(shù)組
console.time("splice") let arr2=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5'] for(let i=0;i<arr2.length;i++){ for(let j=i+1;j<arr2.length;j++){ if(arr2[i]===arr2[j]){ arr2.splice(i,1) } } } console.log(arr2) console.timeEnd("splice")
4、
利用 對(duì)象屬性 不重復(fù)的特性 以及 typeof
來(lái)實(shí)現(xiàn)數(shù)組去重
console.time("obj屬性") let obj1={} let type4=[] arr.forEach(function(item,index){ let tf=typeof item if(!obj1[tf+"_"+item]){ obj1[tf+"_"+item]=true } }) console.log(obj1) for(item in obj1){ type4.push(item.split("_")[0].toLowerCase()=="number"?+item.split("_")[1]:item.split("_")[1]) } obj1=null; console.log(type4) console.timeEnd("obj屬性")
5、
利用sort
排序 相同值就會(huì)被排列到一起
會(huì)對(duì)元素組產(chǎn)生操作
console.time("sort排序") let arr3=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5'] arr3.sort() for(let i=0;i<arr3.length;i++){ if(arr3[i]===arr3[i+1]){ arr3.splice(i,1) } } console.log(arr3) console.timeEnd("sort排序")
效果展示
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
PS:這里再為大家提供幾款相關(guān)工具供大家參考使用:
在線去除重復(fù)項(xiàng)工具:
http://tools.jb51.net/code/quchong
在線文本去重復(fù)工具:
http://tools.jb51.net/aideddesign/txt_quchong
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
在IE中調(diào)用javascript打開Excel的代碼(downmoon原作)
在IE中調(diào)用javascript打開Excel的代碼(downmoon原作)...2007-04-04javascript鼠標(biāo)跟隨運(yùn)動(dòng)3種效果(眼球效果,蘋果菜單,方向跟隨)
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動(dòng)的JS特效,其實(shí)做法很簡(jiǎn)單,本文就介紹了很多javascript鼠標(biāo)跟隨運(yùn)動(dòng),在這里與大家分享下。2016-10-10for循環(huán) + setTimeout 結(jié)合一些示例(前端面試題)
最近在學(xué)習(xí)node.js開發(fā)資料,正好碰到了for循環(huán)+settimeout的經(jīng)典例子,下面小編給大家分享for循環(huán) + setTimeout 結(jié)合一些示例代碼,需要的朋友參考下吧2017-08-08zepto.js 實(shí)時(shí)監(jiān)聽輸入框的方法
今天小編就為大家分享一篇zepto.js 實(shí)時(shí)監(jiān)聽輸入框的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-12-12javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例代碼。2009-11-11javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之模塊模式學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02移動(dòng)端touch拖動(dòng)和click事件沖突問(wèn)題解決
這篇文章主要為大家介紹了移動(dòng)端touch拖動(dòng)和click事件沖突問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09js中點(diǎn)擊空白區(qū)域時(shí)文本框與隱藏層的顯示與影藏問(wèn)題
文本框獲得焦點(diǎn)的時(shí)在文本框的下方顯示一個(gè)浮動(dòng)層,點(diǎn)擊文本框隱藏浮動(dòng)層,下面為大家介紹下鼠標(biāo)點(diǎn)擊時(shí)文本框與隱藏層處理問(wèn)題,感興趣的朋友可以參考下2013-08-08