当前位置：首页 > news >正文

使用原生javascript手动实现一个可选链运算符

news 来源：原创 2025/5/7 15:45:18

前言

在ES2020标准里面有一个可选链运算符，比如一个obj={}; 如果直接使用obj.a.b就会在控制台报错，而使用obj?.a?.b的返回结果为undefined并且不会报错；这是因为如果引用是空值（null 或 undefined），它不会导致错误，而是使表达式短路并返回 undefined。

问题

最近遇到一个面试题，要求实现可选链运算符的效果并且如果返回值为null或者undefined要支持用默认值代替，示例代码如下：

// 示例：
// obj: 传入的对象
// path: 传入字符串
// defaultValue: 默认值
function getNestedProp(obj, path, defaultValue) {}const o = {a: {b: {c: 10,},d: [{e: true,},],f: null,},
};console.log(getNestedProp(o, "a.b.c")); // 10
console.log(getNestedProp(o, "a.d.0.e")); // true
console.log(getNestedProp(o, "a.d[0].e")); // false
console.log(getNestedProp(o, "a.c.b")); // undefined
console.log(getNestedProp(o, "a.c.b", 1)); // 1
console.log(getNestedProp(o, "a.f.e", 1)); // 1

解决方案

1.首先要将字符串path转化成数组

2.然后遍历数组，把数组中的每一项和obj进行匹配，如果是null 或 undefined, 则返回defaultValue;

3.如果不是null 或 undefined, 我们就需要最新赋值的对象跟数组的下一个索引项重新来匹配；

具体代码如下：

function getNestedProp(obj, path, defaultValue) {const keys = path.split(".");let current = obj;for (const key of keys) {if (current === null || current === undefined) {return defaultValue;}current = current[key];}return current;
}const o = {a: {b: {c: 10,},d: [{e: true,},],f: null,},
};console.log(getNestedProp(o, "a.b.c")); // 10
console.log(getNestedProp(o, "a.d.0.e")); // true
console.log(getNestedProp(o, "a.d[0].e")); // false
console.log(getNestedProp(o, "a.c.b")); // undefined
console.log(getNestedProp(o, "a.c.b", 1)); // 1
console.log(getNestedProp(o, "a.f.e", 1)); // 1