分享一些超级有逼格的前端代码

大家好，欢迎来到IT知识分享网。

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.论如何最佳的让两个整数交换数值。

a ^= b;
b ^= a;
a ^= b;

(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);

;(_ => {try { document.querySelector('.ContentItem[name="135794447"] .VoteButton--up').click() } catch (e) { alert('e...网络错误')}})();