AaQ28資訊網(wǎng)——每日最新資訊28at.com

大家好，關(guān)于數(shù)組對象去重的業(yè)務(wù)場景，想必大家都遇到過類似的需求吧，這對這樣的需求你是怎么做的呢。下面我就先和大家分享下如果是基于對象的1個屬性是怎么去重實現(xiàn)的。AaQ28資訊網(wǎng)——每日最新資訊28at.com

方法一：使用 .filter() 和 .findIndex() 相結(jié)合的方法

使用 Array.prototype.filter() 和 Array.prototype.findIndex()：使用 filter() 方法過濾掉重復(fù)的元素，使用 findIndex() 方法判斷對象是否重復(fù)，代碼如下：AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},              {id: 1, name: "c"}, {id: 3, name: "d"}];const uniqueArr = arr.filter((item, index) =>      arr.findIndex(i => i.id === item.id) === index);

方法二：使用 .reduce() 方法

使用 reduce() 方法維護一個累加器，通過對象的屬性來判斷是否重復(fù)，代碼如下：AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},             {id: 1, name: "c"}, {id: 3, name: "d"}];const uniqueArr = arr.reduce((acc, curr) => {  if (!acc.find(item => item.id === curr.id)) {    acc.push(curr);  }  return acc;}, []);

方法三、使用 .forEach() 和 .some() 相結(jié)合的方法

使用 forEach() 方法遍歷數(shù)組，使用 some() 方法判斷是否重復(fù)，代碼如下：AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},              {id: 1, name: "c"}, {id: 3, name: "d"}];const uniqueArr = [];arr.forEach(item => {  if (!uniqueArr.some(i => i.id === item.id)) {    uniqueArr.push(item);  }});

方法四：使用 Map

使用 Map 結(jié)構(gòu)去重對象數(shù)組時，需要借助 array.map() 函數(shù)將對象數(shù)組進行轉(zhuǎn)換，示例代碼如下：AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},              {id: 1, name: "c"}, {id: 3, name: "d"}];const uniqueArr = [...new Map(arr.map(item => [item.id, item])).values()];

方法五： Object.create()

使用Object.create()，按照對象的屬性來判斷是否重復(fù)，代碼如下AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},              {id: 1, name: "c"}, {id: 3, name: "d"}];const uniqueArr = arr.filter(function (item) {    return !this[item.id] && (this[item.id] = true);}, Object.create(null));

方法六： For const of 和 find 結(jié)合

• 這個方法的思想與方法3類似 ，其思路結(jié)構(gòu)如下：
• 創(chuàng)建一個空的唯一數(shù)組來存儲唯一對象。
• 循環(huán)遍歷數(shù)組中的對象。對于每個對象，如果它不是重復(fù)的，則將其添加到唯一數(shù)組。否則，忽略它

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},   {id: 1, name: "c"}, {id: 3, name: "d"}];const unique = [];for (const item of arr) {  const isDuplicate = unique.find((obj) => obj.id === item.id);  if (!isDuplicate) {    unique.push(item);  }}

針對多個屬性進行去重

有時候，您可能希望僅當(dāng)對象具有兩個或多個具有相同值的屬性時才將其視為重復(fù)對象——多個屬性值相同。AaQ28資訊網(wǎng)——每日最新資訊28at.com

對于這種情況，我們可以將上述方法進行稍微調(diào)整就可以進行使用，有部分方法可能不適用,有哪些不合適，這個問題留給大家，歡迎大家在評論區(qū)補充。AaQ28資訊網(wǎng)——每日最新資訊28at.com

我們拿使用 .filter() 和 .findIndex() 相結(jié)合的方法嘗試下，看看如何操作：AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},              {id: 1, name: "a"}, {id: 3, name: "d"}];const uniqueArr = arr.filter((item, index) =>                              arr.findIndex(i => i.id === item.id                                 && i.name === item.name) === index);

我們再使用 For const of 和 find 結(jié)合的方法，也能實現(xiàn)同樣的效果AaQ28資訊網(wǎng)——每日最新資訊28at.com

const arr = [{id: 1, name: "a"}, {id: 2, name: "b"},   {id: 1, name: "a"}, {id: 3, name: "d"}];const unique = [];for (const item of arr) {  const isDuplicate = unique.find((obj) =>    obj.id === item.id && obj.name ==item.name);  if (!isDuplicate) {    unique.push(item);  }}console.log(unique)

結(jié)束

其他幾個方法的改造，歡迎大家作為練習(xí)進行嘗試，這里就不在一一舉例了，今天的分享就到這里，今天分享的這些方法都可以實現(xiàn)對象數(shù)組的去重，具體使用哪種方法取決于個人的喜好和項目的需求。AaQ28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-38117-0.htmlJS小技巧，如何去重對象數(shù)組？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 你應(yīng)該知道的13個最常見的JavaScript字符串方法

下一篇： 特殊線程池ForkJoinPool 要合理運用，不是什么樣的任務(wù)都拿來用