本文實例講述了JS實現數組去重及數組內對象去重功能。分享給大家供大家參考，具體如下：
大家在寫項目的時候一定遇到過這種邏輯需求，就是給一個數組進行去重處理，還有一種就是給數組內的對象根據某一個屬性，比如id，進行去重，下面我寫了兩個函數，都是可以達到這個效果的，一個是純ES5的去重辦法，一個是用了ES6的 Array.from(new Set())和ES5的reduce來進行去重
我先定義兩個數組吧
var arr = [1,2,3,5,3,4,5,6,6,"test","test",true];var person = [ { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經", post:"斗戰勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經", post:"斗戰勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經", post:"斗戰勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經", post:"斗戰勝佛、齊天大圣" }, { name:"孫悟空", weapon:"如意金箍棒", experience:"大鬧天宮、西天取經", post:"斗戰勝佛、齊天大圣" }];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"));看下結果
看起來好像是第二種辦法代碼量要小一些，但是第一個通用，兼容性特別好，第二個因為牽扯到了ES6新特性，所以還是要考慮一下兼容性，但是如果你要是在vue-cli初始化生成的項目，可以隨便用ES6的新特性，他自動轉譯了，我自己搭建了一個demo，試了好多新特性，IE9+都有效果（本身vue就不支持IE8及以下，所以IE9以下沒辦法實驗）
PS：這里再為大家提供幾款相關工具供大家參考使用：
在線去除重復項工具：
http://tools.VeVB.COm/code/quchong
在線文本去重復工具：
http://tools.VeVB.COm/aideddesign/txt_quchong
更多關于JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
