快捷導(dǎo)航

關(guān)于JavaScript數(shù)組對象去重的幾種方法

更新時間：2023年04月21日 11:06:09 作者：小太陽...

這篇文章主要介紹了關(guān)于JavaScript數(shù)組對象去重的幾種方法,不管是map對象的特性還是reduce方法都是很好用的去重方法,需要的朋友可以參考下

數(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 對象保存鍵值對。任何值(對象或者原始值) 都可以作為一個鍵或一個值。 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ù)組的末尾添加一個或更多元素，并返回新的長度
unshift	向數(shù)組的開頭添加一個或更多元素，并返回新的長度
pop	刪除數(shù)組的最后一個元素并返回刪除的元素
shift	刪除并返回數(shù)組的第一個元素
sort	對數(shù)組的元素進行排序
splice	從數(shù)組中添加或刪除元素
reverse	反轉(zhuǎn)數(shù)組的元素順序