曾經(jīng)，我接手了一份大佬的代碼，里面充滿了各種“騷操作”，還不加注釋那種，短短幾行的函數(shù)花了很久才弄懂。

這世上，“只有魔法才能對抗魔法”，于是后來，翻閱各種“黑魔法”的秘籍，總結(jié)了一些比較實用的“騷操作”，讓我們裝X的同時，提升代碼運行的效率(請配合健身房一起使用)。

位運算

JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3，因為精度的問題，導(dǎo)致所有的浮點運算都是不安全的，具體原因可詳見《0.1 + 0.2不等于0.3？為什么JavaScript有這種“騷”操作？》。

因此，之前有大牛提出，不要在 JS 中使用位運算：

Javascript 完全套用了 Java 的位運算符，包括按位與&、按位或|、按位異或^、按位非~、左移<>和用0補(bǔ)足的右移>>>。這套運算符針對的是整數(shù)，所以對 JavaScript 完全無用，因為 JavaScript 內(nèi)部，所有數(shù)字都保存為雙精度浮點數(shù)。如果使用它們的話，JavaScript 不得不將運算數(shù)先轉(zhuǎn)為整數(shù)，然后再進(jìn)行運算，這樣就降低了速度。而且"按位與運算符"&同"邏輯與運算符"&&，很容易混淆。

但是在我看來，如果對 JS 的運用達(dá)到爐火純青的地步，能避開各種“Feature”的話，偶爾用一下位運算符也無所謂，還能提升運算性能，畢竟直接操作的是計算機(jī)最熟悉的二進(jìn)制。 位運算的原理可以參考這篇文章 《位運算符在JS中的妙用》

1.使用左移運算符 << 迅速得出2的次方

1 << 10 // 1024, 即 2的10次方 // 但是要注意使用場景 a = 2e9; // 2000000000 a << 1; // -294967296

2.使用 ^ 切換變量 0 或 1

// if 判斷 if (toggle) { toggle = 0; } else { toggle = 1; } // 三目運算符 togle = toggle ? 0 : 1; // --- after --- toggle ^= 1;

3.使用 & 判斷奇偶性

偶數(shù) & 1 = 0

奇數(shù) & 1 = 1

console.log(7 & 1); // 1

console.log(8 & 1) ; // 0

4.使用 !! 將數(shù)字轉(zhuǎn)為布爾值

所有非0的值都是true，包括負(fù)數(shù)、浮點數(shù)：

console.log(11.71 >> 0) // 11 console.log(11.71 << 0) // 11 console.log(11.71 | 0) // 11 console.log(11.71 >> 0) // 11

5.使用~、>>、<>>、|來取整
相當(dāng)于使用了 Math.floor()

console.log(11.71 >> 0) // 11 console.log(11.71 << 0) // 11 console.log(11.71 | 0) // 11 console.log(11.71 >>> 0) // 11

注意 >>> 不可對負(fù)數(shù)取整

6.使用^來完成值交換

這個符號的用法前面提到過，下面介紹一些高級的用法，在 ES6 的解構(gòu)賦值出來之前，用這種方式會更快(但必須是整數(shù))：

(a ^ b) >= 0; // true 相同; false 不相同

這里小編是一個有著5年工作經(jīng)驗的前端工程師，關(guān)于web前端有一個完整學(xué)習(xí)web前端的路線，學(xué)習(xí)材料和工具。需要的伙伴可以私信我，發(fā)送“前端”就可以獲取領(lǐng)取地址，免費送給大家。對于學(xué)習(xí)web前端有任何問題(學(xué)習(xí)方法，學(xué)習(xí)效率，如何就業(yè))都可以問我。希望你也能憑自己的努力，成為下一個優(yōu)秀的程序員！

7.使用^判斷符號是否相同

// --- before --- if (a !== 1171) {...}; // --- after --- if (a ^ 1171) {...};

8.使用^來檢查數(shù)字是否不相等

// --- before --- if (a !== 1171) {...}; // --- after --- if (a ^ 1171) {...};

9.n & (n - 1)，如果為 0，說明 n 是 2 的整數(shù)冪

10.使用 A + 0.5 | 0 來替代 Math.round()

如果是負(fù)數(shù)，只需要-0.5

String

使用toString(16)取隨機(jī)字符串

Math.random().toString(16).substring(2, 15);

.substring() 的第二個參數(shù)控制取多少位 (最多可取13位)

使用 split(0)

使用數(shù)字來做為 split 的分隔條件可以節(jié)省2字節(jié)

// --- before --- "alpha,bravo,charlie".split(","); // --- after --- "alpha0bravo0charlie".split(0);

使用.link() 創(chuàng)建鏈接
一個鮮為人知的方法，可以快速創(chuàng)建 a 標(biāo)簽

let b = `google`; // --- after --- let b = 'google'.link('www.google.com');

3. 使用 Array 來重復(fù)字符

// --- before --- for (let a = "", i = 7; i--;) a+= 0; // --- after --- let b = Array(7).join(0); // "0000000"let c = Array(7).join('La') // "LaLaLaLaLaLa" // ES6 let d = "0".repeat(7); // "0000000"

其他一些花里胡哨的操作

1. 使用當(dāng)前時間創(chuàng)建一個隨機(jī)數(shù)

// --- before --- let b = 0 | Math.random() * 100 // --- after --- let a; a = new Date % 100; // 兩位隨機(jī)數(shù) a = new Date % 1000; // 三位隨機(jī)數(shù) a = new Date % 10000; // 四位隨機(jī)數(shù)...依次類推 // 不要在快速循環(huán)中使用，因為毫秒可能沒有變化；

2. 一些可以替代 undefined 的操作

""._, 1.._ 和 0[0]

void 0 會比寫 undefined 要快一些

let d = void 0; console.log(d); // undefined

3. 使用 1/0 來替代 Infinity

// --- before --- [Infinity, -Infinity] // --- after --- [1/0, -1/0]

4. 使用 Array.length = 0 來清空數(shù)組

5. 使用 Array.slice(0) 實現(xiàn)數(shù)組淺拷貝

6. 使用 !+"v1" 快速判斷 IE8 以下的瀏覽器

谷歌瀏覽器：

IE 9(10，11)：

IE 8(7，6，5)：

7. for 循環(huán)條件的簡寫

for(let i = 0; i < arr.length; i++) {...} // --- after --- for(let i = arr.length; i--;) {...} // 注意 i-- 后面的分號別漏了

結(jié)尾

雖然上述操作能在一定程度上使代碼更簡潔，但會降低可讀性。在目前的大環(huán)境下，機(jī)器的性能損失遠(yuǎn)比不上人力的損失，因為升級機(jī)器配置的成本遠(yuǎn)低于維護(hù)晦澀代碼的成本，所以請謹(jǐn)慎使用這些“黑魔法”。就算要使用，也請加上注釋，畢竟，這世上還有很多“麻瓜”需要生存。

還有一些其他騷操作，可以參考這位大神總結(jié)的 《Byte-saving Techniques》，有些很常見，有些使用環(huán)境苛刻，這里就不一一列出了。

最后，來一個彩蛋，在控制臺輸入：

(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]

如果以后有人噴你的代碼，你就可以將此代碼發(fā)給他。

總結(jié)

以上是生活随笔為你收集整理的js byte数组_这么骚的 js 代码，不怕被揍么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。