溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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.jb51.net/code/quchong
在線文本去重復工具：
http://tools.jb51.net/aideddesign/txt_quchong
更多關于JavaScript相關內容還可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
