JavaScript中两种三元表达式model赋值写法的区别是什么

首先明确JavaScript三元运算符的基础语法：判断条件 ? 条件成立时返回值 : 条件不成立时返回值，两段代码的核心差异在于真假两个分支的赋值逻辑完全不同。

第一段代码逻辑 #

model.setAsDefault = content.setAsDefault ? content.setAsDefault : 'selected';

• 首先判断content.setAsDefault是否为真值（即排除undefined/null/0/''/false/NaN之外的值）
• 真值分支：直接把content.setAsDefault本身的原始值赋值给目标变量
• 假值分支：兜底赋值为字符串'selected'
• 等价简写：model.setAsDefault = content.setAsDefault || 'selected'

第二段代码逻辑 #

model.setAsDefault = content.setAsDefault ? 'selected' : '';

• 同样以content.setAsDefault是否为真值作为判断条件
• 真值分支：不管content.setAsDefault本身是什么内容，只要判断为真，统一赋值为固定字符串'selected'
• 假值分支：兜底赋值为空字符串''

实际运行效果对比 #

举几个常见场景的运行结果差异：

核心差异总结 #

• 真值分支处理逻辑不同：第一段是保留原始值的兜底逻辑，适合需要优先保留用户传入值的场景；第二段是统一转换为固定值的判断逻辑，适合只需要区分"是否存在有效值"、不需要保留原始值的场景
• 假值分支兜底值不同：第一段兜底为'selected'，第二段兜底为空字符串

内容的提问来源于stack exchange，提问作者iamgoddey