高逼格js

[MRlijiawei]

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

☆☆☆☆☆

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.机智的障眼法。

清除缓存
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

jawil/blog#24

https://mp.weixin.qq.com/s/Z-Vcfl1D5oKMLliGTVhE1g