JS小技巧，如何去重對象數組？
作者：前端達人
關于數組對象去重的業務場景，想必大家都遇到過類似的需求吧，這對這樣的需求你是怎么做的呢。下面我就先和大家分享下如果是基于對象的1個屬性是怎么去重實現的。
大家好，關于數組對象去重的業務場景，想必大家都遇到過類似的需求吧，這對這樣的需求你是怎么做的呢。下面我就先和大家分享下如果是基于對象的1個屬性是怎么去重實現的。
方法一：使用 .filter() 和 .findIndex() 相結合的方法
使用 Array.prototype.filter() 和 Array.prototype.findIndex()：使用 filter() 方法過濾掉重復的元素，使用 findIndex() 方法判斷對象是否重復，代碼如下：
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() 方法維護一個累加器，通過對象的屬性來判斷是否重復，代碼如下：
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() 相結合的方法
使用 forEach() 方法遍歷數組，使用 some() 方法判斷是否重復，代碼如下：
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 結構去重對象數組時，需要借助 array.map() 函數將對象數組進行轉換，示例代碼如下：
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()，按照對象的屬性來判斷是否重復，代碼如下
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 結合
- 這個方法的思想與方法3類似 ，其思路結構如下：
- 創建一個空的唯一數組來存儲唯一對象。
- 循環遍歷數組中的對象。對于每個對象，如果它不是重復的，則將其添加到唯一數組。否則，忽略它
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);
}
}針對多個屬性進行去重
有時候，您可能希望僅當對象具有兩個或多個具有相同值的屬性時才將其視為重復對象——多個屬性值相同。
對于這種情況，我們可以將上述方法進行稍微調整就可以進行使用，有部分方法可能不適用,有哪些不合適，這個問題留給大家，歡迎大家在評論區補充。
我們拿使用 .filter() 和 .findIndex() 相結合的方法嘗試下，看看如何操作：
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 結合的方法，也能實現同樣的效果
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)結束
其他幾個方法的改造，歡迎大家作為練習進行嘗試，這里就不在一一舉例了，今天的分享就到這里，今天分享的這些方法都可以實現對象數組的去重，具體使用哪種方法取決于個人的喜好和項目的需求。
責任編輯：姜華
來源：
今日頭條
