如何遍历对象内的数组并返回携带对应ID的数组元素键值对

实现思路 #

• 遍历原始对象集合，对每个对象的domains数组做二次遍历
• 每个domain可根据需求处理（比如示例中移除www.前缀）后，和当前对象的id组合成新对象
• 所有新对象合并为一个数组即为最终结果

JavaScript实现代码 #

// 原始数据示例
const originalData = [
  {
    id: '100',
    domains: [
      'www.abc.com',
      'www.def.com'
    ]
  },
  { id: '101', domains: [ 'ghi.com' ] },
  {
    id: '102',
    domains: [ 'www.jkl.com' ]
  }
];

// 转换逻辑，用flatMap直接实现数组扁平化
const result = originalData.flatMap(item => {
  return item.domains.map(domain => {
    // 移除域名开头的www.前缀，和示例输出对齐
    const url = domain.replace(/^www\./, '');
    return {
      id: item.id,
      url
    };
  });
});

console.log(result);

运行后输出结果：

[
  { id: '100', url: 'abc.com' },
  { id: '100', url: 'def.com' },
  { id: '101', url: 'ghi.com' },
  { id: '102', url: 'jkl.com' }
]

低版本兼容方案 #

如果运行环境不支持flatMap，可以用reduce实现相同效果：

const result = originalData.reduce((acc, item) => {
  const currentList = item.domains.map(domain => ({
    id: item.id,
    url: domain.replace(/^www\./, '')
  }));
  return acc.concat(currentList);
}, []);

注意事项 #

如果不需要去除域名的www.前缀，直接删除replace处理逻辑，将原始domain赋值给url字段即可。

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