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，然后粘贴这段代码，然后回车。
/*
´∇｀
*/ [‘_’]; o=(ﾟｰﾟ) =_=3; c=(ﾟΘﾟ) =(ﾟｰﾟ)-(ﾟｰﾟ); (ﾟДﾟ) =(ﾟΘﾟ)= (o^_^o)/ (o^_^o);(ﾟДﾟ)={ﾟΘﾟ: ‘_’ ,ﾟωﾟﾉ : ((ﾟωﾟﾉ==3) +’_’) [ﾟΘﾟ] ,ﾟｰﾟﾉ :(ﾟωﾟﾉ+ ‘_’)[o^_^o -(ﾟΘﾟ)] ,ﾟДﾟﾉ:((ﾟｰﾟ==3) +’_’)[ﾟｰﾟ] }; (ﾟДﾟ) [ﾟΘﾟ] =((ﾟωﾟﾉ==3) +’_’) [c^_^o];(ﾟДﾟ) [‘c’] = ((ﾟДﾟ)+’_’) [ (ﾟｰﾟ)+(ﾟｰﾟ)-(ﾟΘﾟ) ];(ﾟДﾟ) [‘o’] = ((ﾟДﾟ)+’_’) [ﾟΘﾟ];(ﾟoﾟ)=(ﾟДﾟ) [‘c’]+(ﾟДﾟ) [‘o’]+(ﾟωﾟﾉ +’_’)[ﾟΘﾟ]+ ((ﾟωﾟﾉ==3) +’_’) [ﾟｰﾟ] + ((ﾟДﾟ) +’_’) [(ﾟｰﾟ)+(ﾟｰﾟ)]+ ((ﾟｰﾟ==3) +’_’) [ﾟΘﾟ]+((ﾟｰﾟ==3) +’_’) [(ﾟｰﾟ) – (ﾟΘﾟ)]+(ﾟДﾟ) [‘c’]+((ﾟДﾟ)+’_’) [(ﾟｰﾟ)+(ﾟｰﾟ)]+ (ﾟДﾟ) [‘o’]+((ﾟｰﾟ==3) +’_’) [ﾟΘﾟ];(ﾟДﾟ) [‘_’] =(o^_^o) [ﾟoﾟ] [ﾟoﾟ];(ﾟεﾟ)=((ﾟｰﾟ==3) +’_’) [ﾟΘﾟ]+ (ﾟДﾟ) .ﾟДﾟﾉ+((ﾟДﾟ)+’_’) [(ﾟｰﾟ) + (ﾟｰﾟ)]+((ﾟｰﾟ==3) +’_’) [o^_^o -ﾟΘﾟ]+((ﾟｰﾟ==3) +’_’) [ﾟΘﾟ]+ (ﾟωﾟﾉ +’_’) [ﾟΘﾟ]; (ﾟｰﾟ)+=(ﾟΘﾟ); (ﾟДﾟ)[ﾟεﾟ]=’\\’; (ﾟДﾟ).ﾟΘﾟﾉ=(ﾟДﾟ+ ﾟｰﾟ)[o^_^o -(ﾟΘﾟ)];(oﾟｰﾟo)=(ﾟωﾟﾉ +’_’)[c^_^o];(ﾟДﾟ) [ﾟoﾟ]=’\”‘;(ﾟДﾟ) [‘_’] ( (ﾟДﾟ) [‘_’] (ﾟεﾟ+(ﾟДﾟ)[ﾟoﾟ]+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ ((o^_^o) – (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+((ﾟｰﾟ) + (ﾟΘﾟ))+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟｰﾟ)+ ((o^_^o) – (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟΘﾟ)+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ ((ﾟｰﾟ) + (o^_^o))+ (ﾟДﾟ)[ﾟεﾟ]+((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟｰﾟ)+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(oﾟｰﾟo)+ ((ﾟｰﾟ) + (o^_^o))+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ) .ﾟｰﾟﾉ+ ((o^_^o) – (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(oﾟｰﾟo)+ ((ﾟｰﾟ) + (o^_^o))+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ) .ﾟｰﾟﾉ+ ((o^_^o) – (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(oﾟｰﾟo)+ ((ﾟｰﾟ) + (ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ) [ﾟΘﾟ]+ ((o^_^o) – (ﾟΘﾟ))+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟｰﾟ)+ ((o^_^o) – (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟoﾟ]) (ﾟΘﾟ)) (‘_’);
当时我就吓尿了，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
今天的文章分享一些超级有逼格的前端代码分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/56262.html
