JS实现数组去重及数组内对象去重功能示例

2024-11-01 08:11:44

本文实例讲述了JS实现数组去重及数组内对象去重功能。分享给大家供大家参考，具体如下：

大家在写项目的时候一定遇到过这种逻辑需求，就是给一个数组进行去重处理，还有一种就是给数组内的对象根据某一个属性，比如id，进行去重，下面我写了两个函数，都是可以达到这个效果的，一个是纯ES5的去重办法，一个是用了ES6的 Array.from(new Set())和ES5的reduce来进行去重

我先定义两个数组吧

var arr = [1,2,3,5,3,4,5,6,6,"test","test",true];
var person = [
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  },
  {
    name:"孙悟空",
    weapon:"如意金箍棒",
    experience:"大闹天宫、西天取经",
    post:"斗战胜佛、齐天大圣"
  }
];

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"));

看下结果

看起来好像是第二种办法代码量要小一些，但是第一个通用，兼容性特别好，第二个因为牵扯到了ES6新特性，所以还是要考虑一下兼容性，但是如果你要是在vue-cli初始化生成的项目，可以随便用ES6的新特性，他自动转译了，我自己搭建了一个demo，试了好多新特性，IE9+都有效果（本身vue就不支持IE8及以下，所以IE9以下没办法实验）

PS：这里再为大家提供几款相关工具供大家参考使用：

在线去除重复项工具：
http://tools.jb51.net/code/quchong

在线文本去重复工具：
http://tools.jb51.net/aideddesign/txt_quchong

更多关于JavaScript相关内容还可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现的对象去重功能示例

本文实例讲述了JS实现的对象去重功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js 对象去重</title> </head> <body> <script> var obj = [ {year: '20
JS数组中对象去重操作示例

本文实例讲述了JS数组中对象去重操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js数组中对象去重</title> </head> <body> <script> var tmp = [ { "
js取两个数组的交集|差集|并集|补集|去重示例代码

复制代码代码如下: /** * each是一个集合迭代函数,它接受一个函数作为参数和一组可选的参数 * 这个迭代函数依次将集合的每一个元素和可选参数用函数进行计算,并将计算得的结果集返回 {%example <script> var a = [1,2,3,4].each(function(x){return x > 2 ? x : null}); var b = [1,2,3,4].each(function(x){return x < 0 ? x : null}); alert
史上最全JavaScript数组去重的十种方法（推荐）

一.前言: 我们在实际工作中,或者在面试找工作时,都会用到或者被问到一个问题,那就是"数组如何去重".是的,这个问题有很多种解决方案,看看下面的十种方式吧! 二.数组去重方式大汇总: Methods 1: 思路:定义一个新数组,并存放原数组的第一个元素,然后将元素组一一和新数组的元素对比,若不同则存放在新数组中. function unique(arr){ var res = [arr[0]]; for(var i=1; i<arr.length; i++){ var repea
JavaScript基于对象方法实现数组去重及排序操作示例

本文实例讲述了JavaScript基于对象方法实现数组去重及排序操作.分享给大家供大家参考,具体如下: <script> //用对象方法实现数组去重 Array.prototype.unique = function() { var newArr = []; for (var i = 0; i < this.length; i++) { if(newArr.indexOf(this[i]) == -1){ newArr.push(this[i]); } } return newArr;
JS实现数组简单去重及数组根据对象中的元素去重操作示例

本文实例讲述了JS实现数组简单去重及数组根据对象中的元素去重操作.分享给大家供大家参考,具体如下: js数组简单去重 var arr1 = [1, 2, 3, 4, 5, 6, 3, 4, 3]; function arrayUnique1(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); ha
js中数组对象去重的两种方法

方法一: 采用对象访问属性的方法,判断属性值是否存在,如果不存在就添加. 方法二: 采用数组中的reduce方法,遍历数组,也是通过对象访问属性的方法 var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: '04', value: '哈哈' },{ key: '01', value: '乐乐' }]; // 方法1:利用对象访问属性的方法,判断对象中
JS实现的Object数组去重功能示例【数组成员为Object对象】

本文实例讲述了JS实现的Object数组去重功能.分享给大家供大家参考,具体如下: 目标:实现成员为 Object 的数组的去重. 注意,这里的数组成员为 Object,而不是数值或者字符串. 调用方法: arr = distinct_arr_element(arr); 函数: /* * 在数组中去除重复项() */ var distinct_arr_element = function( arr ){ if( !arr ) return null ; var resultArr = []; $
js实现数组去重、判断数组以及对象中的内容是否相同

复制代码代码如下: /* *数组元素去重 */ if(typeof Array.prototype.distinct != "function"){ Array.prototype.distinct = function(){ this.sort(); for(var i=0;i<this.length-1;i++){ if($.isPlainObject(this[i]) && $.isPlainObject(this[i+1])){ if(o2o(this[
JS实现数组去重及数组内对象去重功能示例

本文实例讲述了JS实现数组去重及数组内对象去重功能.分享给大家供大家参考,具体如下: 大家在写项目的时候一定遇到过这种逻辑需求,就是给一个数组进行去重处理,还有一种就是给数组内的对象根据某一个属性,比如id,进行去重,下面我写了两个函数,都是可以达到这个效果的,一个是纯ES5的去重办法,一个是用了ES6的 Array.from(new Set())和ES5的reduce来进行去重我先定义两个数组吧 var arr = [1,2,3,5,3,4,5,6,6,"test","t
vue.js项目 el-input 组件监听回车键实现搜索功能示例

基于element-ui 组件开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc
ES6使用Set数据结构实现数组的交集、并集、差集功能示例

本文实例讲述了ES6使用Set数据结构实现数组的交集.并集.差集功能.分享给大家供大家参考,具体如下: Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值. Set本身是一个数据结构,用来生成Set数据节后 Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),
JS基于面向对象实现的多个倒计时器功能示例

本文实例讲述了JS基于面向对象实现的多个倒计时器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码如下: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
JS和C#实现的两个正则替换功能示例分析

本文实例讲述了JS和C#实现的两个正则替换功能.分享给大家供大家参考,具体如下: 应用实例1: 待处理字符串:str="display=test name=mu display=temp" 要求:把display=后的值都改成localhost JS处理方法: str.replace(/display=\w*/g,"display=localhost"); C#处理方法: Regex reg=new Regex(@"display=\w*");
JS实现为动态添加的元素增加事件功能示例【基于事件委托】

本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>
vue.js实现的全选与全不选功能示例【基于elementui】

本文实例讲述了vue.js实现的全选与全不选功能.分享给大家供大家参考,具体如下: elementui是有checkbox组件,不过问题在于checkbox组件内只能嵌套简单的字符串,如果要嵌入标签怎么办? 首先渲染页面: <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in o
Java实现的时间戳与date对象相互转换功能示例

本文实例讲述了Java实现的时间戳与date对象相互转换功能.分享给大家供大家参考,具体如下: 一.日期转换为时间戳 public long getTimestamp() throws ParseException{ Date date1 = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss") .parse("2009/12/11 00:00:00"); Date date2 = new SimpleDateFormat(&quo
java实现ArrayList根据存储对象排序功能示例

本文实例讲述了java实现ArrayList根据存储对象排序功能.分享给大家供大家参考,具体如下: 与c++中的qsort的实现极为相似,构建新的比较对象Comparator即可 package demo; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; class Stu{ public int age; private String name; public Stu(
JS实现的判断方法、变量是否存在功能示例

本文实例讲述了JS实现的判断方法.变量是否存在功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ////www.jb51.net/article/67551.htm //判断变量i是否存

JS实现数组去重及数组内对象去重功能示例

相关推荐

随机推荐