如何通过ES6或Lodash对比对象slug属性变化并设置状态标记

需求：对比两个对象，只要featuredTitle数组中的任意slug出现新增、修改或删除，状态标记设为false；其他变化（如父级title、子级title修改但slug未变）或无变化时，状态标记设为true。

示例对象 #

对象1

{
    "id": "111111",
    "title": "ParentTitle1",
    "featuredTitle": [
        {
            "title": "ChildTitle1",
            "slug": "title1"
        },
        {
            "title": "ChildTitle2",
            "slug": "title2"
        },
        {
            "title": "ChildTitle3",
            "slug": "title3"
        },
        {
            "title": "ChildTitle4",
            "slug": "title4"
        },
        {
            "title": "ChildTitle5",
            "slug": "title5"
        }
    ]
}

对象2

{
    "id": "111111",
    "title": "ParentTitle2",
    "featuredTitle": [
        {
            "title": "ChildTitle1",
            "slug": "titlenew1"
        },
        {
            "title": "ChildTitlenew2",
            "slug": "title2"
        },
        {
            "title": "ChildTitle3",
            "slug": "title3"
        },
        {
            "title": "ChildTitle4",
            "slug": "title4"
        },
        {
            "title": "ChildTitle5",
            "slug": "title5"
        },
        {
            "title": "ChildTitle6",
            "slug": "title6"
        }
    ]
}

（示例中对象2新增了slug为title6的项，且原title1改为titlenew1，故状态标记应为false）

实现方案 #

1. ES6原生实现（无依赖） #

核心思路：提取两个对象的slug集合，通过Set对比元素是否完全一致（数量相同且元素无差异）。

function checkSlugStatus(obj1, obj2) {
    // 提取对象中所有slug并转为Set集合
    const getSlugSet = (obj) => new Set(obj.featuredTitle.map(item => item.slug));
    const slugSet1 = getSlugSet(obj1);
    const slugSet2 = getSlugSet(obj2);

    // 集合大小不同，说明有新增/删除
    if (slugSet1.size !== slugSet2.size) return false;

    // 遍历集合，检查每个slug是否在另一个集合中存在，不存在则说明有修改
    for (const slug of slugSet1) {
        if (!slugSet2.has(slug)) return false;
    }

    // 所有slug无变化
    return true;
}

// 测试示例
const obj1 = { /* 填入对象1内容 */ };
const obj2 = { /* 填入对象2内容 */ };
console.log(checkSlugStatus(obj1, obj2)); // 输出: false

2. Lodash实现（代码更简洁） #

利用Lodash的_.map提取slug数组，再通过_.difference判断两个数组是否无差异。

const _ = require('lodash');

function checkSlugStatus(obj1, obj2) {
    const slugs1 = _.map(obj1.featuredTitle, 'slug');
    const slugs2 = _.map(obj2.featuredTitle, 'slug');

    // 双向差集为空且数组长度相等，说明slug无新增、删除、修改
    return _.isEmpty(_.difference(slugs1, slugs2)) && _.isEmpty(_.difference(slugs2, slugs1));
}

// 测试示例
const obj1 = { /* 填入对象1内容 */ };
const obj2 = { /* 填入对象2内容 */ };
console.log(checkSlugStatus(obj1, obj2)); // 输出: false

方案对比 #

• ES6原生：无需额外依赖，代码逻辑清晰，适合前端轻量场景。
• Lodash：代码更简洁，_.difference等工具函数处理边界情况更稳定，适合已有Lodash依赖的项目。

内容的提问来源于stack exchange，提问作者keerti