1.浮點數取整。一般我們第一反應是Math.floor。而其他3中寫法很牛掰啊有木有，你這樣寫別人看到第一反應是what the fuck，然而看到運行結果之后就會變成握草這太牛逼了。
const x = 123.4545; x >> 0; // 123 ~~x; // 123 x | 0; // 123 Math.floor(x); // 123
x ^ 0 //123
2.報錯處理的正確方式。
try { XXXXX } catch(e) { window.open("https://stackoverflow.com/search?q=[js]+" e.message); }
看完這段代碼不得不說666，雖然很可能你這么寫了之后報錯了然后領導瘋狂罵人。原寫法是直接在當前頁面打開，更加驚人，是肯定會被罵的。燃鵝，這種寫法對於開始是比較友好的，因為報錯了之后就自動打開搜索報錯原因的頁面了。而且對於其中[js]+的用法，筆者確實也是第一次遇到，不得不說漲姿勢了。
3.字符轉碼。打開你們的瀏覽器（PC），按F12，切換到console，然后粘貼這段代碼，然后回車。
當時我就嚇尿了，what the fuck。后來了解到，原來是字符轉碼。附地址http://utf-8.jp/public/aaencode.html
4.一行代碼實現評級組件。
1 "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
不得不說非常的6，看到代碼之后有種恍然大悟的感覺。rate是幾分，就是幾星。對於擴展，比如支持小數但是只取整數，四舍五入或者向下取整，支持小數，顏色定制，跟隨鼠標等等可以有很豐富的擴展。
擴展原理：支持小數其實很簡單，先用☆☆☆☆☆當背景，然后把★★★★★放在上層，通過控制width+overflow就可以輕松支持小數字，不僅僅是2.5, 3.8也支持 畢竟我們寬度用em單位
1 html 2 <div>☆☆☆☆☆</div> 3 4 css 5 div { 6 position:relative; 7 } 8 div::after{ 9 content:'★★★★★'; 10 position:absolute; 11 top:0; 12 left:0; 13 width:2.5em; 14 overflow: hidden; 15 } 16 17 增加動畫和顏色 18 div { 19 position:relative; 20 color:#f5222d; 21 } 22 div:after{ 23 content:'★★★★★'; 24 position:absolute; 25 top:0; 26 left:0; 27 width:0; 28 overflow: hidden; 29 transition: width 2s; 30 -moz-transition: width 2s; 31 -webkit-transition: width 2s; 32 -o-transition: width 2s; 33 34 } 35 div:hover:after{ 36 width:3.5em; 37 }
附一份網上的封裝的組件地址
https://github.com/shengxinjing/tiny-rate
https://github.com/shengxinjing/vue-tiny-rate
https://github.com/shengxinjing/react-tiny-rate
后期本人會封裝一份angular的組件。
5.js1k。顧名思義就是在1k以內的代碼量范圍實現的一些效果。
官網：https://js1k.com/
6.+"B"妙用。
"B" + "a" + + "B" + "a" // > BaNaNa
+"B"是將字符轉換為數字。
7.寫簡歷。
暫時沒有跳槽打算。醞釀寫法中。
8.寫游戲。
筆者也寫過一個接豆豆的游戲，可以設置時間、分數、速度、方向、色彩等等，奈何前公司對於信息保密過於嚴謹，根本帶不出去代碼。后期有時間的時候會補上一份。
9.全css實現logo。
筆者也試着使用css畫了一只雞，沒錯，是一只雞，奈何代碼同上。
筆者的收藏：
http://www.shejidaren.com/pure-css-icons.html
還有這里
https://blog.csdn.net/linghao00/article/details/8020477
其中BP那個筆者很是喜歡。
領導快要催我改bug了，這里7,8,9就先不細說了。
10.從數組中找出符合條件的子數組。
static findChild(query) { return this.all().filter(item => Object.keys(query).every(key => item[key] === query[key])); } // this.all() 會取出數組中的所有數據
11.[] == ![]
結果為true。很神奇有木有。
原因解釋：
我們都知道 JavaScript 中唯一一個非自反（non-reflexive）的值是 NaN，而在這里乍看之下，普通的字面量空數組居然也是“非自反”，豈不矛盾？
其實現實是這樣的：
1. 等號右邊有 ! ，優先級比 == 更高，優先計算右邊的結果。 [] 為非假值，所以右邊的運算結果為 false，即:[] ==> false
2. == 的任意一邊有 boolean 類型的值時先把這個值轉換成 number 類型，右邊轉換成了 0 ，即：
Number(false) ==> 0
3. == 的兩邊分別是 number 和 object 類型的值時，把 object 轉換成 number 類型，需要對 object 進行 ToNumber 操作，即：
Number([].valueOf()) ==> 0
至此，兩邊都變成了0，所有0 == 0是true附，一些常見的假值
if (false) if (null) if (undefined) if (0) if (NaN) if ('') if ("") if (document.all)
一些常見的真值
if (true) if ({}) if ([]) if (42) if ("foo") if (new Date()) if (-42) if (3.14) if (-3.14) if (Infinity) if (-Infinity)
12.js小數bug。
10/3 //3.3333333333333335 8/3 //2.6666666666666665
筆者是很早前有一次偶然發現的，然后去網上查了一下，有很多很多這種類似的bug。其原因就是，我們現實中使用的是10進制，而計算機本身是二進制，所有對於計算時內存就會有這種問題。
解決方案之一：取兩位小數Math.round(num*100)/100;
類似的還有
0.1 + 0.2 != 0.3
https://www.zhihu.com/question/49812700
13.將n維數組破開成一維(string-array)。
var foo0 = [1, [2, 3], [4, 5, [6,7,[8]]], [9], 10]; var foo1 = foo0.join(',').split(',');
14.void 0和undefined。
https://link.zhihu.com/?target=http%3A//stackoverflow.com/questions/5716976/javascript-undefined-vs-void-0
15.++[[]][+[]]+[+[]] == '10'
與11同理。
http://justjavac.com/javascript/2012/04/05/you-dont-know-javascript.html
16.一些收集。
http://www.css88.com/archives/8488
http://www.css88.com/archives/8748
17.委婉地表達對方SB和自己NB。
(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]
//sb
([[]]+)[+!![]]+(+{})[!+[]+!!]
//nb
NB這個，報錯了，回頭有時間了再研究學習。原理與11,15類似，都是js的運算優先級與類型轉換的知識。
http://www.jfh.com/jfperiodical/article/3224
從今以后，如果再有人看不起前端，我就可以把這兩行代碼發給他看了。
18.檢測頁面css結構。
[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
太風騷了有木有。
原理：https://sdk.cn/news/3025
19.論如何優雅的取隨機字符串。
Math.random().toString(16).substring(2) // 13位 Math.random().toString(36).substring(2) // 11位
20.(10)["toString"]() === "10"
(10)["toString"]() === "10"
https://link.zhihu.com/?target=http%3A//qylanikin.lofter.com/post/1cbb3f55_cc787c9
21.匿名函數自執行。
這么多寫法你選擇哪一種？我選擇死亡。 ( function() {}() );( function() {} )();[ function() {}() ];~ function() {}();! function() {}();+ function() {}();- function() {}();delete function() {}();typeof function() {}();void function() {}();new function() {}();new function() {};var f = function() {}();1, function() {}();1 ^ function() {}();1 > function() {}();// ...
22.金錢格式化。
用正則魔法實現： var test1 = '1234567890' test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
非正則的優雅實現： function formatCash(str) { return str.split('').reverse().reduce((prev, next, index) => { return ((index % 3) ? next : (next + ',')) + prev }) }
23.將對方的精神搞崩潰。
while (1) { alert('牛逼你把我關了啊') }
哈哈，至於效果，自己運行一下就知道了。筆者曾經也用bat寫了一個無限彈窗的腳本，然后發到同事群里了，然后某個美女新同事就打開了，然后他的機器就黑掉了，並且那天沒能啟動起來。。。在此再次說聲抱歉，因為我只是構思這么寫甚至自己都沒敢試，結果還真的成功了。
24.機智的障眼法。
<a href="javascript:alert('清除成功');">清除緩存</a>
25.逗號運算符。
var a = 0; var b = ( a++, 99 ); console.log(a); // 1 console.log(b); // 99
原理很簡單，不解釋。
26.論如何最佳的讓兩個整數交換數值。
常規辦法：
var a=1,b=2;
a += b;
b = a - b;
a -= b;
缺點也很明顯，整型數據溢出，對於32位字符最大表示數字是2147483647，如果是2147483645和2147483646交換就失敗了。
黑科技辦法：
a ^= b; b ^= a; a ^= b;
27.聖誕樹。
(n => { [...Array(n - 2)].map((_, i) => 3 + i).forEach(j => { [...Array(j)].map((_, k) => 1 + k).forEach(x => { let sc = 2 * x - 1, spc = (2 * n - 1 - sc) / 2; console.log(" ".repeat(spc) + "*".repeat(sc)); }); }); console.log(" ".repeat(n - 1) + "*"); console.log("~".repeat(n - 1) + "*~#~~###~~~~##~"); })(5);
記得大一的時候偶然有人轉發的一封郵件，里邊就有一個聖誕樹掛件，還有音樂，很是漂亮精致，至今還在我的電腦里保存。后來查了很多類似的，但是沒有一個比這個精美的，自己也試着做了一些，都是很簡單很簡單的命令行。
28.手動觸發元素的click方法。
;(_ => {try { document.querySelector('.ContentItem[name="135794447"] .VoteButton--up').click() } catch (e) { alert('e...網絡錯誤')}})();
上上周測試妹子來找我幫忙搞一個組件的自動化，我就是用的這種方法。
類似的東西還有很多很多，有些比較實用，大家可以拿出小本本記下來，當然如果你使用其中的惡作劇惡搞了同事或者領導，千萬不要說跟我學的奧。
統計字符串中相同字符出現的次數。
以下留存：
https://www.zhihu.com/question/46943112
https://github.com/jawil/blog/issues/24
https://mp.weixin.qq.com/s/Z-Vcfl1D5oKMLliGTVhE1g