JS实现lodash的get方法_使用js实现lodash的get函数-优快云博客

本文介绍了如何在JavaScript中处理嵌套对象调用时避免异常，提出了一种使用get函数的方法，通过将路径字符串转化为点运算符形式，提高代码的简洁性和容错性。同时，提到了ES2020的可选链式操作符（?.）在处理深层属性访问时的便利性，提供了测试用例来展示其实现和效果。

使用场景

在 js 中经常会出现嵌套调用这种情况，如 a.b.c.d.e，但是这么写很容易抛出异常。你需要这么写 a && a.b && a.b.c && a.b.c.d && a.b.c.d.e，但是显得有些啰嗦与冗长了。特别是在 graphql 中，这种嵌套调用更是难以避免。
这时就需要一个 get 函数，使用 get(a, 'b.c.d.e') 简单清晰，并且容错性提高了很多。

function get(source, path, defaultValue = undefined) {
    // a[3].b -> a.3.b -> [a,3,b]
    // path 中也可能是数组的路径，全部转化成 . 运算符并组成数组
    const paths = path.replace(/\[(\d+)\]/g, ".$1").split(".");
    console.log(paths) // ["a", "0", "b"]
    let result = source; //这个result一直都是for循环中下一个key的上个节点
    //循环字符串中的数组取最后一个
    for (const p of paths) {
        result = Object(result)[p];
        if (result == undefined) {
            return defaultValue;
        }
    }
    return result;
}
// 测试用例
console.log(get({ a: [{ b: 1 }] }, "a[0].b", 3)); // output: 1

或者使用ES2020的链式计算

const data = {
    a: {
        b: [1, 2, 3]
    }
};

console.log(data?.a?.b?.[0] ?? 20) //1
console.log(data?.a?.c?.[0] ?? 20) //20