js中數(shù)組對象去重的兩種方法

更新時間：2019年01月18日 11:24:40 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于js中數(shù)組對象去重的兩種方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

方法一：

采用對象訪問屬性的方法，判斷屬性值是否存在，如果不存在就添加。

方法二：

采用數(shù)組中的reduce方法，遍歷數(shù)組，也是通過對象訪問屬性的方法

var arr = [{
   key: '01',
   value: '樂樂'
  }, {
   key: '02',
   value: '博博'
  }, {
   key: '03',
   value: '淘淘'
  },{
   key: '04',
   value: '哈哈'
  },{
   key: '01',
   value: '樂樂'
  }];
  // 方法1：利用對象訪問屬性的方法，判斷對象中是否存在key
  var result = [];
  var obj = {};
  for(var i =0; i<arr.length; i++){
   if(!obj[arr[i].key]){
     result.push(arr[i]);
     obj[arr[i].key] = true;
   }
  }
  console.log(result); // [{key: "01", value: "樂樂"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]
  // 方法2：利用reduce方法遍歷數(shù)組,reduce第一個參數(shù)是遍歷需要執(zhí)行的函數(shù)，第二個參數(shù)是item的初始值
  var obj = {};
  arr = arr.reduce(function(item, next) {
   obj[next.key] ? '' : obj[next.key] = true && item.push(next);
   return item;
  }, []);
  console.log(arr); // [{key: "01", value: "樂樂"},{key: "02", value: "博博"},{key: "03", value: "淘淘"},{key: "04", value: "哈哈"}]

若有不足請多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章:

相關(guān)文章

聊一聊對js包裝對象的理解
JavaScript中的基本類型通過自動裝箱和拆箱機(jī)制,可以臨時轉(zhuǎn)換為對應(yīng)的包裝對象,以訪問屬性和方法,了解包裝對象的臨時性和手動創(chuàng)建方式有助于編寫更高效和正確的代碼,感興趣的朋友跟隨小編一起看看吧
2024-11-11
JavaScript使用replace函數(shù)替換字符串的方法
這篇文章主要介紹了JavaScript使用replace函數(shù)替換字符串的方法,涉及javascript中replace函數(shù)的使用技巧,非常具有實(shí)用價值,需要的朋友可以參考下
2015-04-04
jser必看的破解javascript各種加密的反向思維方法
才發(fā)現(xiàn)的破解javascript各種加密的反向思維方法,大家有好的方法都跟帖啊最近發(fā)現(xiàn)了一個代碼，加密了5層左右，我將破解到最后一步，而且不用javascript解密程序
2007-04-04
JavaScript中的appendChild()方法示例詳解
這篇文章主要介紹了JavaScript中的appendChild()方法,appendChild()方法是向節(jié)點(diǎn)添加最后一個子節(jié)點(diǎn),也可以使用此方法從一個元素向另一個元素移動元素,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析
這篇文章主要介紹了JavaScript事件循環(huán)及宏任務(wù)微任務(wù)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09
前端printjs的使用實(shí)戰(zhàn)案例
Print.js是一個小的javascript庫,可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于前端printjs的使用實(shí)戰(zhàn)案例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
TypeScript泛型約束條件示例詳解
有了泛型之后一個函數(shù)或容器類能處理的類型一下子擴(kuò)到了無限大,似乎有點(diǎn)失控的感覺,所以這里又產(chǎn)生了一個約束的概念,下面這篇文章主要給大家介紹了關(guān)于TypeScript泛型約束條件的相關(guān)資料,需要的朋友可以參考下
2022-04-04
javascript 封裝Date日期類實(shí)例詳解
這篇文章主要介紹了javascript-封裝Date日期類的相關(guān)資料,需要的朋友可以參考下
2017-05-05
JavaScript提升機(jī)制Hoisting詳解
這篇文章主要介紹了JavaScript提升機(jī)制Hoisting詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-10-10
通過隱藏iframe實(shí)現(xiàn)文件下載的js方法介紹
本篇文章主要是對通過隱藏iframe實(shí)現(xiàn)文件下載的js方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02