一行神奇的javascript代碼

.[ ] ( )

字段訪問、數組索引、函數調用和表達式分組

++ -- - ~ ! delete new typeof void

一元運算符、返回數據類型、對象創建、未定義的值

                        * / %
                    </p>
                </td>
                <td>
                    <p>
                        相乘、相除、求余數
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        + - +
                    </p>
                </td>
                <td>
                    <p>
                        相加、相減、字符串串聯
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        << >> >>>
                    </p>
                </td>
                <td>
                    <p>
                        移位
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        < <= > >= instanceof
                    </p>
                </td>
                <td>
                    <p>
                        小于、小于或等于、大于、大于或等于、是否為特定類的實例
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        == != === !==
                    </p>
                </td>
                <td>
                    <p>
                        相等、不相等、全等，不全等
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        &
                    </p>
                </td>
                <td>
                    <p>
                        按位“與”
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        ^
                    </p>
                </td>
                <td>
                    <p>
                        按位“異或”
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        |
                    </p>
                </td>
                <td>
                    <p>
                        按位“或”
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        &&
                    </p>
                </td>
                <td>
                    <p>
                        邏輯“與”
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        ||
                    </p>
                </td>
                <td>
                    <p>
                        邏輯“或”
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        ?:
                    </p>
                </td>
                <td>
                    <p>
                        條件運算
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        = OP=
                    </p>
                </td>
                <td>
                    <p>
                        賦值、賦值運算（如 += 和 &=）
                    </p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>
                        ,
                    </p>
                </td>
                <td>
                    多個計算
                </td>
            </tr>
        </tbody>
    </table>
    <p>
        根據此規則，我們把這一串運算分為以下16個子表達式：
    </p>
    <div>
        <img src="https://simg.open-open.com/show/d2497e361f89824a62704de5a6e273cd.png" alt=" 一行神奇的javascript代碼 " width="712" height="312" /> 
    </div>
    <div>
        <div>
            <div>
                運算符用紅色標出，有一點可能大家會意識不到，其實中括號[]也是一個運算符，用來通過索引訪問數組項，另外也可以訪問字符串的子字符，有點類似charAt方法，如：'abcd'[1] // 返回'b'。而且中括號的優先級還是最高的哦。
            </div>
            <div>
                 
            </div>
            <div>
                預處理結束，接下來需要運用的就是javascript的類型轉化知識了。我們先說說什么情況下需要進行類型轉化。當操作符兩邊的操作數類型不一致或者不是基本類型（也叫原始類型）時，需要進行類型轉化。先按運算符來分一下類：
            </div>
            <div>
                <ul>
                    <li>
                        減號-，乘號*，肯定是進行數學運算，所以操作數需轉化為number類型。
                    </li>
                    <li>
                        加號+，可能是字符串拼接，也可能是數學運算，所以可能會轉化為number或string
                    </li>
                    <li>
                        一元運算，如+[]，只有一個操作數的，轉化為number類型
                    </li>
                </ul>
                <div>
                    <div>
                        <div>
                            下面來看一下轉化規則。
                        </div>
                    </div>
                    <div>
                        <div>
                            1. 對于非原始類型的，通過ToPrimitive() 將值轉換成原始類型：
                        </div>
                        <div>
                            ToPrimitive(input, PreferredType?)
                        </div>
                        <div>
                            可選參數PreferredType是Number或者是String。返回值為任何原始值.如果PreferredType是Number,執行順序如下：（參考：<a href="/misc/goto?guid=4959626577481001550" target="_blank">http://es5.github.io/#x9.1</a>）
                        </div>
                        <div>
                            如果input為primitive，返回
                        </div>
                        <div>
                            否則，input為Object。調用 obj.valueOf()。如果結果是primitive,返回。
                        </div>
                        <div>
                            否則，調用obj.toString(). 如果結果是primitive,返回
                        </div>
                        <div>
                            否則，拋出TypeError
                        </div>
                        <div>
                            如果 PreferredType是String，步驟2跟3互換，如果PreferredType沒有，Date實例被設置成String，其他都是Number
                        </div>
                        <div>
                             
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

2. 通過ToNumber()把值轉換成Number，直接看ECMA 9.3的表格http://es5.github.io/#x9.3

規則如下：

參數	結果
undefined	NaN
null	+0
boolean	true被轉換為1,false轉換為+0
number	無需轉換
string	由字符串解析為數字。例如，"324"被轉換為324

3. 通過ToString()把值轉化成字符串， 直接看ECMA 9.8的表格http://es5.github.io/#x9.8

規則如下：

參數	結果
undefined	"undefined"
null	"null"
boolean	"true" 或者 "false"
number	數字作為字符串。比如，"1.765"
string	無需轉換

</div>

規則就這么多，接下來實踐一下，根據我們上面劃分出的子表達式，一步一步將這個神奇的代碼給執行出來。開工~

先看最簡單的子表達式16：+[]

只有一個操作數[]，肯定是轉化 為number了，根據上面的規則2，[]是個數組，object類型，即對象。所以得先調用toPrimitive轉化為原始類型，并且 PreferredType為number，這個參數表示更“傾向于”轉化的類型，這里肯定是number了。然后首先調用數組的valueOf方法，數 組調用valueOf會返回自身，如下：

這個時候，我們得到一個空串“”，還沒有結束，看上面的規則2描述，繼續調用toNumber，轉化為number類型，如下：

</div>

大功告成！子表達式16轉化完畢，+[]，最終得到0。

 

來看子表達式15：[~+""]

空串""前面有兩個一元操作符，但是操作數還是只有一個，所以，最終要轉化為的類型是number。看規則2吧，空串調用toNumber得到0。接下來是~，這是個什么東東呢？它是位運算符，作用可以記為把數字取負然后減一，所以~0就是-1 。

別忘了，這個子表達式外頭還包著中括號，所以最終的值為[-1]，即一個數組，里面只有一個元素-1.

 

接下來看子表達式13就簡單了，把15、16求出來的填進去，就變成了這樣：--[-1][0]，取數組的第0個元素，然后自減，結果為-2，是不so easy!

 

繼續往上走，子表達式14： [~+[]]

其實把15、和16的原理用上就非常明顯了，答案[-1]

 

繼續來求子表達式9，此刻它已變成：-2*[-1]，有稍許不一樣，不過沒關系，我們還是按照規則來，運算符是乘號*，當然是做數學運算，那后面的[-1]就得轉化為number，與16的求法類似，過程如下：

①調用toPrimitive，發現是object類型

②調用valueOf，返回自身[-1]

③因為不是原始類型，繼續調用toString，返回"-1"

④"-1"是原始類型了，然后調用toNumber，返回-1

⑤與-2相乘，返回2

 

子表達式10：~~!+[]，不多說了，答案1. 就是從右往左依次一元計算。

 

有了9和10，我們來到了子表達式4，此刻它已經長這樣了：2+1， 好，我不多說了。

 

繼續 看表達式7：!(~+[])，~+[]=-1，這個根據上面已經知道了，那!-1是什么呢？這里要說一下這個感嘆號，它是邏輯取非的意思，會把表達式轉化 為布爾類型，轉化規則和js的Truthy和Falsy原則是一樣的，后面跟數字的，除0以外都為false，后面跟字符串的，除空串以外都為 false。這里的!-1當然就是false了。

 

接下來這個表達式3：false+{}有點關鍵。一個布爾加一個對象，那這個{}應該先轉化為原始類型，流程如下：

①調用toPrimitive，發現是object類型

②調用valueOf，返回自身{}，

③不是原始類型，調用toString，返回"[object Object]"

④false與"[object Object]"相加，false先轉化為字符串"false"

⑤相加得結果"false[object Object]"

 

知道了表達式3和4，我們就可以來看表達式1了，此時它是這樣的："false[object Object]"[3]，因為這個[]可以取字符串的子字符，像charAt一樣，所以得到了結果"s"

 

經過上面艱難的流程，我們拿到了字符"s"，也就是那張圖的左半邊，剩下的那個"b"，相同的原理可以搞出來，我這里就不一一演示了，留給你練練吧~

     

回顧一下這個過程其實也不復雜，只是有一些需要重復勞動的，只要你掌握了運算的優先級，能把大串分解成一個個小串，然后運用類型轉化的知識挨個處理就搞定了。怎么樣，看到這里你還覺得神奇嗎？

如果有人瞧不起js，請把這段代碼發給他，如果他想知道答案，請把本文發給他~

 

參考資料： http://www.heyria.com/index.php/2014/01/js-object-plus-object/

</div> </div> </div> </div> </div> </div> </div> </div> </div>
來自：http://www.cnblogs.com/lvdabao/p/4280518.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

 本文地址：http://www.baiduhome.net/lib/view/open1423493040982.html

JavaScript開發 JavaScript

相關經驗

• 一行神奇的javascript代碼
• 從一行代碼里面學點JavaScript
• 假如我是一行代碼
• Python一行代碼完成并行任務
• 神奇的CAReplicatorLayer

相關資訊

• 從一行CSS調試代碼中學到的JavaScript知識
• 揭秘史上最昂貴的一行 JavaScript 代碼
• 一行Python代碼完成并行任務
• 修改一行代碼提升 Postgres 性能 100 倍
• 修改一行代碼需要6天時間？

相關文檔

•  JavaScript常用代碼
•  Javascript 常用代碼大全
•  JavaScript 常用代碼
•  HTML5 神奇之旅
•  JavaScript 語法
•  javascript高級