如何在原生JavaScript中基于数组构建对象属性访问器

你可以用原生JavaScript的Array.reduce方法来实现，这是最简洁且安全的方式：

方法一：使用reduce + 可选链（推荐） #

这种方法能自动处理路径不存在的情况，避免抛出错误：

const props = ["category", "category_name"];
const obj = {
  category: {
    category_name: "some name",
  }
};

const getNestedValue = (targetObj, pathArr) => {
  return pathArr.reduce((currentLayer, key) => {
    // 可选链?.确保中间层不存在时返回undefined，不会报错
    return currentLayer?.[key];
  }, targetObj);
};

// 调用示例
console.log(getNestedValue(obj, props)); // 输出: "some name"

方法二：递归实现（适合理解原理） #

如果想手动实现递归逻辑，也可以这么写：

const getNestedValueRecursive = (targetObj, pathArr) => {
  // 路径为空时返回当前对象
  if (pathArr.length === 0) return targetObj;
  // 解构出第一个路径项和剩余路径
  const [firstKey, ...restPath] = pathArr;
  // 如果当前层存在该属性，继续递归，否则返回undefined
  return targetObj?.[firstKey] ? getNestedValueRecursive(targetObj[firstKey], restPath) : undefined;
};

console.log(getNestedValueRecursive(obj, props)); // 输出: "some name"

简化版（无错误处理） #

如果能确保路径一定存在，可以用更短的写法，但路径不存在时会抛出TypeError，不推荐在生产环境用：

const getValueSimple = (targetObj, pathArr) => pathArr.reduce((curr, key) => curr[key], targetObj);

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