巧妙的JavaScript代码

最近接触了一些JS相关的框架组件，如JQuery等，了解了别人写的一些代码，自己也加以学习总结，觉得有些JS代码的写法真的是非常巧妙。现把一些总结的编码技巧记录如下，以作备忘：

技巧1：获取默认值：

var  v  =  arg  ||  defaultValue;

代码注解：“arg”为一个表达式。当“arg”为“undefined”或“null”时，转换为boolean类型为假，程序会继续计算表达式“defaultValue”的值，整个表达式的值将是“defaultValue”。当“arg”转换为boolean类型不为假时，便不会再计算“defaultValue”，整个表达式的值就是“arg”。

技巧2：获取有效整数值：

var  v  =  parseInt(arg)  ||   0 ;

代码注解：当arg能够正常解析为整数时，整个表达的值便是解析得到的整数值。若解析得到NaN（非数值）时，转换为boolean则得到false，因此整个表达式的值将为0。当然如果“arg”本身解析得到0的话，虽然转换为boolean也为false，但整个表达是仍然是为0的，无需担心。

技巧3：更“复杂”的默认值

var  v  =  (arg  ||  [])[ 0 ];

代码注解：表达式arg为一个数组，我们希望取得参数其某个元素。但是arg有可能为空，直接写arg[i]将会报错，怎么办？道理与上面的一样，arg为空时，我们就创建一个空数组（甚至可以是含有默认值的数组）来代替它！

技巧4：取多个表达式中第一个“有效”值或最后一个表达式的值

var  v  =  arg0  ||  arg1  ||  arg2  ||  arg3;

代码注解：总结前面几条技巧，可以发现，它们是利用了逻辑或运算符（||）一个非常巧妙的功能：由多个（||）运算符串联起来的表达式，其最终值为第一个“有效”表达式的值。这里所说的“有效”，是指转换为boolean类型得到true的表达式。所以如果你还需要0或false之类的值，这个办法就好像有些不太适用。但在实际情况当中，我们用到此技巧的场合多数是在判断变量是否有效，对象是否空引用，数值是否不为0等等，我想很少有连续去判断一连串boolean值的情况吧。

技巧5：当某一个表达式“有效”时，取得另一个表达式值

var  v  =  obj.method  &&  obj.method();

代码注解：这是一种见得较多的代码。这段代码的意思是，当obj存在名为“method”的方法时，则返回调用此方法得到的值。准确的解释应该是，当表达式“obj.method”转换为boolean为true时，返回表达式“obj.method()”的值；否则直接返回表达式“obj.method”的值。

技巧6：取多个表达式中第一个“无效”值或最后一个表达式的值

var  v  =  arg0  &&  arg1  &&  arg2  &&  arg4;

代码注解：此技巧刚好与技巧4对应。被逻辑与运算符（&&）串联起来的一系列表达式中，若发现了一个“无效”值的表达式，则会将此“无效”值返回，并不再计算后面的表达式；若串联的表达式全部“有效”的话，则返回最后一个“有效”值。这里的“无效”，也就是指转换为boolean类型会得到false。

技巧7：兼容IE和FF的事件处理函数

oElement.onclick  =   function (event) {
    event  =  event  ||  window.event;
    event.target  =  event.target  ||  event.srcElement;
};

//  更正！！
oElement.onclick  =   function (event) {
    event  =  event  ||  window.event;
     //  event.target = event.target || event.srcElement;
     //  上面这行代码有错误，在FF中event对象已经有target属性，其为只读
     //  改成下面这样：
     var  target  =  event.target  ||  event.srcElement;
     //  或：
    event.target  ||  (event.target  =  event.srcElement);
};

代码注解：在Internet Explorer(IE)和Firefox(FF)中，event对象的来源不同。FF中event是作为参数传进来的，而IE中event是window对象的一个属性。触发事件的源对象也不同，在FF中是“event.target”，在IE中是“event.srcElement”。上面的代码在FF中的执行情况如下：因为参数“event”有效，所以变量“event”所引用的对象仍然是参数“event”；因为表达式“event.target”有效，所以对象“event”的属性“target”值未变化。在IE中的执行情况如下：因为参数“event”无效，所以变量“event”被改为引用“window.event”；因为表达式“event.target”也无效，所以对象“event”被添加了一个属性“target”，并指向“event.srcElement”。经由上面的代码处理，接下来不管是在FF还是IE之中，都可以使用“event”来引用事件对象、“event.target”来引用事件触发源对象了。

技巧8：转换if语句为更加简洁的形式

if形式	简洁形式
if  (b) {     v  =  x; }	v  =  b  &&  x;
if  (b1  &&  b2  &&  b3) {     v  =  x; }	v  =  b1  &&  b2  &&  b3  &&  x;
if  (b1  ||  b2  ||  b3) {     v  =  x; }	v  =  (b1  ||  b2  ||  b3)  &&  x;
if  (b1) {     v  =  b1; }  else   if  (b2) {     v  =  b2; }  else  {     v  =  b3; }	v  =  b1  ||  b2  ||  b3;
if  (b1) {     v  =  x1; }  else   if  (b2) {     v  =  x2; }  else  {     v  =  x3; }	v  =  (b1  &&  x1)  ||  (b2  &&  x2)  ||  x3;

代码注解：其实就是对前面那些技巧的一个应用总结，这样一来，很多代码都可以改得清爽许多。当然，这种转换方法也不是万能的，视情况而用吧。再就是注意：前面提到的“无效”值并不是仅指“undefined”，“null、0、false、NaN”等都是“无效”值，它们转换为boolean值都是false，有些情况需要留意。