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

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

• 函数是第一类型对象

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

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

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

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

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

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

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

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

　　

if(false){
  var a = 5;
}else{
  var b = 8;
}
function fn(){
  var c = 10;
  console.log(c);
}
console.log(a); //undefined
console.log(b); //8
fn(); //10
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封闭了作用域，还可以传参。是不是看起来非常棒呢？加上返回值还可以配合赋值操作。

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