如何基于两个对象构建指定键值结构的数组？

问题场景 #

现有两个对象，属性数量可能不同，示例如下：

const object1 = {
    prop1: 'data12',
    prop2: 'data13',
    prop3: 'data58',
    prop4: 'xyz'
    // 更多属性...
};

const object2 = {
    prop1: 123,
    prop2: 'email@gmail.com',
    prop3: 'text',
    prop4: 'bla'
    // 更多属性...
};

需要将它们转换为如下结构的数组：

[
  { data12: 123 },
  { data13: 'email@gmail.com' },
  { data58: 'text' },
  { xyz: 'bla' }
]

解决方案 #

以下是基于JavaScript的实现方案，分两种场景处理：

场景1：仅保留两个对象的共同属性

如果只需要处理两个对象都存在的属性，可以按以下步骤实现：

const object1 = {
    prop1: 'data12',
    prop2: 'data13',
    prop3: 'data58',
    prop4: 'xyz'
};

const object2 = {
    prop1: 123,
    prop2: 'email@gmail.com',
    prop3: 'text',
    prop4: 'bla'
};

// 筛选共同属性并转换为目标数组
const result = Object.keys(object1)
    .filter(key => key in object2)
    .map(key => ({ [object1[key]]: object2[key] }));

console.log(result);

代码说明：

1. Object.keys(object1) 获取第一个对象的所有属性名
2. filter(key => key in object2) 筛选出同时存在于第二个对象中的属性，避免处理不存在的属性导致值为undefined
3. map 遍历筛选后的属性名，利用对象动态键语法（方括号包裹），将object1的属性值作为新对象的键，object2的属性值作为对应的值

场景2：处理所有属性（包括仅存在于单个对象的属性）

如果需要处理两个对象的所有属性，包括仅在其中一个对象存在的属性，可以调整为以下代码：

const object1 = {
    prop1: 'data12',
    prop2: 'data13',
    prop5: 'extra'
};

const object2 = {
    prop1: 123,
    prop3: 'text',
    prop4: 'bla'
};

// 获取两个对象的所有属性键（去重）
const allKeys = [...new Set([...Object.keys(object1), ...Object.keys(object2)])];

// 转换为目标数组，处理属性缺失的情况
const result = allKeys.map(key => {
    // 若object1无该属性，用属性名本身作为键；若object2无该属性，值设为undefined
    const newKey = object1[key] ?? key;
    const newValue = object2[key] ?? undefined;
    return { [newKey]: newValue };
});

console.log(result);

代码说明：

1. 通过Set合并两个对象的属性键并去重，得到所有属性的集合
2. 遍历所有属性键，用空值合并运算符??处理属性缺失的情况，可根据需求自定义默认值（比如空字符串、null等）

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