译文：JavaScript hacks explained

JavaScript 黑魔法解密

有经验的开发人员大量的使用以下的JavaScript特殊技巧.对于初学者来说，大部分技巧的意图不是很明显。这些技巧使用了语言特点而不是直接用途。但是它产生的副作用是这些技巧的作用不能直接通过默认语言的意义来得到。以下是我列举的一些编辑后的技巧说明。

您必须明白一点.大部分这些技巧只是一些骇客的方式，对于您日常的开发并不是很重要。这篇文章的目的是阐明这些技巧的是怎样工作的，而不是强迫您使用它们。

使用 !! 将一个变量转换成布尔值

在JavaScript中任何值都可以被转换成真和假.也就是说当你把一个对象放到if表达式中。程序会自动选择结果为true的分支或者结果为假的分支。

0, false, "", null, undefined, NaN 默认会转换成false, 除此之外都为true.有时你可能将一个对象转换成原生的布尔值.那么可以通过2个取反操作得到!!

另一方面你可以代替 if (x == "test")这样的写法 通过 if (x). 假设 x 是空置 (因此会转换成false) 它会进入到else流程并执行.

讲一个字符串转换成一个数字通过 +str 方式

在JavaScript中+是一个一元操作符，其作用是返回操作数的数字表达式，如果不可操作，则返回NaN.有时你可能会接触到这样的强制转换代码（参考underscorejs源码）x === +x,它的作用只是仅仅检查x是否为整数。

这一条意图一点都不明显。通常的做法是使用 parseFloat 和 parseInt(x, 10) 转换成数字。

提供默认值通过使用 ||

在JavaScript中 || 是一个短路取值的榜样, 它同样用在其他的语言中. 这个操作符首先会对左边的表达式求值，然后判断左边的值，如果是false的话，那么会对右边的表达式求值，无论如何它将返回第一个非假的结果。考虑下面的代码

function setAge(age) {  this.age = age || 10 }setAge();

如果我们不传递age, 因此 age || 10 将会返回 10, 这是一种漂亮的方式提供一些默认的值。实际上它等价于下面的代码。

var x;if (age) {   this.age = age;} else {   this.age = 10;}

上面的模版明显的看起来更简洁，这就是你到处看到这种用法的原因了.

个人来说，我大量使用上面的语法。因为我喜欢它的简洁和清晰。请注意，由于 0 默认会转换成flase.所以你无法将age设置成0.因此通过以下解决方式可能是更好的解决方式（但是显得比较冗长）。

this.age = (typeof age !== "undefined") ? age : 10;

使用 void 0 代替 undefined

关键字 void 传入一个参数并且返回undefined. 为什么不单单使用 undefine 呢? 因为在一些浏览器中undefine只是一个变量并且可以被重新赋值，但是前者给了我们更安全的信任。尽管您在一些库中的源码中能看到这种方式的使用。但我还是建议在正式的编码中使用undefine ，这是因为在EC5兼容的浏览器中不允许重写 undefine

封装成为 (function() {...})() 这种模式

您打算将您的代码封装到一个匿名的函数中然后立即调用它, 当你想封装的时候. 在JavaScript中有两种级别的作用域（在ECMA6中新增块级作用域）: 全局作用域和函数作用域. 在全局作用域中的代码, 在任何地方都可以调用. 这包括变量和函数声明。 通常我们把大部分代码封装到一个函数里面然后把它暴露给全局变量使之称为唯一的接口。通过这样的模式使得获取更便利。考虑以下的代码:

(function() {  function div(a, b) {    return a / b;  }  function divBy5(x) {    return div(x, 5);  }  window.divBy5 = divBy5;})()div // => undefineddivBy5(10); // => 2

在文章中列举的骇客方式中，这一条是真正意义上无危害而且您可以在编程中使用避免暴露一些内部的逻辑给全局变量.

总结：我想对您的建议是写出对其他程序员简单和清晰的代码.任何语言提供的自然特性都优先于人造的。

这些文章列举的问题可以优雅的别解决通过ES6标准（JavaScript下一个版本）.例如，我们可以不要通过 age = age || 10 这种晦涩的方式赋予默认值在将来。由于ES6运行您通过更好的方式赋予默认值，代码如下所示：

function(age = 10) {   ...}

另一个例子是 (function() {...})() 模式, 可以放弃这种方在EC6模块被现代浏览器实现后.

帮助链接

如果您对Javascript的黑魔法很感兴趣，可以参阅以下的帮助连接：

• https://github.com/jed/140bytes/wiki/Byte-saving-techniques
• https://github.com/miguelmota/javascript-idiosyncrasies
• https://code.google.com/p/jslibs/wiki/JavascriptTips

原文链接：http://blog.mdnbar.com/javascript-common-tricks