如何用Lodash将对象转换为二维数组？Angular项目场景

需求说明 #

原对象：

let myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

期望转换为按字段分组的二维数组：

[
  [
    {detail:"Paris", label:"internalValue"},
    {detail:"Nantes", label:"originalValue"},
    {detail:10, label:"score"}
  ],
  [
    {detail:"France", label:"internalValue"},
    {detail:"France", label:"originalValue"},
    {detail:100, label:"score"}
  ],
  [
    {detail:12345, label:"internalValue"},
    {detail:34567, label:"originalValue"},
    {detail:45, label:"score"}
  ]
]

原代码问题分析 #

你当前的Lodash实现存在几个关键问题：

• retValue和tempArr未初始化就调用push，会直接抛出TypeError
• 逻辑方向错误：没有按city/country/pinCode这些目标字段分组，而是逐个处理源对象的字段，导致结构不符合预期
• _.transform的回调参数顺序错误，且直接给result赋值的方式不符合该方法的使用逻辑

正确的Lodash实现方案 #

可以通过先提取目标字段，再按字段分组生成子数组的方式实现：

const myObject = {
  internalValue:{city:"Paris", country:"France", pinCode:12345}, 
  originalValue:{city:"Nantes", country:"France", pinCode:34567}, 
  score:{city:10, country:100, pinCode:45}
};

// 提取所有需要分组的字段（从第一个子对象中获取）
const targetFields = _.keys(_.head(_.values(myObject)));

// 按字段生成二维数组
const tableData = _.map(targetFields, field => {
  return _.map(myObject, (value, label) => ({
    detail: value[field],
    label: label
  }));
});

或者用链式调用简化代码：

const tableData = _(myObject)
  .values()
  .head()
  .keys()
  .map(field => 
    _.map(myObject, (val, label) => ({ detail: val[field], label }))
  )
  .value();

代码逻辑说明 #

1. 提取目标字段：通过_.values(myObject)获取所有子对象，再用_.head取第一个子对象，最后_.keys得到['city', 'country', 'pinCode']字段数组
2. 生成二维数组：遍历每个目标字段，对每个字段，再遍历原对象的每个键值对（internalValue/originalValue/score），生成包含detail（字段值）和label（源对象键名）的对象，最终组成对应字段的子数组
3. 最终得到的tableData就是完全符合需求的二维数组

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