vue中對象數(shù)組去重的實(shí)現(xiàn)
更新時(shí)間：2020年02月06日 15:53:23 作者：靳哲
這篇文章主要介紹了vue中對象數(shù)組去重的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
其實(shí)很簡單，一般的數(shù)組去重可以直接用 new Set() 方法即可，但是數(shù)組對象的話，比較復(fù)雜，不能直接用，我們可以采取間接的方法來去重
unique(arr) {
const res = new Map();
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}
下面有一個(gè)示例，根據(jù)對象的id作為去重的依據(jù)：
<el-button type="primary" size="medium" @click="quChong()">點(diǎn)擊</el-button>
quChong() {
let arr = [
{
id: 1,
name: '111'
},
{
id: 1,
name: '111'
},
{
id: 2,
name: '222'
},
{
id: 3,
name: '333'
}
];
console.log(arr);
console.log('--------------------');
let arr1 = this.unique(arr);
console.log(arr1);
},
unique(arr) {
const res = new Map();
return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
},
這樣就很簡單的去重了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中使用Element-Plus的el-upload組件限制只上傳一個(gè)文件的功能實(shí)現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進(jìn)行文件上傳時(shí),有時(shí)候需要限制只能上傳一個(gè)文件,本文將介紹如何通過配置 el-upload 組件實(shí)現(xiàn)這個(gè)功能,讓你的文件上傳變得更加簡潔和易用,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue中的變量賦值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
解決vue 子組件修改父組件傳來的props值報(bào)錯(cuò)問題
今天小編就為大家分享一篇解決vue 子組件修改父組件傳來的props值報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中對＜style scoped＞ 中的scoped屬性解析
在Vue的單文件組件中,<style scoped> 的 scoped 屬性用于實(shí)現(xiàn)?樣式作用域隔離?,下面通過實(shí)例代碼講解Vue中對＜style scoped＞中的scoped屬性,感興趣的朋友一起看看吧2025-03-03
vue使用jsencrypt實(shí)現(xiàn)rsa前端加密的操作代碼
這篇文章主要介紹了vue使用jsencrypt實(shí)現(xiàn)rsa前端加密,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟
在平時(shí)開發(fā)的時(shí)候很多情況都會使用到表格和分頁功能,下面這篇文章主要給大家介紹了關(guān)于如何基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟,需要的朋友可以參考下2022-09-09
element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時(shí)候切換到所有文件 之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧2024-02-02
本文主要介紹了前后端分離項(xiàng)目中的跨域問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
mixins（混入）官方的描述是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式,這篇文章主要給大家介紹了關(guān)于vue中混入 mixins使用的相關(guān)資料,需要的朋友可以參考下2021-10-10