Angular中如何将对象数组值映射到相同键以简化迭代

问题背景 #

我有如下对象：

const product = {
  name: 'watch',
  color: ['brown', 'white']
}

期望将其扁平化为如下格式：

name: 'watch'
color: 'brown'
color: 'white'

目前我使用嵌套for循环迭代该对象，希望通过预先扁平化对象来避免内层循环。我的tsconfig.json目标为es2015(es6)，lib包含es2017(es8)和es2018(es9)，不支持es10及以上特性。

最终需要将键值对按productkey${index}=${key}_productval${index}=${val}格式推入data数组，得到：

productkey0=name_productval0=watch,
productkey1=color_productval1=brown,
productkey2=color_productval2=white,

如何简化现有嵌套循环的实现方式？

解决方案 #

实现思路 #

先将对象转换为扁平化的键值对数组，再对该数组进行映射生成目标格式，全程避免嵌套循环。利用ES2015及ES2017支持的API完成操作，完全符合环境限制。

代码实现 #

const product = {
  name: 'watch',
  color: ['brown', 'white']
};

// 生成扁平化的键值对数组
const flattenedPairs = Object.entries(product).reduce((result, [key, value]) => {
  // 统一处理单值和数组值，将单值包装为数组
  const values = Array.isArray(value) ? value : [value];
  // 拼接当前键对应的所有键值对
  return result.concat(values.map(val => ({ key, val })));
}, [] as { key: string; val: string }[]);

// 转换为目标格式的数组
const data = flattenedPairs.map(({ key, val }, index) => 
  `productkey${index}=${key}_productval${index}=${val}`
);

// 输出结果（验证用）
console.log(data.join(',\n'));

代码说明 #

1. 扁平化处理：
   • 用Object.entries（ES2017支持）将对象转为[key, value]形式的数组，替代手动遍历对象键名。
   • 通过reduce累加结果，对每个值判断是否为数组：是则保留原数组，否则包装为单元素数组，确保后续处理逻辑统一。
   • 用map生成单个键值对对象，再通过concat合并到结果数组，全程无嵌套循环。
2. 格式转换：
   • 对扁平化后的数组使用map遍历，结合元素索引，直接生成符合要求的字符串格式，一步得到最终的data数组。

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