JavaScript中如何对JS对象应用JSON选择器实现动态取值与路径拼接

JS本身没有原生语法支持将['key_1']['arr']这类链式访问表达式直接存储为可拼接的变量，最贴近需求、简洁无冗余的实现方式是用路径片段数组存储每一级访问节点，完全匹配链式访问的结构逻辑。

核心逻辑 #

你提到的链式访问obj.key_1.arr[1].key_3，本质是依次按key_1→arr→1→key_3的顺序，逐层读取对象/数组的属性。我们可以把每一层的访问节点独立存为数组元素：

• 完整路径['key_1']['arr'][1]['key_3']对应数组结构['key_1', 'arr', 1, 'key_3']
• 这种数组结构天然支持原生的拼接能力，不需要额外解析，完全满足伪代码中s1 + s2的拼接需求

具体代码实现 #

// 定义原对象
var obj = {
    key_1: {
        arr: [
            999,
            {
                key_3: 5
            }
        ]
    },
    key_2: 'value_2'
};

// 对应伪代码中的s1 = ['key_1']['arr']路径片段
const s1 = ['key_1', 'arr'];
// 对应伪代码中的s2 = [1]['key_3']路径片段
const s2 = [1, 'key_3'];
// 路径拼接，完全对应s = s1 + s2的逻辑
const s = s1.concat(s2);

// 通用路径取值函数
function getValueByPath(target, path) {
  return path.reduce((currentVal, segment) => {
    // 顺着路径逐层读取，遇到不存在的节点直接返回undefined，避免抛错
    return currentVal?.[segment];
  }, target);
}

// 调用取值
const v = getValueByPath(obj, s);
// 验证结果
console.log(v === 5); // true

方案优势 #

• 无格式兼容问题：不管是对象的字符串属性名，还是数组的数字索引，都可以直接作为数组元素存储，不需要做类型转换
• 拼接零成本：数组原生的concat方法直接支持任意顺序的路径片段拼接，不会出现字符串路径的特殊字符转义问题
• 调用灵活：如果希望更贴近伪代码中obj[s]的调用形式，可以简单封装成绑定目标对象的工具函数，不需要每次传入目标对象参数

  // 封装单参数取值工具
  const createPicker = (target) => (path) => getValueByPath(target, path);
  const pickFromObj = createPicker(obj);
  // 直接传路径即可取值
  const v = pickFromObj(s); // 结果为5
  

内容的提问来源于stack exchange，提问作者but-why