精华内容
下载资源
问答
  • 主要介绍了JS实现的Object数组去重功能,可实现针对数组成员为Object对象的去重复功能,涉及javascript数组元素遍历、属性判断等相关操作技巧,需要的朋友可以参考下
  • js Object 数组去重

    千次阅读 2017-06-24 10:32:23
    * 在数组中去除重复项() */ var distinct_arr_element = function( arr ){ if( !arr ) return null ; var resultArr = []; $(arr).each( function( index, el ){ var notExist = true ; $(resul

    目标:实现成员为 Object 的数组的去重。

    注意,这里的数组成员为 Object,而不是数值或者字符串。

    调用方法:

    arr = distinct_arr_element(arr);

    函数:

    /*
     * 在数组中去除重复项()
     */
    var distinct_arr_element = function( arr ){
    
        if( !arr ) return null ;
    
        var resultArr = [];
    
        $(arr).each( function( index, el ){
            var notExist = true ;
            $(resultArr).each( function(i,element){
                if( isObjectValueEqual( el, element ) ){
                    notExist = false ;
                    return false ;
                }
            });
            if( notExist ) 
                resultArr.push( el );
        });
    
        return resultArr ;
    }
    
    /*
     * 判断两个 Object 的值是否相等
     */
    function isObjectValueEqual(a, b) {
        // Of course, we can do it use for in Create arrays of property names
        var aProps = Object.getOwnPropertyNames(a);
        var bProps = Object.getOwnPropertyNames(b);
    
        // If number of properties is different, objects are not equivalent
        if (aProps.length != bProps.length) {
            return false;
        }
    
        for ( var i = 0; i < aProps.length; i++ ) {
            var propName = aProps[i];
    
            // If values of same property are not equal, objects are not equivalent
            if (a[propName] !== b[propName]) {
                return false;
            }
        }
    
        // If we made it this far, objects are considered equivalent
        return true;
    }
    展开全文
  • ES6数组去重的三个简单办法

    万次阅读 多人点赞 2019-06-19 00:43:09
    ES6数组去重的三个简单办法 简单说一下利用ES6实现数组去重的三个办法。 第一种: 利用Map对象和数组的filter方法 贴上相关代码 打印后的结果 通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下...

    ES6数组去重的三个简单办法

    简单说一下利用ES6实现数组去重的三个办法。
    第一种: 利用Map对象和数组的filter方法

    贴上相关代码
    在这里插入图片描述
    打印后的结果
    在这里插入图片描述
    通过打印我们发现,确实实现了我们想要的效果。那么下面简单来解释一下。
    1.Map对象是ES6提供的一个新的数据结构,其中has的办法是返回一个布尔值,表示某个值是否存在当前的Mp对象之中,set的办法是给Map对象设置key/value。
    2.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
    所以说,Map对象结合filter方法可以达到数组去重的效果~

    第二种:利用Set对象和数组的Array.from方法

    同样贴上相关代码片段
    在这里插入图片描述
    打印运行后的结果
    在这里插入图片描述
    简单来说,第二种方法比第一种还简单。同样来简单解释一下。
    1.Set是ES6新提供的数据结构,类似于数组,但是本身没有重复值。
    2.Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
    所以set结合Array.from同样可以达到数组去重的效果。不过需要注意的是,主流浏览器像Chrome,Firfox,Opera,Safari,包括微软的Edge,都是支持的,但是唯独IE系列不支持。

    第三种:利用Set+扩展运算符 …

    第三种办法可以说是更简单
    贴上相关代码
    在这里插入图片描述
    打印后运行的结果
    在这里插入图片描述

    这就是利用ES6新特性达到数组去重的三种办法,这三种办法有个共同的好处就是代码简洁,对于undefined和NaN也同样可以达到去重的效果~~
    如果你有其他办法也欢迎一起分享一下~
    展开全文
  • 使用了, reduce去重,与fliter去重,和 es6 的set去重,同时再对于对象数组去重时, 如果使用object.keys(), 判断属性值为number 时, 出现的问题进行了解释 //reduce数组去重 var arr = [1, 2, 3, 4, 5, 6, 6, ...

                                               js 数组去重

     

    使用了, reduce去重,与fliter去重,和 es6 的set去重,同时再对于对象数组去重时, 如果使用object.keys(), 判断属性值为number 时, 出现的问题进行了解释

    //reduce数组去重
    var arr = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 213, 132, 123, 11, 11, 22, 2, 22, 23];
    var newArr = arr.reduce((cur, next) => {
      cur.indexOf(next) === -1 ? cur.push(next) : '';
      return cur;
    }, []);
    
    // reduce对象数组根据某一属性 去重
    var arrObj = [
      { h: '22' },
      { h: '33' },
      { h: '44' },
      { h: '33' },
      { h: 22 },
      { h: 22 }
    ];
    let obj = {};
    var newArrObj = arrObj.reduce((cur, next) => {
      Object.keys(obj).indexOf(next.h) !== -1
        ? ''
        : cur.push(next) && (obj[next.h] = true);
      return cur;
    }, []);
    /* 
    0: {h: "22"}
    1: {h: "33"}
    2: {h: "44"}
    3: {h: 22}
    4: {h: 22}
    */
    console.log(newArrObj);
    
    //filter 数组去重
    arr = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 213, 132, 123, 11, 11, 22, 2, 22, 23];
    newArr = arr.filter((element, index) => {
      return arr.indexOf(element) === index;
    });
    
    //filter 对象数组去重
    arrObj = [{ h: '22' }, { h: '33' }, { h: '44' }, { h: '33' }, { h: 22 }];
    obj = {};
    newArrObj = arrObj.filter((element, index) => {
      if (obj[element.h]) {
        return false;
      } else {
        obj[element.h] = true;
        return true;
      }
    });
    
    /* 
    0: {h: "22"}
    1: {h: "33"}
    2: {h: "44"}
    */
    console.log(newArrObj);
    
    /* 
      在reduce和fliter 过滤对象数组中 使用了两种判断方式, 第一个判断的是 keys数组, 第二个判断obj[xx.x] 可以看到返回结果是不一样的, 众所周知, js对象会把数字属性转换成字符串,那么为什么结果会不同?
    */
    let arrrrr = ['n', 'i', 'o', '1', 1, '2', 2];
    
    let heihei = {};
    let hehe = {};
    
    arrrrr.forEach(element => {
      heihei[element] = true;
      hehe[element] = false;
    });
    
    /* 
      这里打印出来可以发现 两个对象的key都是相同的属性, 
      那么,之所以在去重时不一样, 是由于 keys返回一个字符串数组, indexOf 使用的是全等判断,
      '1' !== 1 , 所以如果使用keys判断方式,数组中对象的值是多个相同的number类型, 那么去重就会有问题。 
    */
    console.log(Object.keys(heihei));
    console.log(Object.keys(hehe));
    
    //es6 set去重
    
    let arrNum = [1, 1, 1, 1, 12, 2, 2, 2, 23, 3, 3, 3];
    //[1, 12, 2, 23, 3]
    console.log([...new Set(arrNum)]);
    

     

    展开全文
  • JS数组去重,相信大多数前端朋友在面试过程中,遇到过。一般是要求手写或者大致讲一下思路。一旦被面试官问道,讲一下数组去重的方法?此时,我们如果可以回答10种或者7、8种,很有可能给我们的面试加分。 但是在...

    JS数组去重,相信大多数前端朋友在面试过程中,遇到过。一般是要求手写或者大致讲一下思路。一旦被面试官问道,讲一下数组去重的方法?此时,我们如果可以回答10种或者7、8种,很有可能给我们的面试加分。
    但是在项目中,基本上没有遇见过此类问题。日常项目组遇见的概率比较低,但为了每年的金三银四跳槽季,还是有必要掌握以下,以防面试的时候遇到此问题。
    下面是整理的数组去重方法,大致有10多种,希望看完能对屏幕前的人朋友们有所帮助。

    一、Es6 new Set() 与 … 扩展运算符 方法

     	var arr = [1,'1',true,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
        console.log([...new Set(arr )]); 
        // [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
        // 对象和函数没有去重
    

    可以看到new Set() 方法代码简洁,但是对象和函数不能去重,使用的时候需要注意一下。

    二、Es6 new Set() 方法

     	var arr = [1,'1',true,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
    	function unique (arr) {
    	  return Array.from(new Set(arr))
    	}
        console.log(unique(arr));
        // [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]  
        // 对象和函数没有去重
    

    三、Es6 Map数据结构数组去重

    	function unique_a(arr) {
    	        let map = new Map(),
    	            array = [];
    	        for (let i = 0, j = arr.length;i < j; i++){
    	            var item = arr[i]
    	            if(map.has(item)){ // 如果有该 key 值
    	                map.set(item, true)
    	            } else {
    	                map.set(arr[i], false); // 如果没有该key 值
    	                array.push(item)
    	            }
    	        }
    	        return array;
    	 }
    	 var arr = [1,'1',true,,undefined,null,{},NaN,function a(){},1,'1',true,undefined,null,{},NaN,function a(){}];
    	     console.log('map-unique_a', unique_a(arr)) 
    	     //  [1, "1", true, undefined, null, {…}, NaN, ƒ, {…}, ƒ]
    	     //  对象和函数没有去重
    

    四、利用对象的属性去重

    function unique_b(arr) {
            if (!Array.isArray(arr)) {
                console.log('数据类型有问题')
                return
            }
            var array = []
            var obj = {}
            for (var i = 0; i < arr.length; i++) {
                if (obj[arr[i]]) {
                    // obj[arr[i]]++;
                } else {
                    array.push(arr[i])
                    console.log(arr[i])
                    obj[arr[i]] = 1
                }
            }
            console.log(obj)
            return array
        }
    
      var arr = [1,'1',true,,'true',undefined,null,{},NaN,function a(){},1,'1',true,,'true',undefined,null,{},NaN,function a(){}];
       console.log('unique_b', unique_b(arr ));
         // [1, true, undefined, null, {…}, NaN, ƒ]
         // 函数和对象、NaN 去重了,但是字符串 'true'和 true,数组 1 和 字符串 ‘1’,只能保留一种,该方法有待改进。
    

    五、使用2层for循环嵌套,然后使用splice去重

    	let arr = [1, 1, 'true', 'true', function a() {}, function a() {}, true, true, false, false, null, null, undefined, undefined, NaN, NaN, 0, 0, 'a', 'a', {}, {}]
        function unique_c(arr) {
            for (let i = 0; i < arr.length; i++) {
                var item = arr[i]
                for (let j = i + 1; j < arr.length; j++) {
                    var subItem = arr[j]
                    // 这里判断条件首先是同一类型的数据进行比较,然后用 === 和 JSON.stringify方式比较
                    if (Object.prototype.toString.call(item) === Object.prototype.toString.call(subItem) &&
                      (item === subItem || JSON.stringify(item) === JSON.stringify(subItem))) {  
                        arr.splice(j, 1);//第一个等同于第二个,splice方法删除第二个
                        j--;
                    }
                }
            }
        }
        unique_c(arr);
        console.log(arr); 
        // [1, "true", ƒ, true, false, null, undefined, NaN, 0, "a", {…}] 
        // 此方法可以去除任意类型相同的数据
    

    此方法可以去除任意类型相同的数据

    六、indexOf 去重

       let arr1 = [1, 1, 'true', 'true', function a() {}, function a() {}, true, true, false, false, null, null, undefined, undefined, NaN, NaN, 0, 0, 'a', 'a', {}, {}]
        function unique_d(arr) {
            if (!Array.isArray(arr)) {
                console.log('params 参数错误')
                return
            }
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                var item = arr[i]
                if (newArr.indexOf(item) === -1) {
                    newArr.push(item)
                }
            }
            return newArr
        }
    
        console.log('unique_d', unique_d(arr1))
    	// [1, "true", ƒ, ƒ, true, false, null, undefined, NaN, NaN, 0, "a", {…}, {…}]
    	// 此函数对函数、NaN 、对象不能去重
    

    七、利用sort排序

    	var arr= [1, 2, 3, 1, 'false', true, NaN, null, function a(){},function a(){},undefined, { name: 1 }, 1, 2, 3, 1, 'false', true, NaN, null, undefined, { name: 1 }];
        function unique_e(arr) {
            if (!Array.isArray(arr)) {
                console.log('params 参数错误')
                return
            }
            arr = arr.sort();
            var newArr = [arr[0]];
            for (var i = 1, j = arr.length; i < j; i++) {
                var item = arr[i],
                  	prevItem = arr[i - 1]
                if (item !== prevItem) {
                    newArr.push(item)
                }
            }
            return newArr;
        }
        console.log('unique_e', unique_e(arr));
        // [1, 2, 3, NaN, NaN, {…}, {…}, "false", ƒ, ƒ, null, true, undefined]
    

    此方法不能对NaN 、对象、函数去重,改变一下判断条件即可实现全部类型去重。使用上面第种方法里面的判断条件即可。

    八、利用 ES6 includes

    	var arr= [1, 2, 3, 1, 'false', true, NaN, null, function a(){},function a(){},undefined, { name: 1 }, 1, 2, 3, 1, 'false', true, NaN, null, undefined, { name: 1 }]
    	function unique_f(arr) {
            if (!Array.isArray(arr)) {
                console.log('数据类型有问题')
                return
            }
            var newArray = []
            for (var i = 0, j = arr.length; i < j; i++) {
                var item = arr[i]
                if (!newArray.includes(item)) {
                    newArray.push(item)
                }
            }
            return newArray
        }
    
        console.log('unique_f', unique_f(list))
        // [1, 2, 3, NaN, {…}, {…}, "false", ƒ, ƒ, null, true, undefined]
    

    对象和函数不能实现去重,使用时需要注意。

    九、使用对象 hasOwnProperty 方法

    var arr =var arr = [function a(){},{nameaa:222},1,1,'true','true',true,true,15,15,function a(){}, function b(){alert(222)},false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{name:1},{name:222}];;
    	function unique_g(arr) {
    	    var obj = {};`在这里插入代码片`
    	    return arr.filter(function(item, index, arr){
    	        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    	    })
    	}
        console.log(unique(arr))
        // [ƒ, {…}, 1, "true", true, 15, ƒ, false, undefined, null, NaN, "NaN", 0, "a"]
    

    此方法对,只要数组里面包含对象就给去除掉,做不到准确去重。使用时注意一下。

    十、使用 filter 去重

    var arr = [1, 1, true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false, undefined, undefined, null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
     function unique_h(arr) {
         return arr.filter(function(item, index) {
            return arr.indexOf(item, 0) === index
        })
     }
    
    console.log('unique_h', unique_h(arr)) // 对象、函数没有去重
    

    十一、利用递归去重

    	var arr = [1, 1, undefined,undefined,true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false,   null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
    	function unique_i(arr) {
            var array = arr,
            	len = array.length
            array.sort(function(a, b) {   //排序后更加方便去重
                return a - b
            })
            function loop(index) {
                if (index >= 1) {
                    if (array[index] === array[index - 1]) {
                        array.splice(index, 1)
                    }
                    loop(index - 1)    //递归loop,然后数组去重
                }
            }
            loop(len - 1)
            return array;
        }
        console.log('unique_i', unique_i(arr));
        // [1, true, "true", ƒ, ƒ, ƒ, false, null, "", 0, 15, NaN, NaN, "NaN", "a", {…}, {…}, undefined]
    

    对函数、NaN、对象同样是没有去重,并且对 undefined 处理有异常。有时间在仔细研究一下。

    十二、使用 reduce+includes

    	var arr = [1, 1, undefined,undefined,true, true, 'true', 'true',function a(){},function b(){},,function a(){}, 15, 15, false, false,   null, null, '', '', NaN, NaN, 'NaN', 0, 0, 'a', 'a', { name: 1 }, { name: 1 }]
    	function unique_j(arr) {
             return arr.reduce((prev, current) => {
                 return prev.includes(current)?prev: [...prev, current]
            }, [])
         }
         console.log('unique_j',unique_j(arr )); 
         // [1, undefined, true, "true", ƒ, ƒ, ƒ, 15, false, null, "", NaN, "NaN", 0, "a", {…}, {…}]
    

    对函数、对象没有去重。

    以上就是整理的方法,有错误的地方还希望大家指出来,如果还有其他方法,请多多指教。

    展开全文
  • js代码-数组去重(Object)
  • 数组去重

    2018-08-09 22:50:21
    数组去重
  • JavaScript 数组去重

    2020-12-25 10:18:23
    数值数组去重 对象数组去重
  • 其实网上已经有很多js数组去重方法,但是我看了很多篇并自己通过代码验证,发现都有一些缺陷,于是在研究多篇代码之后,自己总结了9种方法,如果有哪里不对请及时纠正我哈~测试代码let arr1 = [3, 1, [1], 1, [1],...
  • js 数组去重

    2019-11-26 00:58:37
    数组去重
  • 数组去重及克隆

    2021-10-10 15:09:17
    一、数组去重 1.数组去重 2.数组去重合并 二、数组克隆 1.Array的扩展运算符 2.Array.from()方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例 3.Array.prototype.slice(),可用于数组的浅拷贝 ...
  • javascript数组去重总结

    2019-08-28 23:34:50
    javascript数组去重 前段时间项目里用过一些去重的方法,一般比较便捷的用new Set就可以了,当然这也是面试中常问的一个问题,常见方法大同小异,下面对以前整理过的内容,从性能方面再做一次rearrange references...
  • 数组去重常见方法 js

    2020-11-19 15:09:48
    数组去重 js,数组去重,去重,数组
  • 1 用字典的方法去重 方法1,用字典去重 dict1(I) = "" 方法2,用字典去重 + 统计次数 dict2(I) = dict2(I) + 1 方法3,用字典报重复,但没去重复 ...Dim dict1 As Object Set dict1 = CreateObject("sc...
  • JavaScript数组去重

    2018-12-17 13:13:34
    数组去重是一个经典的面试问题,这里记录一下自己的心得和常用的处理方法。 数字类型的数组去重&字符类型数组去重 对于数字类型数组 var arr = [1,2,3,4,3,2,1];去重或者对于字符类型数组 var arr = ['1','1','a...
  • let a1 = [1,2,3,2,3,undefined, NaN, new Object(), 8,8, new Date(), new Date(), new RegExp()] let a2 = [] console.time('time2') console.log([...new Set(a1)]) console.timeEnd('time2') function ...
  • js数组去重

    2019-03-18 09:09:00
    数组去重 今天要聊的,也是我以前笔试时碰到过的一个问题,数组去重,不知道现在的笔试题还考不考这个? 数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,975
精华内容 9,990
关键字:

object数组去重