JavaScript 数组对象去重

最新推荐文章于 2022-07-20 08:49:10 发布
最新推荐文章于 2022-07-20 08:49:10 发布
阅读量493 收藏 1
点赞数
分类专栏： 前端 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaochao123go/article/details/108824727
版权

实际开发中，总是会遇到数组对象去重的应用，以下示例是我在开发中使用的的删除的方法，仅供参考

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组去重</title>
</head>

<body>
    <script>
        const originalArray = [
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "银行总行",
                "LEVELUNIT": "1",
                "APP_ID": "62",
                "SUPERUNITID": "0000",
                "UNITSEQ": "500",
                "ID": "500",
                "UNITNAME": "银行总行",
                "UNITID": "500",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "银行总行",
                "LEVELUNIT": "1",
                "APP_ID": "62",
                "SUPERUNITID": "0000",
                "UNITSEQ": "500",
                "ID": "500",
                "UNITNAME": "银行总行",
                "UNITID": "500",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "北区分行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,002",
                "ID": "002",
                "UNITNAME": "北区分行",
                "UNITID": "002",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "东区分行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,003",
                "ID": "003",
                "UNITNAME": "东区分行",
                "UNITID": "003",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "南区分行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,004",
                "ID": "004",
                "UNITNAME": "南区分行",
                "UNITID": "004",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "南区分行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,004",
                "ID": "004",
                "UNITNAME": "南区分行",
                "UNITID": "004",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "北京分行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,005",
                "ID": "005",
                "UNITNAME": "北京分行",
                "UNITID": "005",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "天津分行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,006",
                "ID": "006",
                "UNITNAME": "天津分行",
                "UNITID": "006",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "海南银行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,100001",
                "ID": "100001",
                "UNITNAME": "海南银行",
                "UNITID": "100001",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "海南银行",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,100001",
                "ID": "100001",
                "UNITNAME": "海南银行",
                "UNITID": "100001",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "北京分公司",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,800",
                "ID": "800",
                "UNITNAME": "北京分公司",
                "UNITID": "800",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "上海分公司",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,900",
                "ID": "900",
                "UNITNAME": "上海分公司",
                "UNITID": "900",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "上海分公司",
                "LEVELUNIT": "2",
                "APP_ID": "62",
                "SUPERUNITID": "500",
                "UNITSEQ": "500,900",
                "ID": "900",
                "UNITNAME": "上海分公司",
                "UNITID": "900",
                "ISLEAF": false
            },
            {
                "INSTU_CDE": "0000",
                "ORG_NAME": "三亚分行",
                "LEVELUNIT": "3",
                "APP_ID": "62",
                "SUPERUNITID": "100001",
                "UNITSEQ": "500,100001,100002",
                "ID": "100002",
                "UNITNAME": "三亚分行",
                "UNITID": "100002",
                "ISLEAF": true
            }
        ]
        console.log('原始数组', originalArray.length, originalArray)
        // 输出为 -----------> 原始数组 14 [{"INSTU_CDE":"0000","ORG_NAME":"银行总行","LEVELUNIT":"1","APP_ID":"62","SUPERUNITID":"0000","UNITSEQ":"500","ID":"500","UNITNAME":"银行总行","UNITID":"500","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"银行总行","LEVELUNIT":"1","APP_ID":"62","SUPERUNITID":"0000","UNITSEQ":"500","ID":"500","UNITNAME":"银行总行","UNITID":"500","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,002","ID":"002","UNITNAME":"北区分行","UNITID":"002","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"东区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,003","ID":"003","UNITNAME":"东区分行","UNITID":"003","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"南区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,004","ID":"004","UNITNAME":"南区分行","UNITID":"004","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"南区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,004","ID":"004","UNITNAME":"南区分行","UNITID":"004","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,005","ID":"005","UNITNAME":"北京分行","UNITID":"005","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"天津分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,006","ID":"006","UNITNAME":"天津分行","UNITID":"006","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"海南银行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,100001","ID":"100001","UNITNAME":"海南银行","UNITID":"100001","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"海南银行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,100001","ID":"100001","UNITNAME":"海南银行","UNITID":"100001","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,800","ID":"800","UNITNAME":"北京分公司","UNITID":"800","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"上海分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,900","ID":"900","UNITNAME":"上海分公司","UNITID":"900","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"上海分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,900","ID":"900","UNITNAME":"上海分公司","UNITID":"900","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"三亚分行","LEVELUNIT":"3","APP_ID":"62","SUPERUNITID":"100001","UNITSEQ":"500,100001,100002","ID":"100002","UNITNAME":"三亚分行","UNITID":"100002","ISLEAF":true}]
        let resultArray = [];
        const arrayObj = {};
        resultArray = originalArray.reduce((item, next) => {
            arrayObj[next['ID']] ? '' : arrayObj[next['ID']] = true && item.push(next);
            return item;
        }, [])
        console.log('去重后的数组', resultArray.length, resultArray)
        // 输出为 -----------> 去重后的数组 10 [{"INSTU_CDE":"0000","ORG_NAME":"银行总行","LEVELUNIT":"1","APP_ID":"62","SUPERUNITID":"0000","UNITSEQ":"500","ID":"500","UNITNAME":"银行总行","UNITID":"500","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,002","ID":"002","UNITNAME":"北区分行","UNITID":"002","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"东区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,003","ID":"003","UNITNAME":"东区分行","UNITID":"003","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"南区分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,004","ID":"004","UNITNAME":"南区分行","UNITID":"004","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,005","ID":"005","UNITNAME":"北京分行","UNITID":"005","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"天津分行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,006","ID":"006","UNITNAME":"天津分行","UNITID":"006","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"海南银行","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,100001","ID":"100001","UNITNAME":"海南银行","UNITID":"100001","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"北京分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,800","ID":"800","UNITNAME":"北京分公司","UNITID":"800","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"上海分公司","LEVELUNIT":"2","APP_ID":"62","SUPERUNITID":"500","UNITSEQ":"500,900","ID":"900","UNITNAME":"上海分公司","UNITID":"900","ISLEAF":false},{"INSTU_CDE":"0000","ORG_NAME":"三亚分行","LEVELUNIT":"3","APP_ID":"62","SUPERUNITID":"100001","UNITSEQ":"500,100001,100002","ID":"100002","UNITNAME":"三亚分行","UNITID":"100002","ISLEAF":true}]

    </script>
</body>

</html>

可以直接复制运行代码，查看打印结果

QYDUAN
关注
专栏目录
数组去重以及数组对象去重方法总结
丑小鸭变黑天鹅的博客
05-09 6002
数组去重以及数组对象去重方法总结一、数组对象去重1、reduce方法2、利用原生js+空对象+空数组3、利用原生js+标志位+空数组4、利用双指针思想+splice方法二、数组去重1、利用新数组+标志位2、排序+新数组+相邻比较3、新对象+新数组4、新数组+indexOf5、新数组+includes6、新数组+filter+includes7、新数组+foreach+includes8、 双指针思想+splice9、新数组+lastIndexOf10、ES6的set 方法 一、数组对象去重 1、reduce
JavaScript 数组对象的去重
王维璋
01-19 150
JavaScript 数组对象的去重 JavaScript数组去重 1、原型去重法。通过prototype找到数组的源性对象Array，在数组的原型上添加unique()方法。需要使用的时候使用 点 “ . ” 进行连接。 　　优点：扩展性比较高，复用性比较高。 　　缺点：通过给数组对象扩展，新增方法，导致数组结构中有新增了一个方法。此时如果...
JavaScript 数组对象去重的几种方法
明天也要努力的博客
11-22 902
将要过滤的数据，将 arr 里面 city 重复的数据去掉（下面方法中用的arr都是这组数据） var arr = [ {id: 1,city: '南京'}, {id: 2,city: '南京'}, {id: 3,city: '杭州'}, {id: 4,city: '广州'} ]; 1. 对象法：数组的 reduce 方法 ie9以下不支持此方法 var obj = {}; var newArr = arr.reduce((prev,cur)=>{ obj[cur.city
js数组去重(含对象)
carfge的博客
05-09 478
难点：对象是无序的 关键：利用对象属性 核心：对象根据key排序后通过JSON.stringify转换，构造唯一的对象属性 function unique(arr){ var obj = {}; for(var i=0; i<arr.length; i++){ var item = arr[i]; var t = typeof(item); if(t === 'object'){ var o = sortO
Js数组对象去重的几种方法
hu104160112的博客
02-02 6114
arr: [ { id: 1, name: 'a' }, { id: 1, name: 'f' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }, { id: 3, name: 'g' }, { id: 4, name: 'd' }, { id: 5, name: 'e' }, ], 方法一：双重for循环 deweight() {
JS-Array对象-数组去重
weixin_45080761的博客
12-02 617
数组去重/数组排重 实现思路 1-遍历旧数组，获取旧数组元素 2-逐个将旧数组元素与新数组中元素相比较 3-比较时可遍历新数组，也可用数组的indexOf()方法实现 写法一：遍历新数组 var arr1 = [5, 4, 26, 9, 4, 8, 5, 14, 5, 3, 4]; var newArr1 = []; // 先遍历旧数组，把旧数组元素获取出来 for (var i in arr1) { // 将旧数组的元素，存入新数组 // 存入新数组之前，判断元素是否存在 fla
js代码-2个数组对象去重获取合并后的数组
07-15
以上就是处理两个数组对象去重并合并的几种常见方法。在实际开发中，选择哪种方法取决于数据规模、性能需求以及项目是否依赖特定的库。需要注意的是，对于包含复杂对象的数组，去重通常是基于某个或多个特定属性，...
js代码-数组 对象去重 （对象的所有属性相同才能认为相同）
07-14
以上就是针对JavaScript数组中对象去重的几种常见实现方式。每种方法都有其适用场景和优缺点，需要根据具体需求选择合适的方法。在实际开发中，考虑性能、兼容性和代码可读性等因素是非常重要的。
vue中对象数组去重的实现
10-15
在Vue项目中，我们经常需要处理对象数组的去重问题，尤其是当数组中存储的是对象时，不能直接使用JavaScript原生的`new Set()`方法去重，因为`new Set()`只适用于简单数据类型的元素，对于对象这样的复杂数据类型，...
js数组对象去重
weixin_43045869的博客
07-20 2万+
js数组对象去重
JavaScript 数组中对象去重方法
绿水青山的博客
03-29 2530
JavaScript 数组中对象去重方法： var array = [{id:1},{id:3},{id:3},{id:5},{id:5},{id:7},{id:9}]; var hash = {}; array = array.reduce(function (item, next) { hash[next.id] ? '' : hash[next.id] = true &amp;&...
javaScript对象数组去重（十种方法实现！）【算法】
Umbrella_Um的博客
10-22 2417
数组去重的方法（十种方法） 一、利用ES6 Set去重（ES6中最常用） 代码： let arr = [1,1,'数组','数组',false,false,undefined,undefined,null,null,NaN,NaN,{},{},[],[]] function unique(arr){ return Array.from(new Set(arr)) } console.log(un...
JS数组对象去重（4种方法）
qq_37493515的博客
07-06 3694
方法一：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
JS实现数组去重（重复的元素只保留一个）
weixin_30325487的博客
09-15 718
1.遍历数组法 它是最简单的数组去重方法（indexOf方法） 实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中； var arr=[2,8,5,0,5,2,6,7,2]; function unique1(arr){ var hash=[]; for (var i = 0; i < arr.length; i++...
js 两个数组（对象）去重合并
热门推荐
weixin_40805079的博客
12-06 5万+
项目前台代码中需要用到数组的去重操作，其实也不难，就算是对象数组，判断下对应的属性值也是可以实现的，但是如果我实现的话肯定是最常见的双重for循环，加个flag标记，老套的不能行了，想了想，还是上网找点高级点的操作吧。下面几个方法都是网上找的，链接如下： https://blog.csdn.net/NAMECZ/article/details/82220534 https://blog.csd...
JavaScript工具函数（一）
QYDUAN的博客
06-07 4万+
JavaScript工具函数1.匹配正整数2.匹配负整数3.匹配整数4.匹配非负浮点数5.匹配由 26 个英文字母组成的字符串6.匹配由 26 个英文字母的大写组成的字符串7.匹配由 26 个英文字母的小写组成的字符串8.匹配电子邮件地址9.返回数组中的最大值10.返回数组中的最小值11.将数组块划分为指定大小的较小数组12.从数组中移除 falsey 值13.计算数组中值的出现次数14.深拼合数组15.返回两个数组之间的差异16.返回数组的所有不同值17.返回数组中的每个第 n 个元素18.筛选出数组中的
JavaScript 文件流转 blob对象
QYDUAN的博客
09-08 8386
JavaScript 文件流转blob对象 项目中，很多时候会涉及到文件下载的场景，有的项目组是返回的是文件，直接下载即可，但有的项目返回的是文件流，需要前端进行二次处理，一下是我在实际项目中，涉及到文件流下载的方法，仅供参考 var paramData = {'params': '参数'}; var xhr = new XMLHttpRequest(); var url = 'https://ip:port'; // 例如： https://10.103.20.11/dynamicModel/expo
控制chrome中PDF预览工具栏
QYDUAN的博客
08-25 4833
在实际开发中，遇到使用chrome自带的PDF预览功能，前端把后台返回的地址，通过XMLHttpRequest转换成blob，并在blob地址后拼接上文件名称，通过创建embed展示PDF； 这种方法展示出来的PDF会带有工具栏，并且是在新的页签打开，没有 url，导致工具栏中的下载按钮无法进行操作，测试提出缺陷，下载按钮可以下载文件；最后开发决定隐藏该工具栏。 隐藏工具栏的方法是，在PDF文件url地址后面 拼接#scrollbars=0&toolbar=0&statusbar=0 .
JavaScript 数组对象删除某些元素
QYDUAN的博客
09-27 4045
实际开发中，总是会遇到数组对象中，删除指定的元素对象，以下示例是我在开发中使用的的删除的方法，进攻参考 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组对象删除元素对象&l.
js数组对象去重保证顺序
最新发布
06-01
JavaScript数组对象去重并保证顺序可以使用ES6中的Set对象和Array.from方法来实现。具体步骤如下： 1. 将原始数组转化为Set对象（Set对象中不允许有重复元素） 2. 将Set对象转化为数组（Array.from方法可以将Set...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值