动态替换对象数组中的键名（键名数组动态变化）

输入数据 #

const columnNames = ['KEY_ID', 'SOURCE_ID', 'MTNAME', 'MTNO', 'PLANTS'];
const columnValues = [
  {col0:"719801", col1: "4198", col2: "010", col3: "200887", col4: "6LLA"},
  {col0:"719901", col1: "5198", col2: "011", col3: "207887", col4: "6PPA"}
];

期望输出 #

const outputArray = [
  {KEY_ID:"719801", SOURCE_ID: "4198", MTNAME: "010", MTNO: "200887", PLANTS: "6LLA"},
  {KEY_ID:"719901", SOURCE_ID: "5198", MTNAME: "011", MTNO: "207887", PLANTS: "6PPA"}
];

需求说明 #

columnNames的列名、columnValues中的对象数量都是动态变化的，需要一个通用方案完成映射。尝试用reduce实现时，要么迭代次数过多，要么无法适配动态列名，现有的尝试代码如下：

let renameKeys = (columnValues, object) =>
    Object.keys(object).reduce(
      (acc, key) => ({
        ...acc,
        ...{ [columnValues[key] || key]: object[key] },
      }),
      {});

 console.log(renameKeys(columnNames,columnValues))

解决方案 #

方案1：reduce + map 实现

const mapColumnValues = (names, values) => {
  // 遍历每个值对象
  return values.map(item => {
    // 用reduce将列名与对应col索引的值绑定
    return names.reduce((result, name, index) => {
      result[name] = item[`col${index}`];
      return result;
    }, {});
  });
};

// 调用示例
const outputArray = mapColumnValues(columnNames, columnValues);
console.log(outputArray);

方案2：Object.fromEntries 简化实现

const mapColumnValues = (names, values) => {
  return values.map(item => {
    // 生成键值对数组后直接转为对象
    return Object.fromEntries(
      names.map((name, index) => [name, item[`col${index}`]])
    );
  });
};

// 调用示例
const outputArray = mapColumnValues(columnNames, columnValues);
console.log(outputArray);

方案说明 #

• 两个方案都只需要两层迭代：外层遍历columnValues中的所有对象，内层根据columnNames的索引映射对应值，效率较高
• 完全适配动态变化的列名和任意数量的对象，不需要依赖固定的列结构
• 原代码的问题：参数顺序错误（把列名数组当成第一个参数），且没有处理columnValues是数组的情况，只实现了单个对象的键名修改

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