JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能示例
本文實(shí)例講述了JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能。分享給大家供大家參考,具體如下:
大家在寫項(xiàng)目的時(shí)候一定遇到過這種邏輯需求,就是給一個(gè)數(shù)組進(jìn)行去重處理,還有一種就是給數(shù)組內(nèi)的對(duì)象根據(jù)某一個(gè)屬性,比如id,進(jìn)行去重,下面我寫了兩個(gè)函數(shù),都是可以達(dá)到這個(gè)效果的,一個(gè)是純ES5的去重辦法,一個(gè)是用了ES6的 Array.from(new Set())
和ES5的reduce來進(jìn)行去重
我先定義兩個(gè)數(shù)組吧
var arr = [1,2,3,5,3,4,5,6,6,"test","test",true]; var person = [ { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經(jīng)", post:"斗戰(zhàn)勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經(jīng)", post:"斗戰(zhàn)勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經(jīng)", post:"斗戰(zhàn)勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經(jīng)", post:"斗戰(zhàn)勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經(jīng)", post:"斗戰(zhàn)勝佛、齊天大圣" } ];
ES5版本:
//ES5原生去重辦法 function Es5duplicate(arr,type){ var newArr = []; var tArr = []; if(arr.length == 0){ return arr; }else{ if(type){ for(var i = 0; i < arr.length;i++){ if(!tArr[arr[i][type]]){ newArr.push(arr[i]); tArr[arr[i][type]] = true; } } return newArr; }else{ for(var i = 0; i < arr.length;i++){ if(!tArr[arr[i]]){ newArr.push(arr[i]); tArr[arr[i]] = true; } } return newArr; } } } console.log('ES5去重',Es5duplicate(arr)); console.log('ES5去重',Es5duplicate(person,"name"));
ES6 + ES5版本:
//Es6 + ES5去重辦法 function Es6duplicate(arr,type){ if(arr.length == 0){ return arr; }else{ if(type){ var obj = {} var newArr = arr.reduce((cur,next) => { obj[next.name] ? "" : obj[next.name] = true && cur.push(next); return cur; },[]) return newArr; }else{ return Array.from(new Set(arr)); } } } console.log('ES6去重',Es6duplicate(arr)); console.log('ES6去重',Es6duplicate(person,"name"));
看下結(jié)果
看起來好像是第二種辦法代碼量要小一些,但是第一個(gè)通用,兼容性特別好,第二個(gè)因?yàn)闋砍兜搅薊S6新特性,所以還是要考慮一下兼容性,但是如果你要是在vue-cli初始化生成的項(xiàng)目,可以隨便用ES6的新特性,他自動(dòng)轉(zhuǎn)譯了,我自己搭建了一個(gè)demo,試了好多新特性,IE9+都有效果(本身vue就不支持IE8及以下,所以IE9以下沒辦法實(shí)驗(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)文章
javascript性能優(yōu)化之DOM交互操作實(shí)例分析
這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)DOM操作過程中的各種常見優(yōu)化操作技巧,需要的朋友可以參考下2015-12-12bootstrap動(dòng)態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法
這篇文章主要介紹了bootstrap動(dòng)態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法,涉及js數(shù)據(jù)傳輸及定義響應(yīng)事件相關(guān)操作技巧,需要的朋友可以參考下2017-05-05PHP實(shí)現(xiàn)本地圖片上傳和驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了PHP實(shí)現(xiàn)本地圖片上傳和驗(yàn)證功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02JS實(shí)現(xiàn)倒計(jì)時(shí)圖文效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)倒計(jì)時(shí)圖文效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11詳談js中數(shù)組(array)和對(duì)象(object)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中數(shù)組(array)和對(duì)象(object)的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02