下面就是具体的写法,建议大家逐个测试一下,加深印象
转Boolean类型
这个较为常用。
!!'a'//true
通过两个取反,可以强制转换为Boolean类型。
!!是将表达式强制转化为bool值的运算,运算结果为true或false,表达式是什么值,结果就是对应的bool值,不再取非。
不是取非再取非的意思!!!
!!false=false; 要注意false和“false” 的区别!!!!!
!!"false"=true;
!!true=true;
!!(NaN || undefined || null || 0 || ' ')=false;
转Number类型
String转化为Number;日期输出时间戳。
+'45'//45
+new Date//13位时间戳
会自动转化为Number类型的。日期取时间戳不用new Date().getTime()。
parseInt
parseInt这个函数太普通了,怎么能装逼。答案是~~,这种方法还可以将字符串转换成数字类型。向下取整。
~~3.14159//3
~~'5.678'//5
-2.33 | 0 //-2
2.33 0 //2
原理是~是一个叫做按位非的操作,会返回数值的反码,两次取反就是原数。|为位运算符,两个位只要有一个为1,那么结果都为1,否则就为0。运算符执行有符号右移位运算。都是二进制操作。 原因在于JavaScript中的number都是double类型的,在位操作的时候要转化成int。
Hex
十六进制操作。其实就是一个Array.prototype.toString(16)的用法
看到这个词脑袋里冒出的肯定是CSS的颜色。
做到随机的话可以这样
(~~(Math.random()*(1<<24))).toString(16)
底下的原文链接非常建议去读一下,后三个技巧都是在那里学到的。
«
左移操作。这个操作特别叼。一般得玩 C 玩得多的,这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 "htmlcode">
if () { // ... } else if () { // ... } else { // ... }
用 || 和 &&来简化if-else 。有时候用 !! 操作符也能简化if-else模式。例如这样:
let a = b || 1;//b为真,a=b;b为假,a=1; let c = b && 1;//b为真,c=1;b为假,c=b; // 使用!!符号 let isValid = !!(value && value !== 'error');
“!”是取反操作,两个“!”自然是负负得正了。比较常用的是||。
另外一种undefined
let data = void 0; // undefined
void 运算符 对给定的表达式进行求值,然后返回 undefined。
那为什么要用void 0,不直接undefined呢? undefined在javascript中不是保留字。因此在IE5.5~8中我们可以将其当作变量那样对其赋值(IE9+及其他现代浏览器中赋值给undefined将无效)。采用void方式获取undefined更准确。
保留指定位数的小数点
let num = 2.443242342; num = num.toFixed(4); //"2.4432"
注意, toFixed() 方法返回的是字符串而不是一个数字。
单行写一个评级组件
let rate = 3; "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);//"★★★☆☆"
slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分stringObject.slice(start,end)
金钱格式化
//正则 let cash = '1234567890' cash.replace(/\B("1,234,567,890" //非正则的优雅实现 function formatCash(str) { return str.split('').reverse().reduce((prev, next, index) => { return ((index % 3) "1,234,567,890"
非正则的方法,先把字符串转成了数组,反转了一下变成了[0,9,8,7,6,5,4,3,2,1]。再对新的数组进行reduce操作,数组元素位置除3取余,是3的倍数的位置就增加',',最后返回累加的字符串。
标准JSON的深拷贝
let a = { a1: 1, b1: { c: 1, d: 2 } }; let b=JSON.parse(JSON.stringify(a)); b;//{a1: 1, b1: {…}}
不考虑IE的情况下,标准JSON格式的对象蛮实用,不过对于undefined和function的会忽略掉。
数组去重
阿里面试官,喜欢问这个问题。
let array=[1, "1", 2, 1, 1, 3]; //拓展运算符(...)内部使用for...of循环 [...new Set(array)];//[1, "1", 2, 3\] //利用Array.from将Set结构转换成数组 Array.from(new Set(array));//[1, "1", 2, 3\]
传统的方法,循环遍历:排序sort()后前一下与后一个比较==;在数组中用indexOf判断,利用includes,利用filter;这些方法感觉都过时了,还是用ES6中利用Set去重比较牛。
取数组中的最大值和最小值
Math.max方法可以求出给定参数中最大的数。
Math.max('1','2','3.1','3.2');//3.2 Math.min(1,0,-1);//-1
但如果是数组,就不能这样调用了。此时就用到了apply方法。Function.apply()是JS的一个OOP特性,一般用来模拟继承和扩展this的用途。所有函数都有apply(作用域链,参数)这个方法,当作用域链为null时,默认为上文,这个函数的“参数”,接收一个数组。
let arr = ['1','2','3.1','3.2',0,-1]; //用apply方法 Math.max.apply(null, arr);//3.2 Math.min.apply(Math, arr);//-1 //用拓展运算符 Math.max(...arr);//3.2 Math.min(...arr);//-1
IIFE
这个其实非常有实用价值,不算是装逼。只是其他语言里没有这么玩的,给不太了解js的同学看那可牛逼大了。
(function(arg) { // do something })(arg)
实用价值在于可以防止全局污染。不过现在随着ES2015的普及已经没什么必要用这个了,我相信五年之后,这种写法就会逐渐没落。
自己干五年,在实习生面前装逼用也是蛮不错的嘛~
BTW
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })
翻译成正常语言就是这样的
Array.prototype.forEach.call(document.querySelectorAll('*'), dom => dom.style.outline = `1px solid #${parseInt(Math.random() * Math.pow(2,24)).toString(16)}`)
Event
事件响应前端肯定都写烂了,一般来说如何写一个计数器呢?
var times = 0 var foo = document.querySelector('.foo') foo.addEventListener('click', function() { times++ console.log(times) }, false)
好像是没什么问题哦,但是!变量times为什么放在外面,就用了一次放在外面,命名冲突了怎么办,或者万一在外面修改了怎么办。
这个时候这样一个事件监听代码就比较牛逼了
foo.addEventListener('click', (function() { var times = 0 return function() { times++ console.log(times) } })(), false)
怎么样,是不是立刻感觉不一样了。瞬间逼格高了起来!
通过创建一个闭包,把times封装到里面,然后返回函数。这个用法不太常见。
以上就是JavaScript 装逼指南(js另类写法)的详细内容,更多关于js装逼写法的资料请关注其它相关文章!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]