Javascript 对象数组取差集和交集的方法

前言

对象数组常会进行取交集或者差集的操作。
假设有对象数组A和对象数组B,常规方法是比较B对象数组与A对象数组的差异,进而找到其差集或者交集。
但是现在面临的问题是数组A 和数组B中的对象可能不完全一样的情况,可采用以下方法解决该问题。

对象数组的定义

我们把对象数组A定义为长数组,其中包含的对象属性包括了name, age, weight等三个属性;对象数组B定义为短数组,这里是指其元素个数小于数组A,其对象属性包括了name, age等2个属性。

let wideArray = [{name: "luojiarui", age: 18, weight: 78}, {name: "zhangqirui", age: 28, weight: 70}];
let shortArray = [{name: "zhangqirui", age: 28}];

如果我们进行取对象的交集,那么就首先需要将对象属性进行重新处理为一样的属性,再进行差异比较。

最终的差集是:

finalArray = [{name: "luojiarui", age: 18, weight: 78}]

最终的交集是:

finalArray = [{name: "zhangqirui", age: 28, weight: 70}]

找出对象中的特定的属性

对象中特定属性的查找可以采用遍历对象的方法,我们这里采用reduce
首先我们看官方案例中计算,数组里所有值的和。这里采用累计器和当前值不断累积,最终计算出整个数组的和。注意在reduce的第二个参数中可以给出累加器的初始值,这里代码给出的是0。

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// 和为 6

也可以写成箭头函数的形式:

var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);

这里,我封装了一个函数,名叫pick。其用途是找出对象中指定的属性,且属性是必须包含。

function pick(obj, arr) {
  // 参考网络上关于对象属性查找的方法,但是其没有指定必须包含该属性。
  // return arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {});
  // 如果你打算提供一个初始值作为reduce()方法的第二个参数
  return arr.reduce((iter, val) => {
     if(val in obj) {
        iter[val] = obj[val];
      }else {
        iter = {}
      }
      return iter;
        }, {});
}

应用示例:

var object = { name: "ljr", age: 23, weight: 68};
var newObject = pick(object, ["name", "age"]); // 从对象中取到name和age属性。
// output: { name: "ljr", age: 23};

var newObject1 = pick(object, ["name", "price"]); // 从对象中取到name和price 属性。
// output : {}; // 由于对象中不存在price属性,因此返回值是空对象。

关于reduce的更多介绍可以查阅mdn。

Reduce() 方法讲解: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

差集和交集的计算

接下来通过遍历长数组元素,找出差集和交集。这里采用了很方便的一种比较方式,那就是使用indexOf。
但是该方法主要是应用于简单类型的数组或者字符串中,不能比较对象数组。
因此将对象数组转换为字符串进行比较。字符串比较的前提是,在前文中已经将对象数组进行重整,每个数组元素的属性已经是一致的。
indexOf 的原理是查找被查元素的索引,如果不能查到该元素则返回-1,如果能找到则返回该元素的索引值。

// 遍历长对象数组,同时取到两个对象数组的差集,交集
var substractedArray = [], intersectionArray = []; // 差集, 交集
wideArray.forEach( value => {
    // 等于-1 表示 不存在,大于-1 表示存在
    if(JSON.stringify(pickedShortArray)
    .indexOf(JSON.stringify(pick(value,focusKeys))) == -1) {
        substractedArray.push(value)
    }else {
        intersectionArray.push(value)
    }
})

最终将查到的对象放入差集和交集数组中。

应用

默认传入参数为长对象数组,短对象数组,指定对象属性数组,差集或者交集方法。
默认对象属性数组为空,默认为差集方法。
对象属性数组可以通过wideArray[0].keys传入。

let wideArray = [{name: "luojiarui", age: 18, weight: 78}, {name: "zhangqirui", age: 28, weight: 70}];
let shortArray = [{name: "zhangqirui", age: 28}];
var a = arrayFilter(wideArray, shortArray, [ "name", "age"], "substract");
console.log(a);
var b = arrayFilter(wideArray, shortArray, shortArray[0].keys, "intersect");
console.log(b);

附录

如下是源代码,感兴趣的同学可以拷贝进行测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>对象数组的交集并集</div>
    <script>
        let wideArray = [{name: "luojiarui", age: 18, weight: 78}, {name: "zhangqirui", age: 28, weight: 70}];
        let shortArray = [{name: "zhangqirui", age: 28}];
        var a = arrayFilter(wideArray, shortArray, [ "name", "age"], "substract");
        console.log(a);

        /**
         * @desription 
         * @param 
         * @param
         * @author 罗佳瑞
         * @since 2021年10月18日
         * */
        function arrayFilter(wideArray, shortArray, focusKeys=[], method="substract"){
            if(!Array.isArray(wideArray) || !Array.isArray(shortArray) || 
            !Array.isArray(focusKeys) || focusKeys.length === 0 || method === "") {
                return {
                    state: false,
                    info: "Param is error!",
                    result: []
                }
            }
            // 判断传入的对象数组长度,如果两者长度不符合要求,那么进行交换
            if(wideArray.length < shortArray.length ) {
                var tempArray = wideArray;
                wideArray = shortArray;
                shortArray = tempArray;
            }
            // 定义返回参数
            var finalArray = {
                state: true,
                info: method + "ing array successfully!",
                result: []
            };
            // 对短数组进行遍历挑选,找到符合要求的对象属性
            var pickedShortArray = [];
            shortArray.forEach(element => {
                var pickedObject = pick(element, focusKeys)
                if(pickedObject != {}) pickedShortArray.push(pickedObject);
            })
            if(pickedShortArray.length == 0 ) return finalArray;

            // 遍历长对象数组,同时取到两个对象数组的差集,交集
            var substractedArray = [], intersectionArray = []; // 差集, 交集
            wideArray.forEach( value => {
                // 等于-1 表示 不存在,大于-1 表示存在
                if(JSON.stringify(pickedShortArray)
                .indexOf(JSON.stringify(pick(value,focusKeys))) == -1) {
                    substractedArray.push(value)
                }else {
                    intersectionArray.push(value)
                }
            })

            switch (method) {
                case "substract": 
                    finalArray.result = substractedArray;
                    break;
                case "intersect":
                    finalArray.result = intersectionArray;
                    break
                default:
                    finalArray.state = false;
                    finalArray.info = "method is error";
            }
            return finalArray;
        }
        function pick(obj, arr) {
            // return arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {});
            // 如果你打算提供一个初始值作为reduce()方法的第二个参数
            return arr.reduce((iter, val) => {
                if(val in obj) {
                    iter[val] = obj[val];
                }else {
                    iter = {}
                }
                return iter;
                }, {});
        }
    </script>
</body>
</html>

如果您觉得上面的内容对您有帮助欢迎点赞、评论、转发!
更多内容请查阅作者博客:https://jiaruiblog.com
或者star作者github: https://github.com/Jarrettluo?tab=repositories

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容