深扒JS三目运算符的潜力 解决if...else局部作用域问题

众所周知JavaScript是一个基于对象的语言，大家不要忘记另外一个层面，它是一门“函数式编程”语言。对的就是函数。很多从后台转过来的程序员(Java,C#等)对JS可谓深恶痛绝，我曾经就是其中一员。应为大家总想尝试像使用自己更熟悉的另一种语言一样来使用JS，然后发现JS并不像他们熟悉的那种语言。那是应为大家不了解JS函数的独特之处。

• 函数是第一类型对象

• 它门可以通过字面量进行创建

• 它们可以赋值给变量，数组货其他对象的属性

• 它们可以作为参数传递给其他函数

• 它们可以作为函数的返回值进行返回

• 它们可以拥有动态创建并赋值的属性

JavaScript中，函数拥有全部这些功能，也就是说可以像这门语言的其他对象一样使用。因此，我们说函数是第一型(first-class)对象。(此段文字摘抄于《JavaScript Ninja》第3.1章)

好了，言归正传，回到我们今天的主题。

第一个问题，JavaScript的作用域。对于前端开发者来说再熟悉不过，JS只为我们划分了 函数作用域 和 全局作用域。换句话说只要不是在函数中定义的就是全局作用域。下面我们来看一个例子

1 if(false){
 2   var a = 5;
 3 }else{
 4   var b = 8;
 5 }
 6 function fn(){
 7   var c = 10;
 8   console.log(c);
 9 }
10 console.log(a); //undefined
11 console.log(b); //8
12 fn(); //10
13 console.log(c); // Err : c is not defined

相信大家已经发现了这个问题。当if条件不满足时，JS引擎还是为我们申明了变量a。这里是引擎的预处理查找到关键字var将申明提升到了作用域顶部。由于if条件不满足导致赋值部分没有执行。这也证明了在JS中并没有"局部变量"这个说法，但是你可能会想说，es6不是有let吗？那么let在桌面端浏览器上是存在兼容问题的。所以也不适合在浏览器端使用。由于JS的函数具备 Immediately-Invoked Function Expression (IIFE) 特点。我发现了一个可以解决if...else局部变量的方法。

如果你不知道什么IIFE那么请先去了解立即执行函数后再来阅读本文。

首先请使用三目运算符(条件运算符)来代替你的if...else...

if(5>3){
   // do something
 }else{ 
   // do something
 }
 /*将以上代码修改为*/
 
 (5>3)?(function(){    
        //true
        //do something 
   })():(function(){
     //false
     //do something 
   })();

三目运算符后的两个表达式使用了IIFE的方式来处理，代替了if...else...的代码块，并且function封闭了作用域，还可以传参。是不是看起来非常棒呢？加上返回值还可以配合赋值操作。

随手写了一个小案例，无关事件，性能等问题。单纯探讨三目运算符。