1. 首页
  2. 前端进阶

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模式。例如这样:

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识,你想要的,在这里都能找到


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

作者:playboy5566
链接:https://segmentfault.com/a/1190000022588661

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:JavaScript 装逼指南

链接:https://www.javascriptc.com/4030.html

« JavaScript的数组常用的方法(上)
基于 Flutter+Dart 聊天实例 | Flutter 仿微信界面聊天室»
Flutter 中文教程资源

相关推荐

QR code