Serenader

Learning by sharing.

JavaScript Trick (1)

1. 立即执行匿名函数

!function () {
    // code goes here
}();

+function () {
    // code goes here
}();

~function () {
    // code goes here
}();

分析

以上代码作用都是声明一个匿名函数,并且立即执行。最常见的立即执行匿名函数的写法是:

(function () {
    // code goes here
})();

先来解释一下这个常见的立即执行匿名函数的原理。

整个代码块其实可以这样分析:

(
    function () {

    }
)()

其实就是看成是两对括号,然后一个匿名函数放在第一对括号里面。当 JavaScript 解释器遇到一对括号 () 的时候会把里面的内容解释成一个表达式。于是乎,括号内的匿名函数就先被执行了。当解析完括号内的匿名函数之后又立即执行了后面的一对括号,相当于执行这个匿名函数。这就是立即执行匿名函数的原理。

然后再来看看最前面的那三个例子。

其实原理都是一样的,当 JavaScript 解释器解析到 !+~ 这些字符的时候,都会默认将后面的代码解析成一个表达式。于是便执行后面的匿名函数并且执行它。

相对于比较传统的立即执行匿名函数的写法,这三个算是比较 Trick 的写法有一个很明显的好处,就是每个立即执行函数可以节省一个字符。虽然这一个字符相对于一整个项目来说是一个很小的数目,但是当项目里面的匿名函数一旦多了起来的话,还是可以起到节约字符的目的的。而一旦节约了字符的话,JS 代码在网络传输所需的时间就会更少,页面载入速度就会更快。

2 类型转换(部分)

这里只讨论 字符串转化成为数字 的情况。

要将一个字符串转化成为一个数字,最常规的做法是:

parseInt('1'); // 1  
+'1'; // 1
-'1'; // -1
1*'1'; // 1  

除了以上比较常用的转换方法之外,JavaScript 里面还有一个很神奇的东西: ~

~'1'; // -2
~'0'; // -1
~'-1'; // 0
~'2'; // -3

由上我们可以得出一个规律,就是:

~'n' === -(n+1);

那么根据这个 Trick 我们可以这样转换字符串:

<del>'1'; // 1  
</del>'-1'; //-1  
~~'0'; //0

(Ghost 博客的 Markdown 解析器把两个 ~ 识别成 <del> 了。读者请注意)

总结

JavaScript 作为一门弱类型语言来说,其实有很多小技巧可以使用的。但是也因为 JavaScript 语言语法的不严谨,导致了新手学习 JavaScript 时经常会碰到各种奇奇怪怪、但是又能正常运行的代码。

所以说, JavaScript 这门语言的学习最重要的是经验的积累,以及不断的写代码。这样才能较好的掌握这门语言。

Comments is loading...

Comments is loading...