通过匹配部分值合并两个对象数组答案

【问题标题】：Merge two object arrays by matching partial value通过匹配部分值合并两个对象数组
【发布时间】：2021-11-03 12:29:45
【问题描述】：

我有两个数组对象，如下所示：

person: {
    0: {
        firstName: John
        lastName: Doe
        avatar: https://sitename.com/filename.jpg
    },
    etc..
}

image: {
    0: {
        Key: filename.jpg
        files: {
            srcSet: 'filename.jpg 256w'
        }
    }
}

我的目标是通过avatar 中的值与Key 中的值匹配对象，并在匹配后将数组的对象合并到一个新的数组结构中，如下所示：

person: {
    0: {
        firstName: John
        lastName: Doe
        avatar: https://sitename.com/filename.jpg
        Key: filename.jpg
        files: {
            srcSet: 'filename.jpg 256w'
        }
    },
    etc..
}

我的直觉告诉我某种.filter 和.map 链接到过滤器可以帮助创建新的对象数组，但是，我不确定如何匹配 partial 值。 p>

【问题讨论】：

您没有任何数组。对象中有对象。
您没有任何数组，并且属性 firstname 和 lastname 无效，我猜您的意思是使用字符串文字“john”和“doe”？而且您缺少逗号来分隔每个属性

标签： javascript arrays reactjs object

【解决方案1】：

你不能在对象上使用 map，但是你可以使用 Object.values(object) 来获取它的值

const person = {
    0: {
        firstName: "John",
        lastName: "Doe",
        avatar: "https://sitename.com/filename.jpg"
    },
}
const image = {
    0: {
        Key: "filename.jpg",
        files: {
            srcSet: 'filename.jpg 256w'
        }
    }
}

const getPersonImageKey = (person) => {
  return person.avatar.split("/").at(-1);
}

const mergedObjs = Object.values(person).map(person => {
  const relatedImage = Object.values(image).find(image => image.Key === getPersonImageKey(person));
  return {...person, ...relatedImage};
})

const finalObj = {};
mergedObjs.forEach((obj, idx) => finalObj[idx] = obj); 

console.log(finalObj);

【讨论】：

【解决方案2】：

你可以通过在Object.values(yourobject)上调用Array.prototype.map()来做这样的事情

在原始对象的值上调用 map 后，您可以检查第二个对象中是否存在具有相同键的元素，如果它确实使用扩展运算符创建具有组合属性的新结果对象，然后返回它

const person = {
    0: {
        firstName: "John",
        lastName: "Doe",
        avatar: "https://sitename.com/filename.jpg"
    },
}
const image = {
    0: {
        Key: "filename.jpg",
        files: {
            srcSet: 'filename.jpg 256w'
        }
    }
}

const imageKey = (avatar) => {
    const arr = avatar.split('/');
    return arr[arr.length - 1];
}

const val = Object.values(person).map(v => {
    const found = Object.values(image).find(x => x.Key == imageKey(v.avatar));
    if (found) 
        return {...v, ...found };
    else 
        return {...v}
})

console.log(val);

【讨论】：