访问同一对象多属性时，多次使用可选链运算符还是if语句更优？

API 探路者

2026-10-6

两种写法的对比与选择

1. 执行效率对比

你的判断是正确的，if块写法执行效率更高。
原因是可选链?.每次调用都会隐式执行一次object == null的存在性检查，你示例中3个属性就会触发3次重复检查，属性越多重复开销越大。而if块只在进入前做1次统一检查，块内的属性访问不需要额外的存在性校验，运行时开销更低。就算现代JS引擎会做一定的JIT优化，大部分场景下if块的性能表现依然优于多次可选链检查。

2. 可读性与写法推荐

首先要明确核心前提：两种写法的业务行为并不等价，选择前需要先对齐你的实际需求：

可选链写法：如果object为undefined，this.var1/this.var2/this.var3会被强制赋值为undefined，覆盖之前的旧值
if块写法：如果object为undefined，三个变量不会被赋值，会保留之前的旧值

分场景推荐写法如下：

场景1：需求为「仅当对象存在时更新变量，对象不存在时保留旧值」

优先选if块写法，这种场景下if块的表意反而更清晰，读者可以直观理解“只有对象有效时才执行后续赋值操作”，不存在可读性差的问题。如果属性较多还可以结合解构简化代码：

observable$.subscribe((object: SomeInterface | undefined) => {
    if (object) {
        const { prop1, prop2, prop3 } = object;
        Object.assign(this, { var1: prop1, var2: prop2, var3: prop3 });
    }
});

场景2：需求为「无论对象是否存在都要更新变量，对象不存在时变量设为undefined」

优先选可选链写法，写法更简洁，不需要额外写else分支手动赋值undefined，可读性更高。如果担心性能也可以用一次检查统一处理：

observable$.subscribe((object: SomeInterface | undefined) => {
    [this.var1, this.var2, this.var3] = object ? [object.prop1, object.prop2, object.prop3] : [undefined, undefined, undefined];
});