JavaScript 那些寫出來會被同事揍的騷操作
Vue社區 今天
關注 Vue社區,回覆“加羣”
加入我們一起學習,天天進步
布拉德特皮
juejin.im/post/5e044eb5f265da33b50748c8
前言
曾經,我接手了一份大佬的代碼,裏面充滿了各種“騷操作”,還不加註釋那種,短短几行的函數花了很久才弄懂。
這世上,“只有魔法才能對抗魔法”,於是後來,翻閱各種“黑魔法”的祕籍,總結了一些比較實用的“騷操作”,讓我們裝X的同時,提升代碼運行的效率(請配合健身房一起使用)。
正文
位運算
JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3
,因爲精度的問題,導致所有的浮點運算都是不安全的,具體原因可詳見《0.1 + 0.2不等於0.3?爲什麼JavaScript有這種“騷”操作?》。
地址:https://juejin.im/post/5b90e00e6fb9a05cf9080dff
因此,之前有大牛提出,不要在 JS 中使用位運算:
Javascript 完全套用了 Java 的位運算符,包括按位與
&
、按位或|
、按位異或^
、按位非~
、左移<<
、帶符號的右移>>
和用0
補足的右移>>>
。這套運算符針對的是整數,所以對 JavaScript 完全無用,因爲 JavaScript 內部,所有數字都保存爲雙精度浮點數。如果使用它們的話,JavaScript 不得不將運算數先轉爲整數,然後再進行運算,這樣就降低了速度。而且"按位與運算符"&
同"邏輯與運算符"&&
,很容易混淆。
但是在我看來,如果對 JS 的運用達到爐火純青的地步,能避開各種“Feature”的話,偶爾用一下位運算符也無所謂,還能提升運算性能,畢竟直接操作的是計算機最熟悉的二進制。
位運算的原理可以參考這篇文章 《位運算符在JS中的妙用》
地址:https://juejin.im/post/5a98ea2f6fb9a028bb186f34
1. 使用左移運算符 <<
迅速得出2的次方
1 << 2 // 4, 即 2的2次方
1 << 10 // 1024, 即 2的10次方
// 但是要注意使用場景
a = 2e9; // 2000000000
a << 1; // -294967296
2. 使用 ^
切換變量 0 或 1
// --- before ---
// if 判斷
if (toggle) {
toggle = 0;
} else {
toggle = 1;
}
// 三目運算符
togle = toggle ? 0 : 1;
// --- after ---
toggle ^= 1;
3. 使用 &
判斷奇偶性
偶數 & 1 = 0
奇數 & 1 = 1
console.log(7 & 1); // 1
console.log(8 & 1) ; // 0
4. 使用 !!
將數字轉爲布爾值
所有非0
的值都是true
,包括負數、浮點數:
console.log(!!7); // true
console.log(!!0); // false
console.log(!!-1); // true
console.log(!!0.71); // true
5. 使用~
、>>
、<<
、>>>
、|
來取整
相當於使用了 Math.floor()
console.log(~~11.71) // 11
console.log(11.71 >> 0) // 11
console.log(11.71 << 0) // 11
console.log(11.71 | 0) // 11
console.log(11.71 >>> 0) // 11
注意 >>> 不可對負數取整
6. 使用^
來完成值交換
這個符號的用法前面提到過,下面介紹一些高級的用法,在 ES6 的解構賦值出來之前,用這種方式會更快(但必須是整數):
// --- before ---
let temp = a; a = b; b = temp; // 傳統,但需要藉助臨時變量
b = [a, a = b][0] // 藉助數組
// --- after ---
let a = 7
let b = 1
a ^= b
b ^= a
a ^= b
console.log(a) // 1
console.log(b) // 7
[a, b] = [b, a]; // ES6,解構賦值
7. 使用^
判斷符號是否相同
(a ^ b) >= 0; // true 相同; false 不相同
8. 使用^
來檢查數字是否不相等
// --- before ---
if (a !== 1171) {...};
// --- after ---
if (a ^ 1171) {...};
9. n & (n - 1)
,如果爲 0,說明 n 是 2 的整數冪
10. 使用 A + 0.5 | 0
來替代 Math.round()
如果是負數,只需要-0.5
String
1. 使用toString(16)
取隨機字符串
Math.random().toString(16).substring(2, 15);
.substring() 的第二個參數控制取多少位 (最多可取13位)
2. 使用 split(0)
使用數字來做爲 split 的分隔條件可以節省2字節
// --- before ---
"alpha,bravo,charlie".split(",");
// --- after ---
"alpha0bravo0charlie".split(0);
3. 使用.link()
創建鏈接
一個鮮爲人知的方法,可以快速創建 a 標籤
// --- before ---
let b = `<a herf="www.google.com">google</a>`;
// --- after ---
let b = 'google'.link('www.google.com');
3. 使用 Array
來重複字符
// --- 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. 使用當前時間創建一個隨機數
// --- before ---
let b = 0 | Math.random() * 100
// --- after ---
let a;
a = new Date % 100; // 兩位隨機數
a = new Date % 1000; // 三位隨機數
a = new Date % 10000; // 四位隨機數...依次類推
// 不要在快速循環中使用,因爲毫秒可能沒有變化;
2. 一些可以替代 undefined
的操作
1. ""._
, 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
來清空數組
5. 使用 Array.slice(0)
實現數組淺拷貝
6. 使用 !+"\v1"
快速判斷 IE8 以下的瀏覽器
谷歌瀏覽器:
IE 9(10,11):
IE 8(7,6,5):
7. for 循環條件的簡寫
// --- before ---
for(let i = 0; i < arr.length; i++) {...}
// --- after ---
for(let i = arr.length; i--;) {...} // 注意 i-- 後面的分號別漏了
結尾
雖然上述操作能在一定程度上使代碼更簡潔,但會降低可讀性。在目前的大環境下,機器的性能損失遠比不上人力的損失,因爲升級機器配置的成本遠低於維護晦澀代碼的成本,所以請謹慎使用這些“黑魔法”。就算要使用,也請加上註釋,畢竟,這世上還有很多“麻瓜”需要生存。
還有一些其他騷操作,可以參考這位大神總結的 《Byte-saving Techniques》,有些很常見,有些使用環境苛刻,這裏就不一一列出了。
地址:https://github.com/jed/140bytes/wiki/Byte-saving-techniques
最後,來一個彩蛋,在控制檯輸入:
(!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]]*~+[]]
如果以後有人噴你的代碼,你就可以將此代碼發給他。
❤️ 看完兩件事
如果你覺得這篇內容對你挺有啓發,我想邀請你幫我兩個小忙:
-
點個「在看」,讓更多的人也能看到這篇內容(喜歡不點在看,都是耍流氓 -_-)
-
關注公衆號「Vue社區」,每週重點攻克一個前端面試重難點,
公衆號後臺回覆「電子書」即可免費獲取 27本 精選的前端電子書!
回覆「100」免費獲取 100本 最棒的前端電子書!
微信掃一掃
關注該公衆號