因為球是圓的，所以不論發生什麼都有可能，對這點我是深信不疑的，但最近我總是在懷疑，JavaScript也是圓的！
什麼是“黑話”
黑話，本指舊時江湖幫會人物的暗語、暗號，往往見於小說，後指流行於某一特殊行業中，非局外人所能瞭解的語言。而本文涉及到的“黑話”，其實是一些利用語言的特徵使用的一些不常見的奇淫技巧，JavaScript的語法是十分簡單靈活的，在專案中建議大家遵從ESLint規範編寫可維護性的程式碼，各路神仙們也應該進行自我約束，畢竟“黑話”也並不全是什麼好的東西，如果很多話可以直接講，何必拐彎抹角的去說呢？
“算術”
算術中的位運算已被作者列為禁術，因此希望你在工程中使用位運算時，請確保你有充足的理由使用，並在需要時寫好Hack註釋。
!與!!
!為邏輯非操作符，可以應用於ECMAScript中的任何值，無論這個值是什麼型別，它會被強制轉化為一個布林值變數，再對其值取反。
!!只是單純的將運算元執行兩次邏輯非，它能將任意型別的值轉化為相應的布林值，它包含的步驟為：
- 將一個值轉化為布林值；
- 將其取反；
- 再次取反。
假設你需要通過一個布林型變數表示是否有id值，以下寫法推薦你使用最後一種方式來進行轉化：
const enable1 = !!id；
const enable2 = id ? true : false;
const enable3 = Boolean(id);
複製程式碼~ 與 ~~
~表示按位取反，~5的執行步驟為：
- 轉為一個位元組的二進位制表示：00000101，
- 按位取反：11111010
- 取其反碼：10000101
- 取其補碼：10000110
- 轉化為十進位制：-6
~~它代表雙非按位取反運算子，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，對於正數，它向下取整；對於負數，向上取整；非數字取值為0，它具體的表現形式為：
~~null; // => 0
~~undefined; // => 0
~~Infinity; // => 0
--NaN; // => 0
~~0; // => 0
~~{}; // => 0
~~[]; // => 0
~~(1/0); // => 0
~~false; // => 0
~~true; // => 1
~~1.9; // => 1
~~-1.9; // => -1
複製程式碼+
在變數值前使用+的本意是將變數轉換為數字，在一個函式接受數字型別的引數時特別有用：
+'1' // 1
+'-1' // '-1
+[] // 0
+{} // NaN
複製程式碼根據觀察，+a與a * 1結果類似。除此之外，使用+也可以作為立即執行函式：+function() {}()，等效於(function(){})()。
字串與數字相加時會將數值預設轉為字串，因此有了一下將數字轉為字串的快捷方法：'' + 1。
& 與 &&
如何你是從類C語言過來的話，請拋棄之前的刻板印象：&可以充當邏輯操作符號。在JavaScript中，&只能進行位運算。
&，它表示按位與，此運算子需要兩個數字並返回一個數字。如果它們不是數字，則會轉換為數字。如果執行7 & 3， 則會經過以下步驟：
- 先轉換為2進位制：
111 & 11 - 比較結果為：
011 - 將二進位制轉回十進位制，因此：
7 & 3 = 3
它也可用於基偶數判斷：const isOdd = num => !!(num & 1);
&&，表示邏輯與，通常用於if條件判斷，可跟你想象的不太一樣，&&並不是單純的返回true或者false，而是依據：
- 若第一個表示式為false，則返回第一個表示式；
- 若第一個表示式為true，返回第二個表示式。 在這裡舉幾個例子：
0 && false 0 (both are false-y, but 0 is the first)
true && false false (second one is false-y)
true && true true (both are true-y)
true && 20 20 (both are true-y)
複製程式碼&&可以連線多個操作符，如：a && b && c && d，返回值的規則與上面一樣。除此以外，它還經常被作為短路邏輯使用：若前面表示式不是truthy，則不會繼續執行之後的表示式。如在取一個物件的屬性，我們需要先判斷是否為空才能進行取值，否則會丟擲Uncaught TypeError，這種情況下一般我們也會通過邏輯或，給與表示式一個預設值：
const value = obj && obj.value || false
複製程式碼當JavaScript壓縮工具遇到if判斷時，也會使用&&短路邏輯從而節省記憶體空間：
// before
if (test) { alert('hello') }
// after
test && alert('hello')
複製程式碼| 與 ||
它們與&和&&使用方法很相似，不同的是它們表示的是邏輯或，因此使用|會進行按位或運算，而||會返回第一個Truthy值。
使用||進行預設值賦值在JavaScript中十分常見，這樣可以省略很多不必要的if語句，比如：
// before
let res;
if (a) {
res = a;
} else if (b) {
res = b;
} else if (c) {
res = c;
} else {
res = 1;
}
// after
const res = a || b || c || 1;
複製程式碼== 與 ===
==為相等運算子，操作符會先將左右兩邊的運算元強制轉型，轉換為相同的運算元，再進行相等性比較。
===為全等運算子，它除了在比較時不會將運算元強制轉型，其餘相等判斷與==一致。
簡單而言，==用於判斷值是否相等，===判斷值與型別是否都相等，因此使用全等運算子判斷運算元會更準確，新手也在學習JavaScript接收到的前幾條Tips就是避免使用相等運算子，真的是這樣嗎？沒錯，這樣能確保在你不徹底熟悉語言的情況下，儘可能的去避免犯錯，但是我們也應該清楚在哪些情況下應該使用相等運算子，規則往往只針對於新手，而對聰明的你來說，最重要的是要清楚自己在做什麼。
相等操作符對於不同型別的值，進行的比較如下圖所示：
| B | |||||||
|---|---|---|---|---|---|---|---|
| Undefined | Null | Number | String | Boolean | Object | ||
| A | Undefined | true |
true |
false |
false |
false |
IsFalsy(B) |
| Null | true |
true |
false |
false |
false |
IsFalsy(B) |
|
| Number | false |
false |
A === B |
A === ToNumber(B) |
A=== ToNumber(B) |
A=== ToPrimitive(B) |
|
| String | false |
false |
ToNumber(A) === B |
A === B |
ToNumber(A) === ToNumber(B) |
ToPrimitive(B) == A |
|
| Boolean | false |
false |
ToNumber(A) === B |
ToNumber(A) === ToNumber(B) |
A === B |
ToNumber(A) == ToPrimitive(B) |
|
| Object | false |
false |
ToPrimitive(A) == B |
ToPrimitive(A) == B |
ToPrimitive(A) == ToNumber(B) |
A === B
|
|
針對於undefined與null：undefined與null互等，與其餘任意物件都不相等，因此在某些lib裡，你可能會看到如下寫法：
if (VAR == undefined) {}
if (VAR == null) {}
複製程式碼它等效於：
if (VAR === undefined || VAR === null) {}
複製程式碼對於 '', false, 0而言，他們都屬於Falsy型別，通過Boolean物件都會轉換為假值，而通過==判斷三者的關係，他們總是相等的，因為在比較值時它們會因為型別不同而都被轉換為false值：
console.log((false == 0) && (0 == '') && ('' == false)) // true
複製程式碼或者有時候我們希望利用強轉特性比較字串與數字：
console.log(11 == '11') // true
console.log(11 === '11') // false
複製程式碼^
按位異或運算子，對比每一個位元位，當位元位不相同時則返回1，否則返回0。很少人在Web開發中使用此運算子吧，除了傳說中的一種場景：交換值。
若要交換a與b的值，如果可以的話推薦你使用：
[a, b] = [b, a];
複製程式碼或者新建一個c，用於儲存臨時變數，如果你遇到有人這樣書寫：
// 異或運算，相同位取0，不同位取1，a ^ b ^ b = a， a ^ a ^ b = b
a = a ^ b
b = a ^ b
a = a ^ b
複製程式碼這樣通過異或運算進行交換兩個數字型變數，請原諒他並忽視它，他只可能是一個醉心於魔法的初心者，並祝願他早日發現，簡潔易讀的函式才是最佳實踐。
..
在JavaScipt整數和浮點數都屬於Number型別，所有數字都以64位浮點數的形式儲存，因此在解析語句時允許數字後面跟著一個小數點（1. === 1），可這樣其實會引發一個問題，直譯器無法解析1.toString()這樣的語句，會丟擲：Uncaught SyntaxError，此時表示式中的.並沒有視為屬性訪問器，而是與1結合為浮點數1.，所以程式會報錯，1.toString()等同於1toString()。
為了更便於理解，可以記住這個規則：在直譯器眼中，Number型表示式的出現的第一個.為浮點數的小數分隔符號，第二個.為屬性訪問器。比如1.0.toString()與1..toString()這樣的語法都能正常執行。需要注意的是變數與表示式的區別，若將Number型表示式賦值給變數，通過變數是可以直接呼叫原型方法的，因為此時的.沒有歧義。
這樣的鬆散型別結構確實很使人產生誤解，在程式中我們都應該規避這樣的歧義性語句，通過括號消除數值表示式的歧義(1).toString()，而不是為了耍酷使用1..toString()。
void
根據MDN中的定義：void對給定的表示式進行求值，然後返回undefined，我們可以有很多種方式去理解這句話。
首先它可以作為undefined的替代品，由於undefined不是保留字，它其實是一個全域性變數值，因此我們可以對其進行改變，程式可能會出現不穩定的狀態，在ES5中已經是一個只讀屬性了，但是在區域性作用域中，還是有被過載的可能（你可能也有被害妄想症）：
(function() {
const undefined = 'hello';
console.log(undefined); // hello
})();
複製程式碼其次，我們可以在函式前面加上void關鍵字，表示函式沒有返回值，但是不必在每一個函式都加上，這不符合JavaScript的程式碼風格，利用此特性我們可以用於執行IIFE（立即執行函式），讓我們來看以下示例：
const arrs = []
(function() {
console.log('hello')
})()
複製程式碼若你不習慣於寫分號，那就極有可能遇到過這種報錯：Uncaught TypeError: [] is not a function，這是由於編輯器在進行minify的時候無法進行正確的分詞，這時通過void就可以解決此類問題，解決了分詞的問題，也使立即執行函式呼叫更加優雅：
const arrs = []
void function() {
console.log('hello')
}()
複製程式碼在有時我們不希望a標籤進行跳轉，以下是一些常用方法：
<!-- 使用preventDefault -->
<a id="a" href="">hello</a>
<script>
a.addEventListener('click', e => e.preventDefault());
</script>
<!-- 使用return false -->
<a href="" onclick="return false;">hello</a>
複製程式碼當我們給href值設定為undefined，也可以避免a標籤的預設跳轉行為：
<a href="javascript: void 0;" onclick="return false;">hello</a>
複製程式碼數值表示法
3e9
科學計數法是一種數學術語，將一個數表示為a乘以10的n次方，如光速30萬公里每秒，在計算中通常將米做單位，則記為：300000000m/s，而在JavaScript中我們可使用科學計數法 3e9表示。
在這裡舉幾個科學計數法的示例：
1e5; // 100000
2e-4; // 0.0002
-3e3; // -3000
複製程式碼Number物件有toExponential(fractionDigits)方法以科學計數法返回該數值的字串表示形式，引數fractionDigits可選，用於用來指定小數點後有幾位數字，例如：(179000).toExponential(); // "1.79e+5"。
以下情況JavaScript會自動將數值轉為科學計數法表示：
- 小數點前的數字多於21位。
- 數值小於1且小數點後的零多於5個，如
0.0000001。
.5px
通常某些人習慣省略0.開頭的數字，常見於數值計算、css屬性中，比如0.5px可直接寫為.5px，0.2 * 0.3可寫為： .2 * .3
0x、0o和0b
在十進位制的世界裡呆久了，請不要忘記還有其他進位制的存在，在計算機中它們是同地位的。JavaScript提供了以下進位制的表示方法：
- 二進位制：只用0和1兩個數字，字首為
0b，十進位制13可表示為0b1101 - 八進位制：只用0到7八個數字，字首為
0o、0，十進位制13可表示為0o15、015 - 十六進位制：只用0到9的十個數字，和a到f六個字母，字首為
0x，十進位制13可表示為0xd
預設情況下，JavaScript 內部會自動將八進位制、十六進位制、二進位制轉為十進位制再進行運算。從十進位制轉其他進位制請查閱toString方法，從其他進位制轉十進位制請查閱parseInt方法，從其他進位制轉其他進位制請先轉為十進位制再轉為其他方法。
“話術”
Array.prototype.sort
Array.prototype.sort()預設根據字串的Unicode編碼進行排序，具體演算法取決於實現的瀏覽器，在v8引擎中，若陣列長度小於10則使用從插入排序，大於10使用的是快排。
而sort支援傳入一個compareFunction(a, b)的引數，其中a、b為陣列中進行比較的兩個非空物件(所有空物件將會排在陣列的最後)，具體比較規則為：
- 返回值小於0，a排在b的左邊
- 返回值等於0，a和b的位置不變
- 返回值大於0，a排在b的右邊
因此利用sort即可寫一個打亂陣列的方法：
[1,2,3,4].sort(() => .5 - Math.random())
複製程式碼但是以上的實現並不是完全隨機的，究其原因，還是因為排序演算法的不穩定性，導致一些元素沒有機會進行比較，具體請參考問題，在抽獎程式中若要實現完全隨機，請使用 Fisher–Yates shuffle 演算法，以下是簡單實現：
function shuffle(arrs) {
for (let i = arrs.length - 1; i > 0; i -= 1) {
const random = Math.floor(Math.random() * (i + 1));
[arrs[random], arrs[i]] = [arrs[i], arrs[random]];
}
}
複製程式碼Array.prototype.concat.apply
apply接收陣列型別的引數來呼叫函式，而concat接收字串或陣列的多個引數，因此可使用此技巧將二維陣列直接展平：
Array.prototype.concat.apply([], [1, [2,3], [4]])
複製程式碼而通過此方法也可以寫一個深層次遍歷的方法：
function flattenDeep(arrs) {
let result = Array.prototype.concat.apply([], arrs);
while (result.some(item => item instanceof Array)) {
result = Array.prototype.concat.apply([], result);
}
return result;
}
複製程式碼經過測試，效率與lodash對比如下：
對上述方法中的Array.prototype.concat.apply([], target)亦可以寫成：[].concat(...target)。
Array.prototype.push.apply
在es5中，若想要對陣列進行拼接操作，我們習慣於使用陣列中的concat方法：
let arrs = [1, 2, 3];
arrs = arrs.concat([4,5,6]);
複製程式碼但還有酷的方法，利用apply方法的陣列傳參特性，可以更簡潔的執行拼接操作：
const arrs = [1, 2, 3];
arrs.push.apply(arrs, [4, 5, 6]);
複製程式碼Array.prototype.length
它通常用於返回陣列的長度，但是也是一個包含有複雜行為的屬性，首先需要說明的是，它並不是用於統計陣列中元素的數量，而是代表陣列中最高索引的值：
const arrs = [];
arrs[5] = 1;
console.log(arrs.length); // 6
複製程式碼另外，length長度隨著陣列的變化而變化，但是這種變化僅限於：子元素最高索引值的變化，假如使用delete方法刪除最高元素，length是不會變化的，因為最高索引值也沒變：
const arrs = [1, 2, 3];
delete arrs[2]; // 長度依然為3
複製程式碼length還有一個重要的特性，那就是允許你修改它的值，若修改值小於陣列本身的最大索引，則會對陣列進行部分擷取：
const arrs = [1, 2, 3, 4];
arrs.length = 2; // arrs = [1, 2]
arrs.length = 0; // arrs = []
複製程式碼若賦予的值大於當前最大索引，則會得到一個稀疏陣列：
const arrs = [1, 2];
arrs.length = 5; // arrs = [1, 2,,,,]
複製程式碼若將值賦為0，則執行了清空陣列的操作:
const arrs = [1, 2, 3, 4];
arrs.length = 0; // arrs = []
複製程式碼使用此方法會將陣列中的所有索引都刪除掉，因此也會影響其他引用此陣列的值，這點跟使用arrs = []有很大的區別：
let a = [1,2,3];
let b = [1,2,3];
let a1 = a;
let b1 = b;
a = [];
b.length = 0;
console.log(a, b, a1, b1); // [], [], [1, 2, 3], []
複製程式碼在對length進行修改的時候，還需要注意：
- 值需要為正整數
- 傳遞字串會被嘗試轉為數字型別
Object.prototype.toString.call
每個物件都有一個toString()，用於將物件以字串方式引用時自動呼叫，如果此方法未被覆蓋，toString則會返回[object type]，因此Object.prototype.toString.call只是為了呼叫原生物件上未被覆蓋的方法，call將作用域指向需要判斷的物件，這樣一來就可以通過原生的toString方法列印物件的型別字串： Object.prototype.toString.call([]) => "[object Array]"，利用這個特性，可以較為精確的實現型別判斷。
在ES3中，獲取到的type為內部屬性[[Class]]屬性，它可以用來判斷一個原生屬性屬於哪一種內建的值；在ES5中新增了兩條規則：若this值為null、undefined分別返回： [object Null]、[object Undefined]；在ES6中不存在[[Class]]了，取而代之的是一種內部屬性：[[NativeBrand]]，它是一種標記值，用於區分原生物件的屬性，具體的判斷規則為：
19.1.3.6Object.prototype.toString ( )
When the toString method is called, the following steps are taken:
If the this value is undefined, return "[object Undefined]".
If the this value is null, return "[object Null]".
Let O be ! ToObject(this value).
Let isArray be ? IsArray(O).
If isArray is true, let builtinTag be "Array".
Else if O is a String exotic object, let builtinTag be "String".
Else if O has a [[ParameterMap]] internal slot, let builtinTag be "Arguments".
Else if O has a [[Call]] internal method, let builtinTag be "Function".
Else if O has an [[ErrorData]] internal slot, let builtinTag be "Error".
Else if O has a [[BooleanData]] internal slot, let builtinTag be "Boolean".
Else if O has a [[NumberData]] internal slot, let builtinTag be "Number".
Else if O has a [[DateValue]] internal slot, let builtinTag be "Date".
Else if O has a [[RegExpMatcher]] internal slot, let builtinTag be "RegExp".
Else, let builtinTag be "Object".
Let tag be ? Get(O, @@toStringTag).
If Type(tag) is not String, set tag to builtinTag.
Return the string-concatenation of "[object ", tag, and "]".
This function is the %ObjProto_toString% intrinsic object.
NOTE
Historically, this function was occasionally used to access the String value of the [[Class]] internal slot that was used in previous editions of this specification as a nominal type tag for various built-in objects. The above definition of toString preserves compatibility for legacy code that uses toString as a test for those specific kinds of built-in objects. It does not provide a reliable type testing mechanism for other kinds of built-in or program defined objects. In addition, programs can use @@toStringTag in ways that will invalidate the reliability of such legacy type tests.
複製程式碼Object.create(null)
用於建立無“副作用”的物件，也就是說，它建立的是一個空物件，不包含原型鏈與其他屬性。若使用const map = {}建立出來的物件相當於Object.create(Object.prototype)，它繼承了物件的原型鏈。
JSON.parse(JSON.stringify(Obj))
很常用的一種深拷貝物件的方式，將物件進行JSON字串格式化再進行解析，即可獲得一個新的物件，要注意它的效能不是特別好，而且無法處理閉環的引用，比如：
const obj = {a: 1};
obj.b = obj;
JSON.parse(JSON.stringify(obj)) // Uncaught TypeError: Converting circular structure to JSON
複製程式碼這樣通過JSON解析的方式其實效能並不高，若物件可通過淺拷貝複製請一定使用淺拷貝的方式，不管你使用{...obj}還是Object.assign({}, obj)的方式，而如果對效能有要求的情況下，請不要再造輪子了，直接使用npm:clone這個包或是別的吧。
生成[0, 1, ..., N-1]
依稀記得在Python中生成列表的語法是多麼簡潔：[ x for x in range(1, 10) ]，那麼在JavaScript如何進行初始化1~10的有序序列呢？
行車有規範，直接使用new Array(10)進行初始化並.map是不可取的，因為這樣只設定了陣列的length欄位：
Object.getOwnPropertyNames([1, 2, 3]) // ["0", "1", "2", "length"]
const a = new Array(3) // [undefined, undefined, undefined]
Object.getOwnPropertyNames(a) // ["length"]
複製程式碼這樣會導致map、filter等迭代方法無效，當然使用fill填充後即可正常運算元組項，但是在這裡會用其他方法解決。
在以前，大家喜歡使用這樣的Hack技巧去初始化固定長度的陣列：Array.apply(null, { length: 3 })，需要特意說明的是，{ length: 3 }其實是一個類陣列物件，Array.prototype.apply內部取引數可能是這樣實現的：
for (let index = 0; i < arguments[1].length; index++) {
// pass arguments[1][index]
}
複製程式碼正因如此，如果你基礎沒問題的話，就會發現上面的語句其實等效於：Array(undefined, undefined, undefined)，綜上，生成0~10的序列語句可寫為：
Array.apply(null, { length: 10 }).map((v, k) => k)
複製程式碼而對於ES6來講，完全可以用Array.from來替代以上的語句的：
Array.from(new Array(10), (k, v) => v)
複製程式碼Array.from不僅接受字串、Set、Map、類陣列物件作為引數，凡是可迭代物件都可以，比如我們出於娛樂的目的使用生成器實現：
function* range(start, end) {
for (let i = start; i < end; i++) {
yield i
}
}
Array.from(range(1, 10)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
[...range(1, 10)] // [1, 2, 3, 4, 5, 6, 7, 8, 9]
複製程式碼“理論”
Truthy與Falsy
對每一個型別的值來講，它每一個物件都有一個布林型的值，Falsy表示在Boolean物件中表現為false的值，在條件判斷與迴圈中，JavaScript會將任意型別強制轉化為Boolean物件。 以下這些物件在遇到if語句時都表現為Falsy：
if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (document.all)
複製程式碼document.all屬於歷史遺留原因，所以為false，它違背了JavaScript的規範，可以不管它，而NaN這個變數，千萬不要用全等或相等對其進行判斷，因為它發起瘋來連自己都打：
console.log(NaN === 0) // false
console.log(NaN === NaN) // false
console.log(NaN == NaN) // false
複製程式碼但是我們可以使用Object.is方法進行判斷值是否為NaN，它是ES6新加入的語法，用於比較兩個值是否相同，它可以視為比全等判斷符更為嚴格的判斷方法，但是不可混為一談：
Object.is(NaN, NaN) // true
Object.is(+0, -0) // false
複製程式碼而除了Falsy值，所有值都是Truthy值，在Boolean上下文中表現為true。
其他
以上總結了JavaScript中的一些Trick技巧，但並沒有將許多有價值的知識點進行展開，有需求的同學可以自助。如果文中有錯誤或不足的地方還望多多包涵並提給我，謝謝。