快捷導(dǎo)航

JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對象去重功能示例

更新時(shí)間：2019年02月02日 08:46:49 作者：前端林三哥

這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對象去重功能,結(jié)合實(shí)例形式分析了ES5與ES6兩種版本針對數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對象去重功能。分享給大家供大家參考，具體如下：

大家在寫項(xiàng)目的時(shí)候一定遇到過這種邏輯需求，就是給一個(gè)數(shù)組進(jìn)行去重處理，還有一種就是給數(shù)組內(nèi)的對象根據(jù)某一個(gè)屬性，比如id，進(jìn)行去重，下面我寫了兩個(gè)函數(shù)，都是可以達(dá)到這個(gè)效果的，一個(gè)是純ES5的去重辦法，一個(gè)是用了ES6的 Array.from(new Set())和ES5的reduce來進(jìn)行去重

我先定義兩個(gè)數(shù)組吧

var arr = [1,2,3,5,3,4,5,6,6,"test","test",true];
var person = [
  {
    name:"孫悟空",
    weapon:"如意金箍棒",
    experience:"大鬧天宮、西天取經(jīng)",
    post:"斗戰(zhàn)勝佛、齊天大圣"
  },
  {
    name:"孫悟空",
    weapon:"如意金箍棒",
    experience:"大鬧天宮、西天取經(jīng)",
    post:"斗戰(zhàn)勝佛、齊天大圣"
  },
  {
    name:"孫悟空",
    weapon:"如意金箍棒",
    experience:"大鬧天宮、西天取經(jīng)",
    post:"斗戰(zhàn)勝佛、齊天大圣"
  },
  {
    name:"孫悟空",
    weapon:"如意金箍棒",
    experience:"大鬧天宮、西天取經(jīng)",
    post:"斗戰(zhàn)勝佛、齊天大圣"
  },
  {
    name:"孫悟空",
    weapon:"如意金箍棒",
    experience:"大鬧天宮、西天取經(jīng)",
    post:"斗戰(zhàn)勝佛、齊天大圣"
  }
];

ES5版本：

//ES5原生去重辦法
function Es5duplicate(arr,type){
  var newArr = [];
  var tArr = [];
  if(arr.length == 0){
    return arr;
  }else{
    if(type){
      for(var i = 0; i < arr.length;i++){
        if(!tArr[arr[i][type]]){
          newArr.push(arr[i]);
          tArr[arr[i][type]] = true;
        }
      }
      return newArr;
    }else{
      for(var i = 0; i < arr.length;i++){
        if(!tArr[arr[i]]){
          newArr.push(arr[i]);
          tArr[arr[i]] = true;
        }
      }
      return newArr;
    }
  }
}
console.log('ES5去重',Es5duplicate(arr));
console.log('ES5去重',Es5duplicate(person,"name"));

ES6 + ES5版本：

//Es6 + ES5去重辦法
function Es6duplicate(arr,type){
  if(arr.length == 0){
    return arr;
  }else{
    if(type){
      var obj = {}
      var newArr = arr.reduce((cur,next) => {
        obj[next.name] ? "" : obj[next.name] = true && cur.push(next);
        return cur;
      },[])
      return newArr;
    }else{
      return Array.from(new Set(arr));
    }
  }
}
console.log('ES6去重',Es6duplicate(arr));
console.log('ES6去重',Es6duplicate(person,"name"));

看下結(jié)果

看起來好像是第二種辦法代碼量要小一些，但是第一個(gè)通用，兼容性特別好，第二個(gè)因?yàn)闋砍兜搅薊S6新特性，所以還是要考慮一下兼容性，但是如果你要是在vue-cli初始化生成的項(xiàng)目，可以隨便用ES6的新特性，他自動(dòng)轉(zhuǎn)譯了，我自己搭建了一個(gè)demo，試了好多新特性，IE9+都有效果（本身vue就不支持IE8及以下，所以IE9以下沒辦法實(shí)驗(yàn)）

PS：這里再為大家提供幾款相關(guān)工具供大家參考使用：

在線去除重復(fù)項(xiàng)工具：
http://tools.jb51.net/code/quchong

在線文本去重復(fù)工具：
http://tools.jb51.net/aideddesign/txt_quchong

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: