如何在JavaScript中按指定深度访问对象属性？

JavaScript 没有内置的直接按指定深度访问这类层级嵌套对象值的方法，不过除了你提到的递归实现，还有几种实用的思路：

1. 迭代循环实现 #

用循环替代递归，避免递归在极深层级下可能出现的栈溢出问题，逻辑和递归类似但更可控：

function getValueByDepth(obj, targetDepth) {
  let currentObj = obj;
  for (let i = 0; i < targetDepth; i++) {
    if (!currentObj?.level) {
      throw new Error('目标深度超出对象实际层级');
    }
    currentObj = currentObj.level;
  }
  return currentObj.value;
}

// 测试示例对象
const nestedObj = {
  "level": {
    "value": "one",
    "level": {
      "value": "two",
      "level": {
        "value": "three",
        "level": {
          "value": "four",
          "level": {
            "value": "five"
          }
        }
      }
    }
  }
};

console.log(getValueByDepth(nestedObj, 3)); // 输出 "three"

2. 利用数组 reduce 方法实现 #

把目标深度转换成重复的路径数组，通过reduce逐层遍历对象，写法更偏向函数式风格：

function getValueByDepth(obj, targetDepth) {
  const path = Array(targetDepth).fill('level');
  const result = path.reduce((current, key) => {
    if (!current?.[key]) {
      throw new Error('目标深度超出对象实际层级');
    }
    return current[key];
  }, obj);
  return result.value;
}

// 测试
console.log(getValueByDepth(nestedObj, 5)); // 输出 "five"

3. 动态路径拼接（谨慎使用） #

可以通过拼接属性访问路径结合eval实现，但eval存在安全风险，仅在完全可信的环境下使用：

function getValueByDepth(obj, targetDepth) {
  try {
    const path = Array(targetDepth).map(() => 'level').join('.');
    return eval(`obj.${path}.value`);
  } catch (e) {
    throw new Error('目标深度超出对象实际层级');
  }
}

// 测试
console.log(getValueByDepth(nestedObj, 2)); // 输出 "two"

各方法对比 #

• 迭代循环：性能最优，无栈溢出风险，逻辑直观，适合大多数场景。
• reduce实现：代码简洁，函数式风格，可读性较好。
• eval方式：写法简单但安全隐患大，不推荐在生产环境使用。

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