如何将对象中指定键合并为新命名的单个键值对

原始输入对象 #

{
  MaxQty: 5,
  MinQty: 1,
  Start: '12/05/2021',
  End: '09/06/2021',
  Location: 'Singapore',
  Currency: 'USD',
  Category: 'Other'
}

期望渲染结果 #

Range: 1 - 5,
Date Range: 12/05/2021 To 09/06/2021,
Location: Singapore,
Currency: USD,
Category: Other

实现方案 #

直接遍历原始对象会导致合并字段重复渲染，最优方式是先转换对象结构，再进行渲染，具体步骤如下：

1. 转换对象结构 #

通过解构赋值提取需要合并的字段，剩余字段直接保留，再构建包含合并后字段的新对象：

const originalObj = {
  MaxQty: 5,
  MinQty: 1,
  Start: '12/05/2021',
  End: '09/06/2021',
  Location: 'Singapore',
  Currency: 'USD',
  Category: 'Other'
};

// 解构出需要合并的字段，剩余字段用rest运算符收集
const { MaxQty, MinQty, Start, End, ...restFields } = originalObj;

// 构建转换后的对象
const transformedObj = {
  Range: `${MinQty} - ${MaxQty}`,
  'Date Range': `${Start} To ${End}`,
  ...restFields
};

2. 渲染转换后的对象 #

遍历转换后的对象，生成目标格式的字符串：

const renderOutput = Object.entries(transformedObj)
  .map(([key, value]) => `${key}: ${value}`)
  .join(',\n');

console.log(renderOutput);

运行上述代码即可得到你想要的渲染结果，这种方式从根源避免了重复渲染问题，逻辑清晰且易于维护。

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