欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年02月02日 08:46:49   作者:前端林三哥  
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組去重及數(shù)組內(nèi)對(duì)象去重功能,結(jié)合實(shí)例形式分析了ES5與ES6兩種版本針對(duì)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下

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

大家在寫項(xiàng)目的時(shí)候一定遇到過這種邏輯需求,就是給一個(gè)數(shù)組進(jìn)行去重處理,還有一種就是給數(shù)組內(nèi)的對(duì)象根據(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

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)

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

相關(guān)文章

最新評(píng)論