JavaScript 语法问题

Question

var e = setTimeout(function() {
    
    var e = $(window).scrollTop(), 
        n = $(".header-nav-wrap"), 
        i = $(".header-nav-wrap-inner"), 
        s = $(".sub-nav");
    
    e > 200 ? n.hasClass("hn-fixed") || (n.addClass("hn-fixed"),
    s.hide(),
    a || i.css("top", "-80px").animate({
        top: "0px"
    }, 500)) : n.hasClass("hn-fixed") && (n.removeClass("hn-fixed"),
    s.show())
    
}, 30);

帮忙解释一下从 e > 200 ? ....... s.show()这段代码？？？

Answer 1

拉直：

e > 200 ? n.hasClass('hn-fixed') || (n.addClass('hn-fixed'), s.hide(),a || i.css('top', '-80px').animate({top: '0px'}, 500)) : n.hasClass('hn-fixed') && (n.removeClass('hn-fixed'),s.show());

强烈补充一下：一是逻辑运算符优先级比三元运算符高，二是三元运算符是从右向左运算的。
因此刚才的答案有些细节是错的。

相关链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

为了更便于分析，给代码加上括号或适当换行或许是个好方法。

(e > 200) ? 
    ((n.hasClass('hn-fixed') || (n.addClass('hn-fixed')),
        s.hide(),
        (a || i.css('top', '-80px').animate({top: '0px'}, 500))))
 : (n.hasClass('hn-fixed') && (n.removeClass('hn-fixed'),s.show()));

1 问号和冒号

拆分看一下，最外层其实是个三元运算符

e > 200 ? /*代码段1*/ : /*代码段2*/

即 e大于200 ，执行代码段1；否则执行代码段2。
相关资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

2 或

来看代码段1

n.hasClass('hn-fixed') || (n.addClass('hn-fixed'), s.hide(),a || i.css('top', '-80px').animate({top: '0px'}, 500)

最外层其实是

n.hasClass('hn-fixed') || /*代码段1A*/

简单来讲，就是n有class 'hn-fixed'吗？没有就执行代码段1A，有就跳过。

解释下：二元逻辑运算符

逻辑表达式的运算的顺序是从左到右，如果最左边的表达式会决定最终结果，那么右边就不执行了。

举例：

var a = 1;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
(a == 1) || (b = 1);
console.log(b);//b = 0 //因为(a == 1)决定了整个表达式的值，后面就不计算了
(a == 0) || (c = 1);
console.log(c);//c = 1 //因为(a == 0)决定不了整个表达式的值，会继续计算后面；
(a == 1) && (d = 1);
console.log(d);//d = 1;
(a == 0) && (e = 1);
console.log(e);//e = 0;

相关资料https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR

逗号

来看代码段1A

(n.addClass('hn-fixed'), s.hide(),a || i.css('top', '-80px').animate({top: '0px'}, 500)

中间那个逻辑或就不管了，这里其实就看

/*代码段1Aa*/, /*代码段1Ab*/, /*代码段1Ac*/

注意，这个代码段1Ac不是 a，而是a || i.css('top', '-80px').animate({top: '0px'}, 500)，由于逻辑或的优先级高，a和后面的animate动作被结合起来了
逗号操作符：逗号操作符允许在一个判断状态中有多个表达式去进行运算并且最后返回最后一个表达式的值。

这里其实就是顺序执行了三个代码段，并且把a || i.css('top', '-80px').animate({top: '0px'}, 500)的结果作为返回值传递给上层。

相关文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators#逗号操作符

---

补充：关于三元运算符的顺序

运算符的顺序在不同语言，顺序都不一样。另外这个顺序是多个平级运算时才存在的。
比如加法：
(A)+(B)+(C)
是先执行的A+B（假设和为sum1），后执行的sum1+C。
对于三元运算符，是这样的：

var a = 0;
var b = 0;
var c = 0;
var d = 0;

var rst = (a == 1) ? (b = 'b') : (a == 1) ? (c = 'c') : (d = 'd');
console.log(b);//0
console.log(c);//0
console.log(d);//d
console.log(rst);//d

是最先执行的后边的(a == 1) ? (c = 'c') : (d = 'd');，因为a不等于1，所以d='d'
之后计算(a == 1) ? (b = 'b') : 'd'，所以rst会被赋值d。

Answer 2

e > 200 ? a : b;

在这里等价于

if(e > 200) {
  a;
} else {
  b;
}

ECMAScript 条件运算符

Answer 3

相当于解释：

var a = b ? c : d;
var a = 0 || 1;

这个自己能找到答案吧

Answer 4

a？b：c三目运算符a是条件，true执行b,false执行c，你没看懂估计是代码结构太乱了。
两个n.haseClass后面是要执行的部分
是不是缺了点啥？

Answer 5

e > 200 ? (代码段A) : (代码段B);

if（e>200）{
    执行代码段A
}else{
    执行代码段B
}

再来说说 A||B，A为true,则B不执行，A为false,B执行
最后说说 A&&B, A为true,则B执行,A为false,则B不执行