4个实用JS库99%的人可能都不知道

news/2025/4/26 13:29:01/

前言

作为一名前端开发者,我通过这些JavaScript库大大提高了自己的效率,比如格式化日期、处理URL参数、调试手机网页等。因此,我想将这些好用的库分享给你们,也希望可以帮助到你们。

1.使用“Day.js”格式化日期和时间

地址:https://day.js.org/en/

作为一名开发人员,我受够了在 JavaScript 中操作日期和时间,因为它太麻烦了。

比如我们要打印当前的日期和时间,就需要写一大段代码来完成。

const getDate = () => {const fillZero = (t) => {return t < 10 ? `0${t}` : t}const d = new Date()const year = d.getFullYear()const month = fillZero(d.getMonth() + 1)const day = fillZero(d.getDate())const hour = fillZero(d.getHours())const minute = fillZero(d.getMinutes())const second = 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,你也不会觉得很难。”

2.使用“qs.js”格式化URL参数

地址:https://github.com/ljharb/qs

我们为了获取“URL”的参数,也许会写一个这样的函数。

const formatSearch = () => {window.location.search.slice(1).split('&').reduce((res, it) => {const [ key, value ] = it.split('=')res[ key ] = valuereturn res}, {})
}
// https://medium.com?name=fatfish&age=100
const search = formatSearch() // { name: 'fatfish', age: 100 }
// use qs.js to format
const search2 = 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 }
const splitSearch = (url, params) => {const search = Object.entries(params).map((it) => it.join('=')).join('&')return `${url}?${search}`
}
const url = 'https://medium.com'
const params = { name: 'fatfish', age: 100 }
console.log(splitSearch(url, params)) // https://medium.com?name=fatfish&age=100
// use qs.js to stringify url
console.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100

3.使用“js-cookie.js”读写cookies

地址:https://github.com/js-cookie/js-cookie

我们都知道在 JavaScript 中操作 cookies 不是一件简单的事情,为了提高你的工作效率我强烈推荐“js-cookie.js”,它是一个简单、轻量级的 JavaScript API,用于处理 cookies。

Cookies.set('name', 'fatfish', { expires: 10 })
Cookies.get('name') // fatfish

4.为什么选择 Lodash?

地址: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. ...

获取更多资源点击下载资料


http://www.ppmy.cn/news/47977.html

相关文章

【论文写作】如何写科技论文?万能模板!!!(以IEEE会议论文为例)

0. 写在前面 常言道&#xff0c;科技论文犹如“八股文”&#xff0c;有固定的写作模式。本篇博客主要是针对工程方面的论文的结构以及写作链条的一些整理&#xff0c;并不是为了提高或者润色一篇论文的表达。基本上所有的论文&#xff0c;都需要先构思好一些点子&#xff0c;有…

自定义泛型,自定义泛型接口,自定义泛型方法,JUnit,

class 类名<T,R....>{成员}//...表示可以有多个泛型因义的为静态是和类相关的&#xff0c;在类加载时&#xff0c;对象还没有创建&#xff0c; 泛型是对象创建的时候定 所以&#xff0c;如果静态方法和静态属性使用了泛型&#xff0c;JVM就无法完成初始化注意事项 packag…

paddlepaddle 的 CPU 和 GPU

想记录一下一个 bug 改了一上午改到最后发现并没有 bug 的 bug。 总结&#xff1a; 因为下午要跑很久&#xff0c;为了省 GPU 算力&#xff0c;我想上午先用 CPU 把数据处理部分跑出来&#xff08;感觉数据处理部分不像网络训练那样涉及太多计算&#xff0c;所以感觉用 CPU 就…

【定制功能】LVGL 邮件日志功能

更多源码分析请访问:LVGL 源码分析大全 目录 1、基本说明2、配置方法3、APIs3.1、xs_send_email_log1、基本说明 邮件日志功能是为了方便定位客户问题的方案。在使用此功能时,需要保证网络连接是正常的。 内存使用 日志功能使用的内存不超过 9K: 数据缓存(4096) + 消息缓存…

JDBC入门数据库连接

1. JDBC入门 JDBC&#xff08;Java Database Connectivity&#xff09;是Java程序与数据库进行交互的一种标准接口&#xff0c;它提供了一种简单的方式来连接和操作数据库。在使用JDBC之前&#xff0c;需要先了解以下几个概念&#xff1a; JDBC Driver&#xff1a;JDBC驱动程…

D. Marcin and Training Camp(思维 + 判断一个数二进制位是否是另一个数的子集)

Problem - D - Codeforces 马辛是他大学里的一名教练。有N个学生想参加训练营。马辛是个聪明的教练&#xff0c;所以他只想派那些能冷静合作的学生参加。 让我们关注一下这些学生。每个学生可以用两个整数ai和bi来描述&#xff1b;bi等于第i个学生的技能水平&#xff08;越高越…

十二、详解Kubernetes存储卷的技术原理

Kubernetes存储卷是Kubernetes中用于持久化存储数据的一种抽象概念。它们允许容器在不同的Pod之间共享数据,并且可以在Pod重新调度或迁移时保留数据。本文将详细介绍Kubernetes存储卷的原理。 1.存储卷的概念 Kubernetes存储卷是为了解决容器化环境下数据持久化的问题而引入…

linux_FIFO命名管道-mkfifo函数-进程通信

接上一篇&#xff1a;linux_管道学习-pipe函数-管道的读写-fpathconf函数 本次来分享FIFO命名管道&#xff0c;一些常识&#xff0c;开始上菜&#xff1a; 1.FIFO-mkfifo函数 FIFO常被称为命名管道&#xff0c;以区分管道(pipe)。管道(pipe)只能用于“有血缘关系”的进程间。…