如何用JS将数组中同name属性的对象title值合并生成动态变量

实现方案 #

核心思路 #

先将原数组按name属性分组，收集同一name对应的所有title值，再将每组的title用|拼接后生成变量。

完整代码 #

// 1. 实际使用时把下方数组替换为你自己的数组a即可
const a = [
  { name: 'Size', title: 'M' },
  { name: 'Size', title: 'L' },
  { name: 'Size', title: 'XL' },
  { name: 'Size', title: '2XL' },
  { name: 'Size', title: '3XL' },
  { name: 'select your fit', title: 'Regular' },
  { name: 'select your fit', title: 'Extra Soft' },
  { name: 'select your fit', title: 'Premium' }
];

// 2. 按name属性分组，同时将name去除空格转换为合法变量名
const grouped = a.reduce((result, item) => {
  const varName = item.name.replace(/\s+/g, '');
  if (!result[varName]) {
    result[varName] = [];
  }
  result[varName].push(item.title);
  return result;
}, {});

// 3. 生成动态变量+输出预期格式
for (const [varName, titleList] of Object.entries(grouped)) {
  const value = titleList.join(' | ');
  // 挂载到window成为全局变量，可直接调用Size、selectyourfit等
  window[varName] = value;
  // 控制台打印你需要的输出格式
  console.log(`var ${varName} = ${value}`);
}

补充说明 #

• 你之前的代码问题在于仅比对了相邻元素的name，没有做同组title的收集和拼接逻辑，所以无法得到预期结果。
• 上述reduce实现的分组不依赖原数组的排序，就算同name的元素不连续也能正确分组，稳定性更高。
• 如果不想污染全局作用域，可以直接使用grouped对象取值，比如grouped.Size就能拿到拼接后的尺码值，还能避免变量名冲突问题。

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