作为一名前端开发人员，我通过这些 JavaScript 库极大地提高了自己的效率，比如，格式化日期、处理 URL 参数、调试移动网页等。
朋友们，今天我想和你们分享它们，希望这个实用的知识也能够帮助你提升工作效率。
那么，我们现在就开始吧。
作为一名开发人员，我厌倦了在 JavaScript 中操作日期和时间，因为它太麻烦了。例如，当我们想要打印当前的日期和时间时，我们需要编写一大段代码来完成。
constgetDate=()=>{constfillZero=(t)=>{returnt<10?`0${t}`:t}constd=newDate()constyear=d.getFullYear()constmonth=fillZero(d.getMonth()+1)constday=fillZero(d.getDate())consthour=fillZero(d.getHours())constminute=fillZero(d.getMinutes())constsecond=fillZero(d.getSeconds())return`${year}-${month}-${day}${hour}:${minute}:${second}`}console.log(getDate())// 2022-05-09 07:19:14
幸运的是，使用 Day.js 只需一行代码即可完成。
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))// 2022-05-09 07:19:14
注意：“Day.js 是一个极简主义 JavaScript 库，它通过与 Moment.js 兼容的 API 来解析、验证、操作和显示现代浏览器的日期和时间。如果你会使用 Moment.js，你就已经知道如何使用 Day.js。
地址：https://github.com/ljharb/qs
你是否经常需要获取“URL”参数？也许你会写一个这样的函数。
constformatSearch=()=>{window.location.search.slice(1).split('&').reduce((res,it)=>{const[key,value]=it.split('=')res[key]=valuereturnres},{})}// https://medium.com?name=fatfish&age=100constsearch=formatSearch()// { name: 'fatfish', age: 100 }// use qs.js to formatconstsearch2=qs.parse(window.location.search.slice(1))// { name: 'fatfish', age: 100 }
太棒了，但现在你有一个新功能要实现。请在“https://medium.com”中添加姓名和年龄两个参数。
// 1. url = https://medium.com// 2. params = { name: 'fatfish', age: 100 }constsplitSearch=(url,params)=>{constsearch=Object.entries(params).map((it)=>it.join('=')).join('&')return`${url}?${search}`}consturl='https://medium.com'constparams={name:'fatfish',age:100}console.log(splitSearch(url,params))// https://medium.com?name=fatfish&age=100// use qs.js to stringify urlconsole.log(`${url}?${qs.stringify(params)}`)// https://medium.com?name=fatfish&age=100
我们都知道在 JavaScript 中操作 cookie 并不是一件简单的事情，为了提高你的工作效率，我强烈推荐“js-cookie.js”，它是一个简单、轻量级的用于处理 cookie 的 JavaScript API。
Cookies.set('name','fatfish',{expires:10})Cookies.get('name')// fatfish
地址：https://github.com/lodash/lodash
我们看一下Lodash的介绍：Lodash 消除了处理数组、数字、对象、字符串等的麻烦，使 JavaScript 变得更容易。
Lodash 的模块化方法非常适合：迭代数组、对象和字符串操纵和测试值创建复合函数
// 1. Flatten the array_.flattenDeep([1,[2,[3,[4,[5]]]]])// [1, 2, 3, 4, 5]// 2. More convenient object traversal_.each({name:'fatfish',age:100},(val,key)=>{console.log(val,key)// fatfish name// 100 'age'})// 3. ...
地址：https://github.com/lodash/lodash
在移动设备上调试网页非常困难，但是有了“Vconsole”一切都会变得容易得多。我们可以通过扫描这个二维码或者点击网址来体验它的功能。
TIP：与chrome浏览器的devtools类似，Vconsole提供了以下功能来帮助您更好地调试网页.
日志：console.log|信息|错误|...
网络：XMLHttpRequest、Fetch、sendBeacon
元素：HTML 元素树
存储：Cookie、本地存储、会话存储
手动执行JS命令
自定义插件
以上就是我今天这篇文章想与你分享的全部内容，希望你能从中学习到新的知识。