大家好,關于數組對象去重的業務場景,想必大家都遇到過類似的需求吧,這對這樣的需求你是怎么做的呢。下面我就先和大家分享下如果是基于對象的1個屬性是怎么去重實現的。
使用 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() 方法維護一個累加器,通過對象的屬性來判斷是否重復,代碼如下:
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() 方法判斷是否重復,代碼如下:
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 結構去重對象數組時,需要借助 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(),按照對象的屬性來判斷是否重復,代碼如下
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));
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)
其他幾個方法的改造,歡迎大家作為練習進行嘗試,這里就不在一一舉例了,今天的分享就到這里,今天分享的這些方法都可以實現對象數組的去重,具體使用哪種方法取決于個人的喜好和項目的需求。
本文鏈接:http://www.www897cc.com/showinfo-26-38117-0.htmlJS小技巧,如何去重對象數組?
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com