關(guān)于JavaScript數(shù)組對象去重的幾種方法
數(shù)組對象如下:
let repeatData = [ { id: 1, name: 'sun', age: 18 }, { id: 1, name: 'sun', age: 18 }, { id: 2, name: 'baozi', age: 20 }, { id: 1, name: 'sun', age: 18 }, { id: 3, name: 'lele', age: 3 }, { id: 2, name: 'baozi', age: 20 } ]
要把id一樣的數(shù)據(jù)刪掉,得到如下結(jié)果
1.利用Map對象 Map 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。 Map對象如果有重復(fù)的鍵值,則后面的會覆蓋前面的
// 利用map對象 let map = new Map() repeatData.forEach(item => { map.set(item.id, item) }) let newData = [...map.values()] console.log(newData, 'newData');
2.雙層for循環(huán)
for (let i = 0; i < repeatData.length; i++) { for(let j = i + 1; j < repeatData.length; j++) { if (repeatData[i].id === repeatData[j].id) { repeatData.splice(j, 1) j-- } } } console.log(repeatData, 'repeatData');
3.利用數(shù)組的reduce方法
let newObj = {}; repeatData = repeatData.reduce((preVal, curVal) => { newObj[curVal.id] ? '' : newObj[curVal.id] = preVal.push(curVal); return preVal }, []) console.log(repeatData, 'repeatData');
4.利用對象的屬性
let newObj = {}, newArr = [] repeatData.forEach(item => { if (!newObj[item.id]) { newObj[item.id] = newArr.push(item) } }) console.log(newArr, 'newArr');
注意:第二種方法用到的splice方法會改變原數(shù)組
js數(shù)組中下面方法會改變原數(shù)組:
方法 | 用法 |
push | 向數(shù)組的末尾添加一個(gè)或更多元素,并返回新的長度 |
unshift | 向數(shù)組的開頭添加一個(gè)或更多元素,并返回新的長度 |
pop | 刪除數(shù)組的最后一個(gè)元素并返回刪除的元素 |
shift | 刪除并返回?cái)?shù)組的第一個(gè)元素 |
sort | 對數(shù)組的元素進(jìn)行排序 |
splice | 從數(shù)組中添加或刪除元素 |
reverse | 反轉(zhuǎn)數(shù)組的元素順序 |
到此這篇關(guān)于關(guān)于JavaScript數(shù)組對象去重的幾種方法的文章就介紹到這了,更多相關(guān)JavaScript數(shù)組對象去重內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序仿抖音視頻之整屏上下切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序仿抖音視頻之整屏上下切換功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05ES6知識點(diǎn)整理之對象解構(gòu)賦值應(yīng)用示例
這篇文章主要介紹了ES6知識點(diǎn)整理之對象解構(gòu)賦值應(yīng)用,結(jié)合實(shí)例形式分析了ES6對象解構(gòu)賦值相關(guān)概念、原理、出現(xiàn)的問題及相應(yīng)解決方法,需要的朋友可以參考下2019-04-04JavaScript實(shí)現(xiàn)搜索的數(shù)據(jù)顯示
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)搜索的數(shù)據(jù)顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript中isPrototypeOf函數(shù)作用和使用實(shí)例
這篇文章主要介紹了JavaScript中isPrototypeOf函數(shù)作用和使用實(shí)例,本文講解了它的作用和使用方法以及使用實(shí)例,需要的朋友可以參考下2015-06-06關(guān)于arguments,callee,caller等的測試
關(guān)于arguments,callee,caller等的測試...2006-12-12javascript eval()應(yīng)用實(shí)例 select
javascript eval應(yīng)用小例子。實(shí)例代碼就是控制checkbox的選擇與取消的函數(shù),非常不錯(cuò)。2009-07-07bootstrap網(wǎng)格系統(tǒng)使用方法解析
這篇文章主要為大家詳細(xì)解析了bootstrap網(wǎng)絡(luò)系統(tǒng)使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡單方式
下面小編就為大家?guī)硪黄狫S 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡單方式。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09Javascript判斷對象是否相等實(shí)現(xiàn)代碼
想判斷2個(gè)js對象,是不是所有完全相同在表單頁面應(yīng)用是很常見的,接下來分享一段判斷代碼,感興趣的你可以參考下哈,希望可以幫助到你2013-03-03