您现在的位置是：首页 > 文章列表 > JavaScript > JavaScript高逼格指南

JavaScript高逼格指南

linds 2020-08-10 11:00 共159人围观
javascript js
简介 想装逼？想用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

上一篇：生活中常用正则表达式

下一篇：10 种跨域解决方案

相关文章

阅读排行

本栏推荐

官方微信