1.浮点数取整。一般我们第一反应是Math.floor。而其他3中写法很牛掰啊有木有,你这样写别人看到第一反应是what the fuck,然而看到运行结果之后就会变成握草这太牛逼了。

const x = 123.4545;
x >> 0; // 123
~~x; // 123
x | 0; // 123
Math.floor(x); // 123x ^ 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://www.cnblogs.com/ljwsyt/p/9516416.html

分享一些超级有逼格的前端代码相关推荐

  1. html懒人编辑器,前端老司机分享——五个前端代码编辑器

    工欲善其事,必先利其器.但我最开始接触网页的时候,人们普遍认为能用记事本写HTML和CSS的才是大神. 那时也没有前端这一说法,随着网页越来越复杂用记事本的开发效率就太低了,也就有了前端代码编辑器的出 ...

  2. [Client]前端代码规范 及 最佳实践

    前端代码规范 及 最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践 分享到: 62 本文作者: 伯乐在线 -  ...

  3. 前端代码标准最佳实践:CSS篇

    上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...

  4. 网易智慧企业 Node.js 实践(2)| 平滑发布和前端代码

    健康检查 前文提到我们通过网关把流量转发到 Node 应用,那网关是如何确定 Node 应用的可用性呢? 如果 Node 应用在发布的过程中也把流量转发过来,就会导致请求失败,所以我们的网关会对 No ...

  5. 前端代码是怎样智能生成的?

    简介: 作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在 ...

  6. 用500行纯前端代码在浏览器中构建一个Tableau

    2019独角兽企业重金招聘Python工程师标准>>> 在Gartner最新的对商务智能软件的专业分析报告中,Tableau持续领跑.Microsoft因为PowerBI表现出色也处 ...

  7. 前端实现照片选取范围上传_前端代码是怎样智能生成的?看看大佬怎么说

    作者|莱斯 出品|阿里巴巴新零售淘系技术部 导读: 作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.3 ...

  8. opencv自然背景下交通标志形状分类c++代码_前端革命时刻:前端代码是怎样智能生成的-图像分离篇

    作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...

  9. 专家系统代码实现_前端代码是怎样智能生成的 - 语义化篇

    作为阿里经济体前端委员会四大技术方向之一,前端智能化项目经历了 2019 双十一的阶段性考验,交出了不错的答卷,天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成.在此期间研 ...

最新文章

  1. 大规模服务设计部署经验谈
  2. SpringBoot--Druid多数据源配置
  3. 【NOIP2012模拟10.25】旅行
  4. create react app 在start后不清空terminal
  5. php=与-,谈谈PHP中的 -、= 和 :: 符号
  6. Swift之深入解析构造过程和析构过程
  7. P5039 [SHOI2010]最小生成树(网络流)
  8. mysql 导致iis 假死_php使用MySql函数导致Apache(iis)崩溃的问题解决方案
  9. html 请求体 响应体,Http协议抓包详解
  10. 前端大牛们都学过哪些东西
  11. xrd连续扫描和步进扫描_XRD样品制备与分析
  12. c#获取电脑硬件信息参数说明(声卡篇 Win32_SoundDevice )
  13. Spring 事务传播行为
  14. 博客文章分类与标签的区别与联系
  15. echarts 旭日图sunburst
  16. Error 1718. File was rejected by digital signature policy错误,文件的数字签名被你的本地软件策略给拒绝了,来看看解决方法
  17. 如何去除搜索引擎上的广告
  18. Redis高可用架构
  19. Fabric.js 图形标注
  20. Awesome font icon viewer

热门文章

  1. 重要的, 需要记下来的
  2. 0.2 - 机械加工工艺-----机加工设备及表面处理
  3. 游戏项目和开源项目调研
  4. 解决python利用pip安装第三方库失败的问题
  5. 画春天的景色计算机教案,幼儿园中班教案《画春天》含反思
  6. 删除.sys、.dll流氓文件
  7. 印象中的tcp?你可能一直都理解错了|开发者的必备技能
  8. Java使用freemarker生成word文件
  9. html img和背景图处理图片不拉伸_img固定宽度和高度,不规则图片变形问题的解决方法...
  10. MD5是什么?如何使用MD5?