如何将点分隔属性路径数组转换为多层级JavaScript嵌套对象

原有代码问题 #

你的代码只能生成二级嵌套的核心原因有三个：

• 没有沿着属性路径逐层向下追踪当前操作的嵌套对象，始终只在根对象的第一层属性上操作，自然无法生成更深层级
• 没有区分中间属性和末尾属性的赋值逻辑：中间层级的属性需要赋值为空对象用来承载下一级属性，只有最后一级属性才需要赋值为空字符串
• 逻辑分支存在覆盖问题，重复处理同一路径前缀时会清空已有的属性值

修复后的基础实现 #

const arr = [
  'car.name',
  'car.age',
  'car.event.id',
  'zz.yy.dd.aa',
  'aa.yy.zz.dd.kk'
];

function arrayToObject(arr) {
  const targetObject = {};
  for (const pathStr of arr) {
    const pathArr = pathStr.split('.');
    // 用current变量追踪当前操作的嵌套层级，初始指向根对象
    let current = targetObject;
    for (let i = 0; i < pathArr.length; i++) {
      const key = pathArr[i];
      // 判断是不是最后一级属性
      if (i === pathArr.length - 1) {
        current[key] = '';
      } else {
        // 如果当前key不存在，就初始化为空对象
        if (!current[key]) {
          current[key] = {};
        }
        // 把current指向当前层级的对象，进入下一级循环
        current = current[key];
      }
    }
  }
  return targetObject;
}

console.log(arrayToObject(arr));

更简洁的实现方式 #

可以用数组的reduce方法简化逐层遍历的逻辑：

const arr = [
  'car.name',
  'car.age',
  'car.event.id',
  'zz.yy.dd.aa',
  'aa.yy.zz.dd.kk'
];

const arrayToObject = arr => arr.reduce((root, pathStr) => {
  pathStr.split('.').reduce((current, key, index, arr) => 
    current[key] = index === arr.length - 1 ? '' : current[key] || {}
  , root);
  return root;
}, {});

console.log(arrayToObject(arr));

以上两种实现运行后都可以生成你需要的目标嵌套结构。

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