JavaScript 装逼指南(js另类写法)


Posted in Javascript onMay 10, 2020

下面就是具体的写法,建议大家逐个测试一下,加深印象

转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()。

JavaScript 装逼指南(js另类写法)

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 玩得多的,这个操作会懂一些。一般半路出家的前端码农可能不太了解(说的是我 ☹)。
这个也是二进制操作。将数值二进制左移
解释上面的1<<24的操作。
其实是1左移24位。000000000000000000000001左移24位,变成了1000000000000000000000000
不信?
试着在console粘贴下面的代码

parseInt('1000000000000000000000000', 2) === (1 << 24)

其实还有一种更容易理解的方法来解释

Math.pow(2,24) === (1 << 24)

因为是二进制操作,所以速度是很快的。

短路表达式,弃用if-else

反面示例:

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)

JavaScript 装逼指南(js另类写法)

金钱格式化

//正则 
let cash = '1234567890' 
cash.replace(/\B(?=(\d{3})+(?!\d))/g, ',');//"1,234,567,890" 
//非正则的优雅实现 
function formatCash(str) { 
 return str.split('').reverse().reduce((prev, next, index) => { 
 return ((index % 3) ? next : (next + ',')) + prev 
 }) 
} 
formatCash(cash);//"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装逼写法的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
mailto的使用技巧分享
Dec 21 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
js中!和!!的区别与用法
May 09 #Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 #Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 #Javascript
js根据后缀判断文件文件类型的代码
May 09 #Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 #Javascript
JS原形与原型链深入详解
May 09 #Javascript
JavaScript中的this妙用实例分析
May 09 #Javascript
You might like
PHP 裁剪图片
2021/03/09 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
django使用xadmin的全局配置详解
2019/11/15 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
图书室标语
2014/06/21 职场文书
初中教师个人总结
2015/02/10 职场文书
北京导游词
2015/02/12 职场文书
给病人的慰问信
2015/03/23 职场文书
公司放假通知范文
2015/04/14 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
在python中实现导入一个需要传参的模块
2021/05/12 Python
Django中session进行权限管理的使用
2021/07/09 Python