工作中需要查看一些網站的JS語句，打心眼里對這種語法充滿了鄙夷，優雅跟它沒關系，一些爛寫法很難讀懂，簡直就是反人類，太變態了。

下面舉個小例子，因為篇幅原因，就復制了一小段，看看你能看懂多少？

(window.webpackJsonp = window.webpackJsonp || [

]).push([[36],

{

1161: function (e, t) {

//some codes

},

}]);

說實話乍一看到這種代碼我內心是抵觸的，一眼望去就是亂糟糟的，不知道它想表達什么。不過工作需要，也只能硬著頭皮往下捋。

看懂這些代碼語文要學好，分段很重要，在哪斷句是重點；眼神也得好，標點符號一個都不能少。于是乎，三個部分很快就被找出來。

第一部分：(window.webpackJsonp = window.webpackJsonp || [

])

第二部分：push([[36],

{.....}]);

第三部分：1161: function (e, t) {

(function (t) {

e.exports = t

}).call(this, {

})

},

第一部分

因為window.webpackJsonp=window.webpackJsonp的返回值就是window.webpackJsonp，所以可以化簡為：(window.webpackJsonp || [])，化簡后的代碼也不大容易看懂，但如果了解了js的語法，也就好理解了，其實等同于：

if (window.webpackJsonp)

//什么都不干

else

window.webpackJsonp = [];

說白了，第一部分的意思就是：如果window.webpackJsonp為空，就聲明window.webpackJsonp為一個數組變量；如果window.webpackJsonp不為空，那么表達式為window.webpackJsonp，執行第二部分。

第二部分

第一部分理解了，第二部分就容易了，就是push參數。繞了一個小彎的是[[36],{.....}]，乍一看push，應該是push(a, b)這種形式，但這里是第一層就只push了一個值，是一個二維數組；第二層才push了兩個值，第一個值是36，第二個值是一個對象。

第三部分

這里的難理解之處是1161: function，這是什么鬼？

正常的寫法都是 function xxx() 或 xxx: function()，純數字難道也能作為函數名嗎？正常js語法是不支持的呢。實驗是檢驗真理的唯一標準，管它怎么寫，運行一下就見分曉。

于是我做了調用測試：

alert(window.webpackJsonp[0][1].1161());

alert(window.webpackJsonp[0][1].1161);

發現這兩種方式是錯誤的，無法運行。難道是這個數字是作為變量的序號嗎？于是我嘗試：

alert(window.webpackJsonp[0][1][1161]);

結果彈出了函數聲明的對話框。于是更進一步：

alert(window.webpackJsonp[0][1][1161](null, null));

調用成功。

至此，難懂的JS代碼終于明白其含義了。

總結

或許這些代碼是前端開發故意為之，不讓其他用戶那么容易的理解其目的，其實前端代碼再怎么混淆加密都只是時間長短而已，重要的是后端，何必呢。