zoukankan      html  css  js  c++  java
  • JS数组对象去重(4种方法)

    问题:数组对象去重

    var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4}, {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
    对数组对象name进行去重处理, 结果显示为:
    [{name: 'a',id: 1}, {name: 'b',id: 3}, {name: 'c',id: 4}, {name: 'd',id: 7}];
    方法一:es5冒泡排序法,去重arr
    var arr = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
     {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
    function deWeight() {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = i + 1; j < arr.length; j++) {
                if (arr[i].name == arr[j].name) {
                    arr.splice(j, 1);
                    //因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
                    j--;
                }
            }
        }
        return arr;
    }
    var newArr = deWeight();
    console.log('%c%s', 'color:red;', '方法一:es5,newArr', newArr);
    方法二:es5新建数据双重循环,去重arr2
    var arr2 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
     {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
    var temp = [];
    function deWeightTwo() {
        arr2.forEach(function(a) {
            var check = temp.every(function(b) {
                return a.name !== b.name;
            })
            check ? temp.push(a) : ''
        })
        return temp;
    }
    var newArr2 = deWeightTwo();
    console.log('%c%s', 'color:red;', '方法二:es5,newArr2', newArr2);
    方法三:es6的Map(),去重arr3
    var arr3 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
     {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
    let deWeightThree = () => {
        let name = 'name';
        let map = new Map();
        for (let item of arr3) {
            if (!map.has(item.name)) {
                map.set(item.name, item);
            }
        }
        return [...map.values()];
    }
    let newArr3 = deWeightThree();
    console.log('%c%s', 'color:red;', '方法三:es6,newArr3', newArr3);
    方法四:es5,对象法去重arr4
    var arr4 = [{name: 'a',id: 1}, {name: 'a',id: 2}, {name: 'b',id: 3}, {name: 'c',id: 4},
     {name: 'c',id: 6}, {name: 'b',id: 6}, {name: 'd',id: 7}];
    // array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    // (function(必选初始值或计算结束返回值, 必选当前元素, 可选索引, 可选原数组),可选函数初始值)
    var obj = {};
    function deWeightFour() {
        arr4 = arr4.reduce(function(a, b) {
            obj[b.name] ? '' : obj[b.name] = true && a.push(b);
            return a;
        }, [])
        return arr4;
    }
    var newArr4 = deWeightFour();
    console.log('%c%s', 'color:red;', '方法四:es5,newArr4', newArr4);
  • 相关阅读:
    hadoop系列二:HDFS文件系统的命令及JAVA客户端API
    hadoop系列一:hadoop集群安装
    解决tomcat下面部署多个项目log4j的日志输出会集中输出到一个项目中的问题
    HandlerMethodArgumentResolver数据绑定无效
    MyBatis 元素类型为 "configuration" 的内容必须匹配 ".....
    jquery.uploadify 异常 “__flash__removeCallback”未定义
    fusioncharts图例(legend)属性
    Flex Error #2156问题
    HTML注释引起的问题
    Asp.net Mvc4 使用Cas单点登录
  • 原文地址:https://www.cnblogs.com/mike-mei/p/13123810.html
Copyright © 2011-2022 走看看