JavaScript三元运算符进阶：从基础到高级技巧

JavaScript三元运算符基础

随着编码经验的积累，开发者往往倾向于使用三元运算符替代传统的if-else结构，旨在提升代码的简洁性与精炼度。尽管有人戏称这能带来某种愉悦感，但客观上，合理使用三元运算符确实能让逻辑判断更加紧凑。本文整理了一些在实际JavaScript开发中实用的三元运算符技巧，供读者参考。

基础部分较为简单，资深开发者可直接跳过，如有指正欢迎交流。

以下是基础知识回顾。

三元运算符的基本语法结构为：表达式1 ? 表达式2 : 表达式3

其执行逻辑为：若表达式1的计算结果为真（TRUE），则返回表达式2的值；若表达式1为假（FALSE），则返回表达式3的值。

============

基础应用场景

当代码中频繁出现if-else判断时，可以考虑使用三元运算符进行重构。

if(拜春哥 || 拜考试帝){
不挂科;
}else{
门门挂;
}

对应的三元运算符写法如下：

拜春哥 || 拜考试帝 ? 不挂科 : 门门挂

这种写法使得代码更加精炼，视觉效果上也更为整洁。

在日常开发中，特别是在处理多层嵌套判断时，使用三元运算符可以使代码结构更加清晰，易于阅读和维护。

三元运算符的高级应用技巧

进阶用法 通过灵活运用，三元运算符可以衍生出多种高级用法。例如在jQuery代码中：

flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;

$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

上述代码可能乍看之下令人困惑。当flag为true时，代码实际执行如下：

$('.item')['addClass']('hover')

这种写法在语义上等同于：

$('.item').addClass('hover')

进一步扩展

可以根据需求调用不同的函数来处理更复杂的逻辑。

function a(){
do something
}
function b(){
do something
}
flag ? a() : b();

综合应用案例

以下是一个具体案例：包含两个按钮，分别执行向前和向后的操作，功能相似但方向不同。

var action_turn = function(e, type){
var self = $(e).closest('li');
var target = self[type === 'prev' ? 'prev' : 'next']();
target.addClass('has-img');
self.removeClass('has-img')
    }
var btn_next = $('#item-photo-panel a.next')
 btn_next.click(function(){
 action_turn(this, 'next');
 return false;
 });
 var btn_prev = $('#item-photo-panel a.prev')
 btn_prev.click(function(){
 action_turn(this, 'prev');
 return false;
 });

alert( true ? 'true' : false ? 't' : 'f' )

建议尽量避免上述嵌套写法，因为在JavaScript中，三元运算符的结合方向是从右向左。因此，上述代码实际等同于：

alert( true ? 'true' : ( false ? 't' : 'f' ) )

需要注意的是，这与PHP中的行为不同，PHP中三元运算符在嵌套时优先处理左侧表达式。

echo (( true ? 'true' : false ) ? 't' : 'f' ) //php中

提示：

注意：三元运算符是一个语句，其求值结果是语句的执行结果，而非变量本身。这一点在通过引用返回变量的场景中尤为重要。例如，在PHP中，语句 return $var == 42 ? $a : $b; 无法通过引用返回变量，未来PHP版本可能会对此发出警告。

然而，经过测试发现，在JavaScript中上述做法是有效的。这可能是因为JavaScript的严谨性不如PHP严格。