简化select2 option group所需JSON结构的转换代码

问题背景 #

在使用Select2插件开发时，需要结合templateResult配置项实现选项分组（optgroup）效果。根据官方文档要求，必须传入符合指定结构的对象数组才能正常启用分组功能。
现有编写的转换代码输出结果完全符合格式要求，但整个转换逻辑拆分为字段映射、分组聚合、结构调整3个独立步骤，存在冗余遍历，实现方式较为繁琐。
测试用原始数据源（数据库返回结果集，赋值给变量x）及原有实现代码如下：

let x = [
    {id_cp: 1, nama: 'Bank BJB', jenis: 'TB', path_gambar: '/assets/images/partners/bjb.png'},
    {id_cp: 2, nama: 'Bank BJB Giro Payment', jenis: 'GI', path_gambar: '/assets/images/partners/bjb.png'},
    {id_cp: 3, nama: 'CR Kantor Pusat', jenis: 'TN', path_gambar: '/assets/images/partners/tunai.png'},
    {id_cp: 4, nama: 'Bank BSI', jenis: 'TB', path_gambar: '/assets/images/partners/bsi.png'},
    {id_cp: 5, nama: 'Bank BRI', jenis: 'TB', path_gambar: '/assets/images/partners/bri.png'},
    {id_cp: 6, nama: 'Dana', jenis: 'EW', path_gambar: '/assets/images/partners/dana.png'},
    {id_cp: 7, nama: 'GoPay', jenis: 'EW', path_gambar: '/assets/images/partners/gopay.png'},
    {id_cp: 8, nama: 'Bank BRI', jenis: 'QR', path_gambar: '/assets/images/partners/qris.png'}
];

function selectLabel(arr) {
    arr = arr.map(function (elments) {
        return {
            id: elments.id_cp,
            text: elments.nama,
            jenis: elments.jenis,
            path_gambar: elments.path_gambar
        };
    });

    const outputGrouped = Object.values(arr.reduce((accu, {jenis, ...rest}) => {
        if(!accu[jenis]) {
            accu[jenis] = {jenis, children: []};
        }
        accu[jenis].children.push(rest);
        return accu;
    }, {}));
    
    const transformed = outputGrouped.map(({ jenis, children }) => ({
        text: jenis,
        children: children
    }));

    return transformed;
}

console.log(selectLabel(x));

优化方案 #

核心优化点是把三步操作合并到单次遍历中完成，消除两次冗余的数组遍历：

• 字段重命名（id_cp映射为id、nama映射为text）直接在解构原始元素时处理，不需要单独执行一次map
• 分组聚合时直接生成Select2要求的{text: 分组标识, children: 子选项数组}结构，不需要聚合完成后再执行一次结构转换的map
• 去掉中间临时变量，直接返回聚合后的结果

简化后代码 #

function selectLabel(arr) {
  return Object.values(
    arr.reduce((acc, { id_cp: id, nama: text, jenis, path_gambar }) => {
      if (!acc[jenis]) acc[jenis] = { text: jenis, children: [] }
      acc[jenis].children.push({ id, text, path_gambar })
      return acc
    }, {})
  )
}

上述代码输出结果与原实现完全一致，仅对原数组做1次遍历，无中间冗余数组生成，逻辑更紧凑。

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