vue中對象數(shù)組去重的實現(xiàn)

更新時間：2020年02月06日 15:53:23 作者：靳哲

這篇文章主要介紹了vue中對象數(shù)組去重的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

其實很簡單，一般的數(shù)組去重可以直接用 new Set() 方法即可，但是數(shù)組對象的話，比較復雜，不能直接用，我們可以采取間接的方法來去重

unique(arr) {
 const res = new Map();
 return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
}

下面有一個示例，根據(jù)對象的id作為去重的依據(jù)：

 <el-button type="primary" size="medium" @click="quChong()">點擊</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));
   },

這樣就很簡單的去重了

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue3中使用Element-Plus的el-upload組件限制只上傳一個文件的功能實現(xiàn)
在 Vue 3 中使用 Element-Plus 的 el-upload 組件進行文件上傳時,有時候需要限制只能上傳一個文件,本文將介紹如何通過配置 el-upload 組件實現(xiàn)這個功能,讓你的文件上傳變得更加簡潔和易用,需要的朋友可以參考下
2023-10-10
Vue中的變量賦值問題
這篇文章主要介紹了Vue中的變量賦值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決vue 子組件修改父組件傳來的props值報錯問題
今天小編就為大家分享一篇解決vue 子組件修改父組件傳來的props值報錯問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue的ElementUI form表單如何給label屬性字符串中添加空白占位符
這篇文章主要介紹了vue的ElementUI form表單如何給label屬性字符串中添加空白占位符問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue中對＜style scoped＞中的scoped屬性解析
在Vue的單文件組件中,<style scoped> 的 scoped 屬性用于實現(xiàn)?樣式作用域隔離?,下面通過實例代碼講解Vue中對＜style scoped＞中的scoped屬性,感興趣的朋友一起看看吧
2025-03-03
vue使用jsencrypt實現(xiàn)rsa前端加密的操作代碼
這篇文章主要介紹了vue使用jsencrypt實現(xiàn)rsa前端加密,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-09-09
基于Element-Ui封裝公共表格組件的詳細圖文步驟
在平時開發(fā)的時候很多情況都會使用到表格和分頁功能,下面這篇文章主要給大家介紹了關于如何基于Element-Ui封裝公共表格組件的詳細圖文步驟,需要的朋友可以參考下
2022-09-09
element-ui upload組件上傳文件類型限制問題小結
最近我遇到這樣的問題,接受類型已經加了accept 但是當選擇彈出本地選擇文件時候切換到所有文件之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結,感興趣的朋友一起看看吧
2024-02-02
vue解決跨域問題的方法
本文主要介紹了前后端分離項目中的跨域問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-12-12
vue中混入mixins的使用方法
mixins（混入）官方的描述是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式,這篇文章主要給大家介紹了關于vue中混入 mixins使用的相關資料,需要的朋友可以參考下
2021-10-10