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 数组操作代码集锦
Apr 28 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
五段实用的js高级技巧
Dec 20 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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出错界面
2006/10/09 PHP
DedeCms模板安装/制作概述
2007/03/11 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
python 输出所有大小写字母的方法
2019/01/02 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
网络工程师的自我评价
2013/10/02 职场文书
产品销售员岗位职责
2013/12/18 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
婚礼主持词
2014/03/13 职场文书
诚信考试倡议书
2014/04/15 职场文书
出国留学单位推荐信
2015/03/26 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏