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

分享一些超级有逼格的前端代码1.浮点数取整。一般我们第一反应是Math.floor。而其他3中写法很牛掰啊有木有,你这样写别人看到第一反应是what the fuck,然而看到运行结果之后就会变成握草这太牛逼了。 2.报错处理的正确方式。 看完这段代码不得不说666,虽然很可能你这么写了之后报错了然后领导疯

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

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,然后粘贴这段代码,然后回车。

゚ω゚ノ= /`m´)ノ ~┻━┻ /
/*
´∇`
*/ [‘_’]; 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

(0)
编程小号编程小号
上一篇 2023-08-26 22:11
下一篇 2023-08-26 22:30

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注