亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

我先定義兩個數(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é)果

看起來好像是第二種辦法代碼量要小一些,但是第一個通用,兼容性特別好,第二個因為牽扯到了ES6新特性,所以還是要考慮一下兼容性,但是如果你要是在vue-cli初始化生成的項目,可以隨便用ES6的新特性,他自動轉(zhuǎn)譯了,我自己搭建了一個demo,試了好多新特性,IE9+都有效果(本身vue就不支持IE8及以下,所以IE9以下沒辦法實驗)

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

在線去除重復項工具:
http://tools.jb51.net/code/quchong

在線文本去重復工具:
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ù)學運算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)

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

相關(guān)文章

最新評論