您现在的位置是:首页 > 文章列表 > JavaScript > JavaScript高逼格指南
JavaScript高逼格指南
想装逼?想用JavaScript逼格更高?让别人一眼看出你不简单呢?很期待别人在看完你的代码之后感叹一句“原来还可以这样写”呢?下面列出一些在JavaScript时的装逼技巧,也可说是非常实用的写法。
转Boolean类型
这个较为常用。
!!'a'//true
通过两个取反,可以强制转换为Boolean类型。
转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。
短路表达式,弃用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)
金钱格式化
//正则
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
阅读排行
-
基于 Vue 和 TS 的 Web 移动端项目总结
动端 web 最佳实践,基于vue-cli3[3]搭建的typescript[4]项目,可以用于 hybrid 应用或者纯 ...
-
Vue 的最佳使用方法
Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...
-
100行代码实现canvas文字粒子效果,简单易懂。
canvas是使用JavaScript程序绘图(动态生成),相比于css,可以更加简单方便的绘制细节的样式...
-
10 种跨域解决方案
说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...
-
一文彻底弄懂Event Loop!
我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...
-
FastClick是什么?一文搞懂原理解析
为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...
-
提升CSS技能的20个小技巧
随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...
-
生活中常用正则表达式
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...
本栏推荐
-
一文彻底弄懂Event Loop!
我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来...
-
10 种跨域解决方案
说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着...
-
生活中常用正则表达式
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来...
-
100行代码实现canvas文字粒子效果,简单易懂。
canvas是使用JavaScript程序绘图(动态生成),相比于css,可以更加简单方便的绘制细节...
官方微信
