运算符的优先级和结合性

今天接了一个项目的产品,用的技术栈是React,JSX不支持if-else,代码里写满了三目运算符。简单一点的a ? b : c, 复杂一点的a ? b : d ? e : f ? g : h ? i : j,再复杂一点的……

return (  
  <div>
    { condition1
      ? <Component1 />
      : ( condition2
        ? <Component2 />
        : ( condition3
          ? <Component3 />
          : <Component 4 />
        )
      )
    }
  </div>
)

看到这样的代码,我会心一笑,这是要考验我的语言功底吗?虽然我的自信心满满的,但还是觉得有必要再温习下运算符优先级和结合性。


运算符优先级和结合性

运算符优先级和结合性


举例1

举个三元运算符例子,能够更好理解:

  const a = 1 ? 2 : 3 ? 4 : 5
  console.log(a)

正确结果是2,相当于

  const a = (1 ? 2 : (3 ? 4 : 5))

如果是从左到右,const a = ((1 ? 2 : 3) ? 4 : 5),就是错误结果4。


举例2

还有一个经典的例子就是以前考试经常考到的:

  const func = (a) => {
    console.log(a); 
    return a;
  }
  const c1 = (func(1), func(2), func(3))
  console.log(c1)

结果是1 2 3 3

先输出1 2 3。但是逗号表达式的值为最后一个表达式的值,所以后输出3


举例3

在把第1个例子和第2个例子升级一下,互相结合,变成:

  const func = (a) => {
    console.log(a); 
    return a;
  }
  const e = func(1) ? func(2) : func(3) ? func(4) : func(5)
  console.log(e)

结果是1 2 2


如何更清晰地表达

虽然这几个规则很简单,只要稍加记忆一下即可。但是做项目的过程中,多人开发是不能避免的,难免遇到不留神的时候。为了能让队友快速的理解逻辑,最好做以下几点:

  • 通过换行来清晰展示。特别是有的一行写不下的加减乘除逻辑,做拆分或换行。
  • 通过()来注明结合顺序。常见的就是三元运算符。
  • 选择最合适条件语句。

相关链接

麻凯倩

微信:makaiqian,请备注来源“博客”并介绍自己。

总访问量: 总访客数: 备案号:浙ICP备15036547号-1