如何将JSON对象的headings转为rows元素的键？求实现代码

嘿，这个需求其实挺常见的，不管用原生JavaScript还是Lodash都能轻松搞定，我给你两种实用方案：

原生JavaScript实现（无依赖） #

完全不用引入任何第三方库，用数组的map和reduce方法就能实现，代码简洁还容易理解：

const transformData = (originalData) => {
  // 解构出原数据里的表头和行数据
  const { headings, rows } = originalData;
  return {
    rows: rows.map(row => 
      // 遍历表头，把每个表头项和对应位置的行数据配对成键值对
      headings.reduce((resultObj, key, index) => {
        resultObj[key] = row[index];
        return resultObj;
      }, {}) // 初始值是一个空对象
    )
  };
};

用法示例 #

// 你的输入数据（注意把def改成字符串"def"避免语法错误）
const inputData = { 
  "headings": [ "col1", "col2", "col3", "col4" ],
  "rows": [
    [ { "a": "abc", "b": "def" }, "value1", "value2", "value3" ],
    [ { "a": "abc", "b": "def" }, "value1", "value2", "value3" ]
  ]
};

// 转换后得到目标结构
const outputData = transformData(inputData);
console.log(outputData);

Lodash实现（更简洁） #

其实你说没找到合适的Lodash方法，可能是没注意到_.zipObject！这个方法专门用来把两个数组（一个存键、一个存值）转换成键值对对象，结合_.map用起来超省心：

const transformWithLodash = (originalData) => {
  const { headings, rows } = originalData;
  return {
    rows: _.map(rows, row => _.zipObject(headings, row))
  };
};

用法示例 #

直接用上面的inputData调用这个函数，就能得到你想要的结果啦～

这两种方法的核心逻辑都是：遍历每一行数据，将表头数组里的每个元素作为键，对应位置的行数据元素作为值，最终组合成目标对象。

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