如何用JavaScript将二维数组重构为结构化对象数组

在前端数据处理场景中，二维数组和对象数组是两种常见的数据格式，二维数组往往以纯值的形式存储一组数据，而对象数组则通过键值对的方式让数据的字段含义更清晰，将二维数组重构为结构化对象数组是开发中非常实用的技能。

基础场景说明

假设我们有一个存储用户信息的二维数组，第一层是用户集合，第二层是用户的各个属性值，同时我们有一个字段映射数组，用来定义每个位置的值对应的字段名，结构如下：

// 二维数组，每行代表一个用户，依次是id、姓名、年龄、城市
const twoDimensionalArr = [
  [1, '张三', 25, '北京'],
  [2, '李四', 28, '上海'],
  [3, '王五', 22, '广州']
];

// 字段映射数组，和二维数组每行的元素位置一一对应
const fieldMap = ['id', 'name', 'age', 'city'];

我们的目标是将上述二维数组转换为如下结构的对象数组：

[
  { id: 1, name: '张三', age: 25, city: '北京' },
  { id: 2, name: '李四', age: 28, city: '上海' },
  { id: 3, name: '王五', age: 22, city: '广州' }
]

实现方式一：for循环遍历

这是最基础的实现方式，通过两层循环分别遍历二维数组和字段映射数组，逐个赋值生成对象。

function transformArrByFor(arr, fields) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    const obj = {};
    for (let j = 0; j < fields.length; j++) {
      // 将字段名和对应位置的值绑定到对象上
      obj[fields[j]] = arr[i][j];
    }
    result.push(obj);
  }
  return result;
}

const res1 = transformArrByFor(twoDimensionalArr, fieldMap);
console.log(res1);

实现方式二：使用map和reduce高阶函数

利用数组的map方法遍历二维数组的每一行，再用reduce方法遍历字段映射数组，生成对应的对象，代码更简洁。

function transformArrByMapReduce(arr, fields) {
  return arr.map(row => {
    // 使用reduce将字段和值组合成对象
    return fields.reduce((acc, field, index) => {
      acc[field] = row[index];
      return acc;
    }, {});
  });
}

const res2 = transformArrByMapReduce(twoDimensionalArr, fieldMap);
console.log(res2);

实现方式三：使用Object.fromEntries

ES2019引入的Object.fromEntries方法可以将键值对数组转换为对象，结合map方法可以快速实现重构。

function transformArrByFromEntries(arr, fields) {
  return arr.map(row => {
    // 生成[字段名, 值]的键值对数组，再转换为对象
    const entries = fields.map((field, index) => [field, row[index]]);
    return Object.fromEntries(entries);
  });
}

const res3 = transformArrByFromEntries(twoDimensionalArr, fieldMap);
console.log(res3);

边界情况处理

实际开发中二维数组的行长度可能和字段映射数组长度不一致，需要增加兼容处理：

function transformArrSafe(arr, fields) {
  return arr.map(row => {
    const obj = {};
    const loopLength = Math.min(row.length, fields.length);
    for (let i = 0; i < loopLength; i++) {
      obj[fields[i]] = row[i];
    }
    return obj;
  });
}

// 测试行长度不一致的场景
const testArr = [
  [1, '张三', 25],
  [2, '李四', 28, '上海', '额外字段']
];
const res4 = transformArrSafe(testArr, fieldMap);
console.log(res4);

方案对比

在实际开发中可以根据项目的运行环境和具体需求选择合适的实现方式，核心逻辑都是通过字段映射将二维数组的位置值关联到对应的对象属性上。

JavaScript二维数组对象数组数据转换数组重构修改时间：2026-07-02 12:09:32