各种业务开发都离不开对数据的处理,然而遇到的很多数据都是不好处理的。这个时候就需要寻求搜索引擎的帮助。这种方法效率是非常低下的,而且根据作者的个性不能保证其对自己的口味。因此这篇文字包含了一份 JS 常用业务函数手册,例如时间格式的处理、用的是哪个手机浏览器,手机号、邮箱的验证,以此来提高你的开发效率
常用 JS 函数
1.时间格式化
界面展示的时间千变万化, 所以一个处理时间的函数,它的重要性就不言而喻了。
export
formatDate 接受俩个参数, oldDate 类型可以是 Date,String,Number。因为现在用时间戳传递时间真的是蛮多,也蛮方便的,而JS 是一门弱类型语言,所以我将 String 和 Number 类型的数据统一当做时间戳来处理。 fmt 是格式化的类型:yyyy-MM-dd hh:mm,其中的 yyyy | MM | dd | hh | mm 是分别匹配 年 | 月 | 日 | 时 | 分 的关键字。其中的连字符是可以随意替换的,只展示年月将其他关键字去掉即可。举几个例子:
- yyyy年MM月dd -> 2019年09月7日
- hh分mm秒 -> 16分53秒
2.以“天”为单位获取响应的时间戳
通常都会获取三天前的时间,12 个以内的数据,24 小时以内的数据,因此我弄了一个以天为单位获取时间戳的函数
export
时间为正可以获得未来的时间,时间为负可以获得过去时间。举个例子
- 12 个小时之前的时间 -> setDate(-.5)
- 24 个小时之前的时间 -> setDate(-1)
- 三天后的时间 -> setDate(3)
3.获取 URL 中的参数
这个需求在三大框架的时代应用貌似不多了,不过面试中问的还是蛮多的,了解一下是好的
简单实现
var
看了一下浏览器支持情况还是蛮好的,除了万恶的 ie
复杂实现
function
举个例子: http://xuyuechao.top?a=3&b=5&c=8888
- getUrlParams('a') -> 3
- getUrlParams('b') -> 5
- getUrlParams('c') -> 8888
4.手机端判断浏览器类型
BrowserInfo
目前主要支持 安卓 & 苹果 & ipad & 微信 & 支付宝 & 是否是手机端。
5. 数组降维
二维数组
let
多维数组降维
let
flat 有兼容性问题,手机端问题不大。浏览器端不兼容 edge。填 Infinity 可展开任意深度的数组
6.深拷贝
使用变量 a 拷贝对象 b,改变 a 中的值 b 中的值也会跟着改变,这叫做浅拷贝。要想让 a 独立于 b 就需要深拷贝
简易处理
function
既然是建议处理就有他的不足,上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函数和 undefined 的因此碰到这些情况会缺失,但是已经能够满足大部分情况了
复杂处理
复杂处理就需要采用递归的方式了
function
7. 防抖 & 节流
防抖和节流属于高阶技巧,业务中比较多见的场合也就是搜索内容改变提示信息。即使不加也也不一定能看出区别,但是加了新手维护代码可能会崇拜你哦。
防抖
function
节流
function
8. 获取数组极值
function
9.判断小数是否相等
function
用户输入的是十进制数字,计算机保存的是二进制数。所以计算结果会有偏差,所以我们不应该直接比较非整数,而是取其上限,把误差计算进去。这样一个上限称为 machine epsilon,双精度的标准 epsilon 值是 2^-53 (Math.pow(2, -53))
总结:
文中的代码可能不一定是最优代码,要是你有更好的代码欢迎评论。
参考资料:
https://www.jianshu.com/p/c8b86b09daf0
https://www.cnblogs.com/wxydigua/p/3314274.html
https://blog.csdn.net/u014607184/article/details/52749332
https://rockjins.js.org/2017/02/15/2017-02-15-javascript-skill/
一些让 JS 更优雅 / 易读的小技巧
对于工程师来说,代码是写一遍、修改很多遍、阅读更多遍的重要产出,可读性至关重要,所以高可读代码的重要性不言而喻。
1.用对象代替 switch / if
公共内容
这里只是提供了一种方式,具体的使用场景还是要你自己判断。我用的比较多的一个场景是状态映射中文含义,例如支付状态通常获取的是 1, 2,3,4 这种值,但是列表要求显示相应的中文状态 未支付 | 支付中 | 已退款等等
2. || 和 && 的妙用
// 场景 1
上面是 || 的用法,也叫做短路处理。常见于 if 条件中,但是他其实也可以直接用于语句中。当第一个参数为 true 就会取第一个参数的值,当第一个参数不为 true 就会取第二个参数的值。&& 正好与 || 相反。第一个参数 为 true 会取第二个参数的值
总结
这一部分就只想到了俩个,优化空间蛮大的。希望多才多艺的网友纷纷评论献计让文章无比壮大起来
全文总结
感觉对知识的梳理和归纳又提高了一步,同时又能少加会班了。不知不觉一个月过去了也写了四篇提高编程开发效率的文章了,文章也有很多不足的地方,为了大家的后期讨论方便,可以加我微信,带你进群,大家一起讨论研究,快乐成长。
![56b4b6eab70a96c9e94f68a19a43cbd4.png](https://i-blog.csdnimg.cn/blog_migrate/2c3fa355d1445ba7e4a112e0eae9b9f1.jpeg)