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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
在Ubuntu上安装最新版本的Node.js
Jul 14 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
JS模拟实现京东快递单号查询
Nov 30 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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函数
2008/10/03 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php fsockopen解决办法 php实现多线程
2014/01/20 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
php输出形式实例整理
2020/05/05 PHP
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Django 用户认证组件使用详解
2019/07/23 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python名片管理系统开发
2020/06/18 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
计算机专业个人简短的自我评价
2013/10/23 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
怎样写辞职信
2015/02/27 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL