JS實現(xiàn)數(shù)組去重及數(shù)組內(nèi)對象去重功能示例
本文實例講述了JS實現(xiàn)數(shù)組去重及數(shù)組內(nèi)對象去重功能。分享給大家供大家參考,具體如下:
大家在寫項目的時候一定遇到過這種邏輯需求,就是給一個數(shù)組進行去重處理,還有一種就是給數(shù)組內(nèi)的對象根據(jù)某一個屬性,比如id,進行去重,下面我寫了兩個函數(shù),都是可以達到這個效果的,一個是純ES5的去重辦法,一個是用了ES6的 Array.from(new Set())
和ES5的reduce來進行去重
我先定義兩個數(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é)果
看起來好像是第二種辦法代碼量要小一些,但是第一個通用,兼容性特別好,第二個因為牽扯到了ES6新特性,所以還是要考慮一下兼容性,但是如果你要是在vue-cli初始化生成的項目,可以隨便用ES6的新特性,他自動轉(zhuǎn)譯了,我自己搭建了一個demo,試了好多新特性,IE9+都有效果(本身vue就不支持IE8及以下,所以IE9以下沒辦法實驗)
PS:這里再為大家提供幾款相關(guān)工具供大家參考使用:
在線去除重復項工具:
http://tools.jb51.net/code/quchong
在線文本去重復工具:
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ù)學運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript性能優(yōu)化之DOM交互操作實例分析
這篇文章主要介紹了javascript性能優(yōu)化之DOM交互操作技巧,結(jié)合實例形式總結(jié)分析了JavaScript針對DOM操作過程中的各種常見優(yōu)化操作技巧,需要的朋友可以參考下2015-12-12bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法
這篇文章主要介紹了bootstrap動態(tài)添加面包屑(breadcrumb)及其響應(yīng)事件的方法,涉及js數(shù)據(jù)傳輸及定義響應(yīng)事件相關(guān)操作技巧,需要的朋友可以參考下2017-05-05詳談js中數(shù)組(array)和對象(object)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中數(shù)組(array)和對象(object)的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02