Vue數(shù)組根據(jù)對(duì)象屬性去重和數(shù)組對(duì)象去重實(shí)現(xiàn)方式

更新時(shí)間：2025年12月04日 16:16:26 作者：懶員員

文章介紹了兩種去重方法：一種是根據(jù)對(duì)象的`id`屬性去重,另一種是根據(jù)`id`和`name`屬性去重,通過`map()`和`filter()`方法結(jié)合`indexOf()`實(shí)現(xiàn)去重

情況一

需求

一個(gè)'數(shù)組對(duì)象'，根據(jù)對(duì)象的'id'屬性去重。

如果兩個(gè)對(duì)象'id'相等就要進(jìn)行'去重'

const dataArr = [
  {
    id: 1,
    name: '名稱1'
  },
  {
    id: 2,
    name: '名稱2'
  },
  {
    id: 2,
    name: '名稱3'
  },
  {
    id: 2,
    name: '名稱4'
  },
  {
    id: 3,
    name: '名稱5'
  },
  {
    id: 4,
    name: '名稱6'
  },
  {
    id: 5,
    name: '名稱7'
  }
]

先用 map () 拿到所有id的值

const a = dataArr.map(item => {
  return item.id
})
console.log(a) // ['a', 'b', 'b', 'b', 'c', 'b', 'd']

再用 filter () 去過濾使用indexOf()拿到 a 數(shù)組每一項(xiàng)的下標(biāo) (重復(fù)的返回第一次遇見的下標(biāo)) 恒等于沒篩選數(shù)組的下標(biāo) 返回符合條件的所有數(shù)組

const b = dataArr.filter((item, index) => {
  return a.indexOf(item.id) === index
})
console.log(b)

拿到的 b 就是篩選過后的數(shù)組

[
  { id: 'a', name: '名稱1' },
  { id: 'b', name: '名稱2' },
  { id: 'c', name: '名稱5' },
  { id: 'd', name: '名稱7' }
]

情況二

需求

一個(gè)'數(shù)組對(duì)象'，根據(jù)'id'屬性和'name'屬性去重，也就是說兩個(gè)對(duì)象全等。

如果兩個(gè)對(duì)象'id'和'name'都相等就要進(jìn)行'去重'

const dataArr = [
    {
        id: 1,
        name: '名稱1'
    },
    {
        id: 2,
        name: '名稱2'
    },
    {
        id: 2,
        name: '名稱2'
    },
    {
        id: 2,
        name: '名稱3'
    },
    {
        id: 3,
        name: '名稱4'
    },
    {
        id: 4,
        name: '名稱4'
    },
    {
        id: 5,
        name: '名稱5'
    }
]

const arr1 = []
const arr2 = []

for (let i = 0; i < dataArr.length; i++) {
    if (!(arr1.includes(dataArr[i].id + '-' + dataArr[i].name))) { // 1-名稱1 / 2-名稱2 等等。。。
        // 數(shù)組中沒有就往里添加
        arr1.push(dataArr[i].id + '-' + dataArr[i].name)
        arr2.push({
            id: dataArr[i].id,
            name: dataArr[i].name
        })
    }
}

// console.log(arr2)
// [
//     { "id": 1, "name": "名稱1" },
//     { "id": 2, "name": "名稱2" },
//     { "id": 2, "name": "名稱3" },
//     { "id": 3, "name": "名稱4" },
//     { "id": 4, "name": "名稱4" },
//     { "id": 5, "name": "名稱5" }
// ]

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue文件批量上傳及進(jìn)度條展示的實(shí)現(xiàn)方法
開發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue文件批量上傳及進(jìn)度條展示的實(shí)現(xiàn)方法,需要的朋友可以參考下
2022-12-12
vue裁切預(yù)覽組件功能的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue裁切預(yù)覽組件功能的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問題
這篇文章主要介紹了解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue中的mixins混入使用方法
這篇文章主要介紹了vue中的mixins混入使用方法，混入又分全局混入混入局部混入，下文對(duì)兩者都有相關(guān)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
解決安裝并配置cz-customizable插件遇到報(bào)錯(cuò)問題
文章描述了安裝并配置cz-customizable插件時(shí)遇到的npm解析錯(cuò)誤,錯(cuò)誤信息提示依賴沖突,解決方案是在命令后加--force或--legacy-peer-deps強(qiáng)制安裝,
2026-04-04
Vue路由回退頁面不刷新的原因及解決方案匯總
在Vue開發(fā)過程中,常常會(huì)碰到這樣一種情形：從頁面A跳轉(zhuǎn)到頁面B后,點(diǎn)擊瀏覽器回退按鈕返回頁面A時(shí),頁面數(shù)據(jù)卻未刷新,依舊保持之前的狀態(tài),這一情況可能會(huì)給用戶帶來困擾,對(duì)用戶體驗(yàn)產(chǎn)生不良影響,本文將深入探討如何妥善處理此類問題,以保證回退頁面時(shí)數(shù)據(jù)能夠準(zhǔn)確更新
2024-11-11
Vue.js前端框架之事件處理小結(jié)
這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法，通過實(shí)例講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
vue2中使用SSE(服務(wù)器發(fā)送事件)原因分析
SSE是圍繞只讀Comet交互推出的API或者模式,SSE 支持短輪詢、長輪詢和HTTP 流,而且能在斷開連接時(shí)自動(dòng)確定何時(shí)重新連接,本文重點(diǎn)給大家介紹
2023-10-10
詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語法和es6語法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
vue中使用hover選擇器無效的問題
這篇文章主要介紹了vue中使用hover選擇器無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10