js兩個(gè)數(shù)組合并去重的方法大全
一、兩個(gè)數(shù)組對象進(jìn)行合并去重
方法一 new Map
let arr=[ {id:1,name:'AAAA'}, {id:2,name:'BBBB'} ] let arr1=[ {id:1,name:'AAAA'}, {id:3,name:'CCCC'} ] let arrs=[...arr,...arr1]; //根據(jù)id去重 let map=new Map(); for(let item of arrs){ if(!map.has(item.id)){ map.set(item.id,item) } } let newArr=[...map.values()];//把map中所有的值取出來放進(jìn)數(shù)組
方法二 arr.reduce
removedup(arr, batch) { if (!Array.isArray(arr)) { return arr; } if (arr.length == 0) { return []; } let obj = {}; let uniqueArr = arr.reduce(function (total, item) { obj[item[batch]] ? '' : (obj[item[batch]] = true && total.push(item)); return total; }, []); return uniqueArr; } // arrObjList 需要去重的數(shù)組對象, score 根據(jù)這個(gè)屬性進(jìn)行去重 let uniqueArrObjList = removedup(arrObjList, "score");
方法三 遍歷數(shù)組法
這是最簡單的去重方法,實(shí)現(xiàn)思路:合并兩個(gè)數(shù)組,然后遍歷去吃
let json1=[ {id:1,name:"aaa"}, {id:2,name:"bbb"}, {id:3,name:"ccc"}, ] let json2=[ {id:1,name:"aaa"}, {id:2,name:"bbb"}, {id:4,name:"ddd"}, ] let json = json1.concat(json2); //兩個(gè)數(shù)組對象合并 let newJson = []; //盛放去重后數(shù)據(jù)的新數(shù)組 for(item1 of json){ //循環(huán)json數(shù)組對象的內(nèi)容 let flag = true; //建立標(biāo)記,判斷數(shù)據(jù)是否重復(fù),true為不重復(fù) for(item2 of newJson){ //循環(huán)新數(shù)組的內(nèi)容 if(item1.id==item2.id){ //讓json數(shù)組對象的內(nèi)容與新數(shù)組的內(nèi)容作比較,相同的話,改變標(biāo)記為false flag = false; } } if(flag){ //判斷是否重復(fù) newJson.push(item1); //不重復(fù)的放入新數(shù)組。 新數(shù)組的內(nèi)容會(huì)繼續(xù)進(jìn)行上邊的循環(huán)。 } } console.log("newJson",newJson);
方法四 利用對象屬性的唯一性去重
個(gè)人比較推薦,在面對數(shù)組中每一項(xiàng)都是一個(gè)對象的時(shí)候,一些API是不生效的
//利用對象屬性的唯一性去重 let list = [ {Staff_Code: "001", Staff_Name: "唐三"}, {Staff_Code: "001", Staff_Name: "唐三"}, {Staff_Code: "002", Staff_Name: "小舞"}, {Staff_Code: "003", Staff_Name: "奧斯卡"} ]; cutarray(arr) { let obj = {}; //obj用來記錄該項(xiàng)重復(fù)出現(xiàn)了幾次 let brr = []; //brr是去重后的數(shù)組 arr.forEach((item) => { if (obj[item.Staff_Code] == undefined) { obj[item.Staff_Code] = 1; brr.push(item); } else { obj[item.Staff_Code] += 1; } }); return brr; } let arr = this.cutarray(list);
二、數(shù)組的合并去重
方法一 new Set
let arr1 = [3,5,2,3,6]; let arr2 = [5,2,4,6,8,7,9,2]; let arr = arr1.concat(arr2); //合并數(shù)組 let arrNew= new Set(arr); //通過set集合去重 console.log("arrNew",Array.from(arrNew)); //將set集合轉(zhuǎn)化為數(shù)組
方法二 遍歷數(shù)組法
遍歷舊數(shù)組,把值加入新建的數(shù)組(當(dāng)新數(shù)組中不存在該值時(shí))
function uniqueArr(array) { var n = []; //一個(gè)新的臨時(shí)數(shù)組 //遍歷當(dāng)前數(shù)組 for (var i = 0; i < array.length; i++) { //如果當(dāng)前數(shù)組的第i已經(jīng)保存進(jìn)了臨時(shí)數(shù)組,那么跳過, //否則把當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面 if (n.indexOf(array[i]) == -1) n.push(array[i]); } return n; }
注意:indexOf是ECMA5的新方法,IE8及以下不支持,所以要做兼容性處理。
if (Array.prototype.indexOf){ Array.prototype.indexOf = function (item) { var result = -1,a_item = null; if (this.length == 0) { return result } for (var i = 0,len=this.length;i<len;i++) { a_item = this[i]; if (a_item === item) { result = i; break; } } return result; } }
方法三 對象鍵值對法
該方法執(zhí)行的速度比其他任何方法都快,但就是占用的內(nèi)存大一些
實(shí)現(xiàn)思路:新建一個(gè)js對象以及新數(shù)組,遍歷要去重的數(shù)組時(shí),判斷值是否是js對象的鍵。不是的話,給對象新增該鍵并放入新數(shù)組。
注意:判斷是否為對象鍵時(shí),會(huì)自動(dòng)對傳入的鍵執(zhí)行‘toString()’,不同的鍵可能會(huì)被誤認(rèn)為是一樣的,如:a[1]與a[‘1’]。解決該問題還是得調(diào)用“indexOf”
function uniqueArr(arr) { var n = {}, r = [], len = arr.length, val, type; for (var i = 0; i < len; i++) { val = arr[i]; type = typeof val; if (!n[val]) { n[val] = [type]; r.push(val); } else if (n[val].indexOf(type) < 0) { n[val].push(type); r.push(val); } }; return r; } console.log(uniqueArr([1,2,[1,2,3],,'1',2,'4','6']))
方法四 數(shù)組下標(biāo)判斷法
還是得調(diào)用“indexOf”性。
實(shí)現(xiàn)思路:如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i,那么表示第i項(xiàng)是重復(fù)的,忽略掉。否則存入結(jié)果數(shù)組。
缺點(diǎn):如果數(shù)組中的值為undefined,則會(huì)剔除,不在新數(shù)組中。
function uniqueArr(array) { var n = []; //結(jié)果數(shù)組 //從第一項(xiàng)開始遍歷 for (var i = 0; i < array.length; i++) { //如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i, //那么表示第i項(xiàng)是重復(fù)的,忽略掉。否則存入結(jié)果數(shù)組 if (array.indexOf(array[i]) == i) n.push(array[i]); } return n; } console.log(uniqueArr([1, 2, [1, 2, 3], , '1', 2, '4', '6']))
方法五 排序后相鄰除法
function uniqueArr(array) { array.sort(); var n = []; for (var i = 0; i < array.length; i++) { if (array[i] !== n[n.length - 1]) { n.push(array[i]); } } return n; } console.log(uniqueArr([1, 2, [1, 2, 3], , '1', 2, '4', '6']))
或者:遞歸去重(先給數(shù)組排序,然后相鄰項(xiàng)判斷是否相等,相等的用splice()截去。)
//遞歸去重(數(shù)組中存儲的是原始(基本)數(shù)據(jù)類型,而非引用類型對象) cutarray(arr) { let len=arr.length; arr.sort((a,b) => a-b); //a-b升序;b-a降序 function loop(index){ if(index >= 1) { if(arr[index]===arr[index-1]) { arr.splice(index, 1); } loop(index-1) } } return arr; }
方法六 優(yōu)化遍歷數(shù)組法
實(shí)現(xiàn)思路:獲取沒重復(fù)的最右一值放入新數(shù)組。(檢測到有重復(fù)值時(shí)終止當(dāng)前循環(huán)同時(shí)進(jìn)入頂層循環(huán)的下一輪判斷)
// 思路:獲取沒重復(fù)的最右一值放入新數(shù)組 function uniqueArr(array) { var r = []; for (var i = 0, l = array.length; i < l; i++) { for (var j = i + 1; j < l; j++) if (array[i] === array[j]) j = ++i; r.push(array[i]); } return r; } console.log(uniqueArr([1, 2, [1, 2, 3], , '1', 2, '4', '6']))
方法七 利用filter()去重
// 如果新數(shù)組的當(dāng)前元素的索引值 == 該元素在原始數(shù)組中的第一個(gè)索引,則返回當(dāng)前元素 /**arr.indexOf(item),該方法將從頭到尾地檢索數(shù)組,看它是否含有對應(yīng)的元素。如果找到一個(gè)item,則返回 item的"第一次出現(xiàn)的位置"。**/ let list = arr.filter((item,index) => arr.indexOf(item) === index );
總結(jié)
到此這篇關(guān)于js兩個(gè)數(shù)組合并去重的文章就介紹到這了,更多相關(guān)js數(shù)組合并去重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js使瀏覽器窗口最大化實(shí)現(xiàn)代碼(適用于IE)
點(diǎn)擊最大化按鈕后,瀏覽器的內(nèi)容填充滿顯示器,瀏覽器窗口的邊框被擠出顯示器。而該js的最大化效果是瀏覽器的邊框在顯示器內(nèi)顯示,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-08-08JavaScript實(shí)現(xiàn)矩形塊大小任意縮放
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)矩形塊大小任意縮放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08微信小程序下拉刷新組件加載圖片(三個(gè)小點(diǎn))不顯示刷新狀態(tài)的問題
很多朋友跟小編反饋這樣一個(gè)問題,微信小程序中列表頁面下拉刷新 ,頂部不顯示三個(gè)小點(diǎn)的刷新狀態(tài),今天通過本文給大家介紹下小程序下拉刷新不了的解決方法,感興趣的朋友跟隨小編一起看看吧2022-10-10javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript 組合按鍵事件監(jiān)聽實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02js使用數(shù)組判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù)
判斷提交數(shù)據(jù)是否存在相同數(shù)據(jù),在本文將為大家介紹使用數(shù)組做到這一點(diǎn),感興趣的朋友可以參考下2013-11-11webpack踩坑系列之less-loader6.0.0的javascriptEnabled報(bào)錯(cuò)問題
這篇文章主要介紹了webpack踩坑系列之less-loader6.0.0的javascriptEnabled報(bào)錯(cuò)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01