JS 优雅的使用key深层次访问对象

486 阅读2分钟

需求:已知一个字符串“a.b.c”,判断option对象是否能够通过option.a.b.c访问到值

直接示例:

const options = {
    a:{
        b:{ 
            c:42 
        } 
    } 
};

const key = 'a.b.c';
const result = key.split('.').reduce(
(o, i) => {
    if (o) return o[i]; 
}, options);
console.log(result); // 输出 42

在这个例子中,我们有一个字符串 key 包含了点分隔的属性路径,我们想要从一个嵌套对象 options 中获取最终的属性值。具体地,我们要获取 options.a.b.c 的值。

  1. key.split('.'): 这一步将字符串 key 按照点('.')分隔成一个数组,得到 ['a', 'b', 'c']

  2. reduce((o, i) => {...}, options): 我们调用数组的 reduce 方法,开始对分隔后的数组进行迭代。传递给 reduce 的回调函数接受两个参数:oi

    • o:累积值,它是上一次回调函数的返回值或初始值 options
    • i:当前迭代的数组元素,即属性名。
  3. 第一次迭代:ooptionsi'a'。回调函数的执行如下:

    • o[i] 等于 options['a'],也就是获取了 options 对象中属性 'a' 对应的值,即一个嵌套的对象。
  4. 第二次迭代:o 为获取到的嵌套对象(options['a']),i'b'。回调函数的执行如下:

    • o[i] 等于 options['a']['b'],也就是获取了嵌套对象中属性 'b' 对应的值,即另一个嵌套的对象。
  5. 第三次迭代:o 为获取到的嵌套对象(options['a']['b']),i'c'。回调函数的执行如下:

    • o[i] 等于 options['a']['b']['c'],也就是获取了嵌套对象中属性 'c' 对应的值,即最终的结果值。
  6. 迭代结束:此时 reduce 方法的结果为 options['a']['b']['c'],也就是我们期望获取的值。

  7. console.log(result): 打印输出结果 42,表示我们成功地从嵌套对象 options 中获取了路径 'a.b.c' 对应的属性值。

所以,通过使用 split 方法将字符串 key 分隔成数组,并结合 reduce 方法进行迭代,我们可以在嵌套对象中获取深层次的属性值,从而实现类似 options.a.b.c 这样的属性路径访问。