JavaScript：修正含嵌套数组的对象转换为目标对象的代码问题

问题描述 #

我有一个包含数组的数组的对象，示例如下：

const objArray = { 
  hh: [['a','b'],['c','d']],
  jj: [['x','y'],['z','w']]
};

期望将其转换为如下结构的对象：

const convertedObject = { 
  hh: [ {id:'a', name:'b'}, {id:'c', name:'d'} ], 
  jj: [ {id:'x', name:'y'}, {id:'z', name:'w'} ] 
};

我编写了两个函数来实现，但输出结果不符合预期，代码如下：

function convertToObjects(arr) { 
  return Object.values(arr).map(e => { 
    return { id: e[0], name: e[1] }; 
  }); 
} 
function convertChoicesToObjects(choicesArray) { 
  return Object.keys(choicesArray).map((key) => (convertToObjects(choicesArray[key]))); 
} 
const convertedObject = convertChoicesToObjects(objArray);

当前函数输出为：

{ 
  0: [ {id:'a', name:'b'}, {id:'c', name:'d'} ], 
  1: [ {id:'x', name:'y'}, {id:'z', name:'w'} ] 
}

请帮忙修正代码以得到期望的结果。

问题分析 #

你当前的convertChoicesToObjects函数用了Object.keys().map()，但map()返回的是数组，当你把这个数组赋值给变量时，JavaScript会自动把数组的索引（0、1）作为对象的键名，这就是为什么你没能保留原对象的hh、jj这些键。

另外，原convertToObjects函数里的Object.values(arr)是多余的——因为传入的arr已经是hh或jj对应的二维数组（比如[['a','b'],['c','d']]），直接对这个数组用map遍历子数组即可，不需要额外用Object.values处理。

修正后的代码 #

我们需要构建一个新对象，把转换后的数组对应到原对象的键上，这里给你两种简洁的实现方式：

方案一：使用reduce构建新对象 #

reduce可以高效地遍历原对象的键值对并构建目标对象：

function convertToObjects(arr) { 
  // 直接遍历子数组，生成目标格式的对象
  return arr.map(e => ({ id: e[0], name: e[1] })); 
} 

function convertChoicesToObjects(choicesArray) { 
  // 用Object.entries获取键值对，reduce构建结果对象
  return Object.entries(choicesArray).reduce((result, [key, value]) => {
    result[key] = convertToObjects(value);
    return result;
  }, {}); // 初始值为空对象
} 

const objArray = { 
  hh: [['a','b'],['c','d']],
  jj: [['x','y'],['z','w']]
};

const convertedObject = convertChoicesToObjects(objArray);
console.log(convertedObject);

方案二：使用for...in循环 #

如果你觉得reduce不太好理解，用for...in循环会更直观：

function convertToObjects(arr) { 
  return arr.map(e => ({ id: e[0], name: e[1] })); 
} 

function convertChoicesToObjects(choicesArray) { 
  const result = {};
  // 遍历原对象的所有键
  for (const key in choicesArray) {
    // 确保只处理对象自身的属性（避免遍历原型链属性）
    if (choicesArray.hasOwnProperty(key)) {
      result[key] = convertToObjects(choicesArray[key]);
    }
  }
  return result;
} 

const objArray = { 
  hh: [['a','b'],['c','d']],
  jj: [['x','y'],['z','w']]
};

const convertedObject = convertChoicesToObjects(objArray);
console.log(convertedObject);

现在运行修正后的代码，就能得到你期望的convertedObject结构啦！

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