摘要：數(shù)值表示法科學(xué)計(jì)數(shù)法是一種數(shù)學(xué)術(shù)語，將一個(gè)數(shù)表示為乘以的次方，如光速萬公里每秒，在計(jì)算中通常將米做單位，則記為，而在中我們可使用科學(xué)計(jì)數(shù)法表示。以下情況會自動將數(shù)值轉(zhuǎn)為科學(xué)計(jì)數(shù)法表示小數(shù)點(diǎn)前的數(shù)字多于位。

因?yàn)榍蚴菆A的，所以不論發(fā)生什么都有可能，對這點(diǎn)我是深信不疑的，但最近我總是在懷疑，JavaScript也是圓的！

黑話，本指舊時(shí)江湖幫會人物的暗語、暗號，往往見于小說，后指流行于某一特殊行業(yè)中，非局外人所能了解的語言。而本文涉及到的“黑話”，其實(shí)是一些利用語言的特征使用的一些不常見的奇淫技巧，JavaScript的語法是十分簡單靈活的，在項(xiàng)目中建議大家遵從ESLint規(guī)范編寫可維護(hù)性的代碼，各路神仙們也應(yīng)該進(jìn)行自我約束，畢竟“黑話”也并不全是什么好的東西，如果很多話可以直接講，何必拐彎抹角的去說呢？

算術(shù)中的位運(yùn)算已被作者列為禁術(shù)，因此希望你在工程中使用位運(yùn)算時(shí)，請確保你有充足的理由使用，并在需要時(shí)寫好Hack注釋。

!為邏輯非操作符，可以應(yīng)用于ECMAScript中的任何值，無論這個(gè)值是什么類型，它會被強(qiáng)制轉(zhuǎn)化為一個(gè)布爾值變量，再對其值取反。

!!只是單純的將操作數(shù)執(zhí)行兩次邏輯非，它能將任意類型的值轉(zhuǎn)化為相應(yīng)的布爾值，它包含的步驟為：

將一個(gè)值轉(zhuǎn)化為布爾值；

將其取反；

再次取反。

假設(shè)你需要通過一個(gè)布爾型變量表示是否有id值，以下寫法推薦你使用最后一種方式來進(jìn)行轉(zhuǎn)化：

const enable1 = !!id；
const enable2 = id ? true : false;
const enable3 = Boolean(id);

~表示按位取反，~5的運(yùn)行步驟為：

轉(zhuǎn)為一個(gè)字節(jié)的二進(jìn)制表示：00000101，

按位取反：11111010

取其反碼：10000101

取其補(bǔ)碼：10000110

轉(zhuǎn)化為十進(jìn)制：-6

至于原碼、反碼、補(bǔ)碼原理請看原理篇。

~~它代表雙非按位取反運(yùn)算符，如果你想使用比Math.floor()更快的方法，那就是它了。需要注意，對于正數(shù)，它向下取整；對于負(fù)數(shù)，向上取整；非數(shù)字取值為0，它具體的表現(xiàn)形式為：

~~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

在變量值前使用+的本意是將變量轉(zhuǎn)換為數(shù)字，在一個(gè)函數(shù)接受數(shù)字類型的參數(shù)時(shí)特別有用：

+"1" // 1
+"-1" // "-1
+[] // 0
+{} // NaN

根據(jù)觀察，+a與a * 1結(jié)果類似。除此之外，使用+也可以作為立即執(zhí)行函數(shù)：+function() {}()，等效于(function(){})()。

字符串與數(shù)字相加時(shí)會將數(shù)值默認(rèn)轉(zhuǎn)為字符串，因此有了一下將數(shù)字轉(zhuǎn)為字符串的快捷方法："" + 1。

如何你是從類C語言過來的話，請拋棄之前的刻板印象：&可以充當(dāng)邏輯操作符號。在JavaScript中，&只能進(jìn)行位運(yùn)算。

&，它表示按位與，此運(yùn)算符需要兩個(gè)數(shù)字并返回一個(gè)數(shù)字。如果它們不是數(shù)字，則會轉(zhuǎn)換為數(shù)字。如果執(zhí)行7 & 3， 則會經(jīng)過以下步驟：

先轉(zhuǎn)換為2進(jìn)制： 111 & 11

比較結(jié)果為：011

將二進(jìn)制轉(zhuǎn)回十進(jìn)制，因此：7 & 3 = 3

它也可用于基偶數(shù)判斷：const isOdd = num => !!(num & 1);

&&，表示邏輯與，通常用于if條件判斷，可跟你想象的不太一樣，&&并不是單純的返回true或者false，而是依據(jù)：

若第一個(gè)表達(dá)式為false，則返回第一個(gè)表達(dá)式；

若第一個(gè)表達(dá)式為true，返回第二個(gè)表達(dá)式。

在這里舉幾個(gè)例子：

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)

&&可以連接多個(gè)操作符，如：a && b && c && d，返回值的規(guī)則與上面一樣。除此以外，它還經(jīng)常被作為短路邏輯使用：若前面表達(dá)式不是truthy，則不會繼續(xù)執(zhí)行之后的表達(dá)式。如在取一個(gè)對象的屬性，我們需要先判斷是否為空才能進(jìn)行取值，否則會拋出Uncaught TypeError，這種情況下一般我們也會通過邏輯或，給與表達(dá)式一個(gè)默認(rèn)值：

const value = obj && obj.value || false

當(dāng)JavaScript壓縮工具遇到if判斷時(shí)，也會使用&&短路邏輯從而節(jié)省內(nèi)存空間：

// before
if (test) { alert("hello") }
// after
test && alert("hello")

它們與&和&&使用方法很相似，不同的是它們表示的是邏輯或，因此使用|會進(jìn)行按位或運(yùn)算，而||會返回第一個(gè)Truthy值。

使用||進(jìn)行默認(rèn)值賦值在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;

==為相等運(yùn)算符，操作符會先將左右兩邊的操作數(shù)強(qiáng)制轉(zhuǎn)型，轉(zhuǎn)換為相同的操作數(shù)，再進(jìn)行相等性比較。

===為全等運(yùn)算符，它除了在比較時(shí)不會將操作數(shù)強(qiáng)制轉(zhuǎn)型，其余相等判斷與==一致。

簡單而言，==用于判斷值是否相等，===判斷值與類型是否都相等，因此使用全等運(yùn)算符判斷操作數(shù)會更準(zhǔn)確，新手也在學(xué)習(xí)JavaScript接收到的前幾條Tips就是避免使用相等運(yùn)算符，真的是這樣嗎？沒錯(cuò)，這樣能確保在你不徹底熟悉語言的情況下，盡可能的去避免犯錯(cuò)，但是我們也應(yīng)該清楚在哪些情況下應(yīng)該使用相等運(yùn)算符，規(guī)則往往只針對于新手，而對聰明的你來說，最重要的是要清楚自己在做什么。

相等操作符對于不同類型的值，進(jìn)行的比較如下圖所示：

針對于undefined與null：undefined與null互等，與其余任意對象都不相等，因此在某些lib里，你可能會看到如下寫法：

if (VAR == undefined) {}
if (VAR == null) {}

它等效于：

if (VAR === undefined || VAR === null) {}

對于 "", false, 0而言，他們都屬于Falsy類型，通過Boolean對象都會轉(zhuǎn)換為假值，而通過==判斷三者的關(guān)系，他們總是相等的，因?yàn)樵诒容^值時(shí)它們會因?yàn)轭愋筒煌急晦D(zhuǎn)換為false值：

console.log((false == 0) && (0 == "") && ("" == false)) // true

或者有時(shí)候我們希望利用強(qiáng)轉(zhuǎn)特性比較字符串與數(shù)字：

console.log(11 == "11") // true
console.log(11 === "11") // false

按位異或運(yùn)算符，對比每一個(gè)比特位，當(dāng)比特位不相同時(shí)則返回1，否則返回0。很少人在Web開發(fā)中使用此運(yùn)算符吧，除了傳說中的一種場景：交換值。

若要交換a與b的值，如果可以的話推薦你使用：

[a, b] = [b, a];

或者新建一個(gè)c，用于存儲臨時(shí)變量，如果你遇到有人這樣書寫：

// 異或運(yùn)算，相同位取0，不同位取1，a ^ b ^ b = a， a ^ a ^ b = b
a = a ^ b
b = a ^ b
a = a ^ b

這樣通過異或運(yùn)算進(jìn)行交換兩個(gè)數(shù)字型變量，請?jiān)徦⒑鲆曀?，他只可能是一個(gè)醉心于魔法的初心者，并祝愿他早日發(fā)現(xiàn)，簡潔易讀的函數(shù)才是最佳實(shí)踐。

科學(xué)計(jì)數(shù)法是一種數(shù)學(xué)術(shù)語，將一個(gè)數(shù)表示為a乘以10的n次方，如光速30萬公里每秒，在計(jì)算中通常將米做單位，則記為：300000000m/s，而在JavaScript中我們可使用科學(xué)計(jì)數(shù)法 3e9表示。

在這里舉幾個(gè)科學(xué)計(jì)數(shù)法的示例：

1e5; // 100000
2e-4; // 0.0002
-3e3; // -3000

Number對象有toExponential(fractionDigits)方法以科學(xué)計(jì)數(shù)法返回該數(shù)值的字符串表示形式，參數(shù)fractionDigits可選，用于用來指定小數(shù)點(diǎn)后有幾位數(shù)字，例如：(179000).toExponential(); // "1.79e+5"。

以下情況JavaScript會自動將數(shù)值轉(zhuǎn)為科學(xué)計(jì)數(shù)法表示：

小數(shù)點(diǎn)前的數(shù)字多于21位。

小數(shù)點(diǎn)后的零多于5個(gè)。

通常某些人習(xí)慣省略0.開頭的數(shù)字，常見于數(shù)值計(jì)算、css屬性中，比如0.5px可直接寫為.5px，0.2 * 0.3可寫為： .2 * .3

在十進(jìn)制的世界里呆久了，請不要忘記還有其他進(jìn)制的存在，在計(jì)算機(jī)中它們是同地位的。JavaScript提供了以下進(jìn)制的表示方法：

二進(jìn)制：只用0和1兩個(gè)數(shù)字，前綴為0b，十進(jìn)制13可表示為0b1101

八進(jìn)制：只用0到7八個(gè)數(shù)字，前綴為0o、0，十進(jìn)制13可表示為0o15、015

十六進(jìn)制：只用0到9的十個(gè)數(shù)字，和a到f六個(gè)字母，前綴為0x，十進(jìn)制13可表示為0xd

默認(rèn)情況下，JavaScript 內(nèi)部會自動將八進(jìn)制、十六進(jìn)制、二進(jìn)制轉(zhuǎn)為十進(jìn)制再進(jìn)行運(yùn)算。從十進(jìn)制轉(zhuǎn)其他進(jìn)制請查閱toString方法，從其他進(jìn)制轉(zhuǎn)十進(jìn)制請查閱parseInt方法，從其他進(jìn)制轉(zhuǎn)其他進(jìn)制請先轉(zhuǎn)為十進(jìn)制再轉(zhuǎn)為其他方法。

Array.prototype.sort()默認(rèn)根據(jù)字符串的Unicode編碼進(jìn)行排序，具體算法取決于實(shí)現(xiàn)的瀏覽器，在v8引擎中，若數(shù)組長度小于10則使用從插入排序，大于10使用的是快排。

而sort支持傳入一個(gè)compareFunction(a, b)的參數(shù)，其中a、b為數(shù)組中進(jìn)行比較的兩個(gè)非空對象(所有空對象將會排在數(shù)組的最后)，具體比較規(guī)則為：

返回值小于0，a排在b的左邊

返回值等于0，a和b的位置不變

返回值大于0，a排在b的右邊

因此利用sort即可寫一個(gè)打亂數(shù)組的方法：

[1,2,3,4].sort(() => .5 - Math.random())

但是以上的實(shí)現(xiàn)并不是完全隨機(jī)的，究其原因，還是因?yàn)榕判蛩惴ǖ牟环€(wěn)定性，導(dǎo)致一些元素沒有機(jī)會進(jìn)行比較，具體請參考問題，在抽獎程序中若要實(shí)現(xiàn)完全隨機(jī)，請使用 Fisher–Yates shuffle 算法，以下是簡單實(shí)現(xiàn)：

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]];
  }
}

apply接收數(shù)組類型的參數(shù)來調(diào)用函數(shù)，而concat接收字符串或數(shù)組的多個(gè)參數(shù)，因此可使用此技巧將二維數(shù)組直接展平：

Array.prototype.concat.apply([], [1, [2,3], [4]])

而通過此方法也可以寫一個(gè)深層次遍歷的方法：

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;
}

經(jīng)過測試，效率與lodash對比如下：

對上述方法中的Array.prototype.concat.apply([], target)亦可以寫成：[].concat(...target)。

在es5中，若想要對數(shù)組進(jìn)行拼接操作，我們習(xí)慣于使用數(shù)組中的concat方法：

let arrs = [1, 2, 3];
arrs = arrs.concat([4,5,6]);

但還有酷的方法，利用apply方法的數(shù)組傳參特性，可以更簡潔的執(zhí)行拼接操作：

const arrs = [1, 2, 3];
arrs.push.apply(arrs, [4, 5, 6]);

它通常用于返回?cái)?shù)組的長度，但是也是一個(gè)包含有復(fù)雜行為的屬性，首先需要說明的是，它并不是用于統(tǒng)計(jì)數(shù)組中元素的數(shù)量，而是代表數(shù)組中最高索引的值：

const arrs = [];
arrs[5] = 1;
console.log(arrs.length); // 6

另外，length長度隨著數(shù)組的變化而變化，但是這種變化僅限于：子元素最高索引值的變化，假如使用delete方法刪除最高元素，length是不會變化的，因?yàn)樽罡咚饕狄矝]變：

const arrs = [1, 2, 3];
delete arrs[2]; // 長度依然為3

length還有一個(gè)重要的特性，那就是允許你修改它的值，若修改值小于數(shù)組本身的最大索引，則會對數(shù)組進(jìn)行部分截取：

const arrs = [1, 2, 3, 4];
arrs.length = 2; // arrs = [1, 2]
arrs.length = 0; // arrs = []

若賦予的值大于當(dāng)前最大索引，則會得到一個(gè)稀疏數(shù)組：

const arrs = [1, 2];
arrs.length = 5; // arrs = [1, 2,,,,]

若將值賦為0，則執(zhí)行了清空數(shù)組的操作:

const arrs = [1, 2, 3, 4];
arrs.length = 0; // arrs = []

使用此方法會將數(shù)組中的所有索引都刪除掉，因此也會影響其他引用此數(shù)組的值，這點(diǎn)跟使用arrs = []有很大的區(qū)別：

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進(jìn)行修改的時(shí)候，還需要注意：

值需要為正整數(shù)

傳遞字符串會被嘗試轉(zhuǎn)為數(shù)字類型

每個(gè)對象都有一個(gè)toString()，用于將對象以字符串方式引用時(shí)自動調(diào)用，如果此方法未被覆蓋，toString則會返回[object type]，因此Object.prototype.toString.call只是為了調(diào)用原生對象上未被覆蓋的方法，call將作用域指向需要判斷的對象，這樣一來就可以通過原生的toString方法打印對象的類型字符串： Object.prototype.toString.call([]) => "[object Array]" ，利用這個(gè)特性，可以較為精確的實(shí)現(xiàn)類型判斷。

在ES3中，獲取到的type為內(nèi)部屬性[[Class]]屬性，它可以用來判斷一個(gè)原生屬性屬于哪一種內(nèi)置的值；在ES5中新增了兩條規(guī)則：若this值為null、undefined分別返回： [object Null]、[object Undefined]；在ES6中不存在[[Class]]了，取而代之的是一種內(nèi)部屬性：[[NativeBrand]]，它是一種標(biāo)記值，用于區(qū)分原生對象的屬性，具體的判斷規(guī)則為：

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.

用于創(chuàng)建無“副作用”的對象，也就是說，它創(chuàng)建的是一個(gè)空對象，不包含原型鏈與其他屬性。若使用const map = {}創(chuàng)建出來的對象相當(dāng)于Object.create(Object.prototype)，它繼承了對象的原型鏈。

很常用的一種深拷貝對象的方式，將對象進(jìn)行JSON字符串格式化再進(jìn)行解析，即可獲得一個(gè)新的對象，要注意它的性能不是特別好，而且無法處理閉環(huán)的引用，比如：

const obj = {a: 1};
obj.b = obj;
JSON.parse(JSON.stringify(obj)) // Uncaught TypeError: Converting circular structure to JSON

這樣通過JSON解析的方式其實(shí)性能并不高，若對象可通過淺拷貝復(fù)制請一定使用淺拷貝的方式，不管你使用{...obj}還是Object.assign({}, obj)的方式，而如果對性能有要求的情況下，請不要再造輪子了，直接使用npm:clone這個(gè)包或是別的吧。

對每一個(gè)類型的值來講，它每一個(gè)對象都有一個(gè)布爾型的值，F(xiàn)alsy表示在Boolean對象中表現(xiàn)為false的值，在條件判斷與循環(huán)中，JavaScript會將任意類型強(qiáng)制轉(zhuǎn)化為Boolean對象。
以下這些對象在遇到if語句時(shí)都表現(xiàn)為Falsy：

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ("")
if ("")
if (document.all)

document.all屬于歷史遺留原因，所以為false，它違背了JavaScript的規(guī)范，可以不管它，而NaN這個(gè)變量，千萬不要用全等或相等對其進(jìn)行判斷，因?yàn)樗l(fā)起瘋來連自己都打：

console.log(NaN === 0) // false
console.log(NaN === NaN) // false
console.log(NaN == NaN) // false

但是我們可以使用Object.is方法進(jìn)行判斷值是否為NaN，它是ES6新加入的語法，用于比較兩個(gè)值是否相同，它可以視為比全等判斷符更為嚴(yán)格的判斷方法，但是不可混為一談：

Object.is(NaN, NaN) // true
Object.is(+0, -0) // false

而除了Falsy值，所有值都是Truthy值，在Boolean上下文中表現(xiàn)為true。

在JavaScript進(jìn)行位運(yùn)算時(shí)，采用32位有符號整型，即數(shù)字5有以下表示方式：

原碼：00000000 00000000 00000000 00000101

反碼：00000000 00000000 00000000 00000101

補(bǔ)碼：00000000 00000000 00000000 00000101

而數(shù)字-5的表示方式為：

原碼：10000000 00000000 00000000 00000101

反碼：11111111 11111111 11111111 11111010

補(bǔ)碼：11111111 11111111 11111111 11111011

綜上所述，有以下規(guī)律：

正數(shù)的原碼、反碼、補(bǔ)碼都是它本身

負(fù)數(shù)的反碼：在其原碼的基礎(chǔ)上, 符號位不變，其余各個(gè)位取反

負(fù)數(shù)的補(bǔ)碼：負(fù)數(shù)的反碼 + 1

那么它們到底有什么用呢？其實(shí)位運(yùn)算就是用計(jì)算機(jī)底層電路所有運(yùn)算的基礎(chǔ)，為了讓計(jì)算機(jī)的運(yùn)算更加簡單，而不用去辨別符號位，所有值都采用加法運(yùn)算，因此，人們設(shè)計(jì)了原碼，通過符號位來標(biāo)識數(shù)字的正負(fù)：

1 = 0000 0001
-1 = 1000 0001

假如計(jì)算機(jī)要對兩個(gè)數(shù)相加：1 + (-1)，使用原碼相加的運(yùn)算結(jié)果為：10000010，很明顯-2并不是我們想要的結(jié)果，因此出現(xiàn)了反碼，若使用反碼進(jìn)行運(yùn)算會有什么結(jié)果呢，讓我們來看一下：

1[反碼] + (-1)[反碼] =  0000 0001 + 1111 1110 = 11111111[反碼] = 10000000[原碼]

此時(shí)運(yùn)算結(jié)果是正確的，可是這樣還存在一個(gè)問題，有兩個(gè)值可以表示0：1000 0000、0000 0000，對于計(jì)算機(jī)來說，0帶符號是沒有任何意義的，人們?yōu)榱藘?yōu)化0的存在，設(shè)計(jì)出了補(bǔ)碼：

1[補(bǔ)碼] + (-1)[補(bǔ)碼] =  0000 0001 + 1111 1111 = 00000000[原碼]

這樣一來，-0的問題就可以解決了。

https://modernweb.com/45-useful-javascript-tips-tricks-and-best-practices/

https://dmitripavlutin.com/the-magic-behind-array-length-property/

https://medium.freecodecamp.org/9-neat-javascript-tricks-e2742f2735c3

https://stackoverflow.com/questions/7310109/whats-the-difference-between-and-in-javascript

http://javascript.ruanyifeng.com/grammar/number.html