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

news/2024/9/18 12:23:10/

前言

作为一名前端开发者,我通过这些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)只能用于“有血缘关系”的进程间。…

第三章 法的渊源与法的分类

目录 第一节 法的渊源的分类 一、法的渊源释义二、法的渊源种类 第二节 正式法源 一、正式法源的含义二、当代中国的正式法源三、正式法源的一般效力原则 第三节 非正式法源 一、当代中国的非正式法源 第四节 法的分类 一、法的一般分类二、法的特殊分类 第一节 法的渊源的…

Spring AOP核心概念与操作示例

AOP 核心概念 还记得我们Spring有两个核心的概念嘛&#xff1f;一个是IOC/DI&#xff0c;另一个是AOP咯。 先来认识两个概念&#xff1a; AOP(Aspect Oriented Programming)面向切面编程&#xff1b;作用&#xff1a;在不惊动原始设计的基础上为其进行功能增强&#xff0c;类…

Spring Security 05 密码加密

目录 DelegatingPasswordEncoder 使用 PasswordEncoder 密码加密实战 密码自动升级 实际密码比较是由PasswordEncoder完成的&#xff0c;因此只需要使用PasswordEncoder 不同实现就可以实现不同方式加密。 public interface PasswordEncoder {// 进行明文加密String encod…

AI大模型加速RPAxAI时代到来,谁会是RPA领域的杀手级应用?

GPT等AI大模型震撼来袭&#xff0c;基于RPA的超级自动化仍是最佳落地载体 对话弘玑CPO贾岿&#xff0c;深入了解国产RPA厂商对AI大模型的探索与实践 文/王吉伟 关于RPA已死的说法&#xff0c;在中国RPA元年&#xff08;2019年&#xff09;投资机构疯狂抢项目之时就已经有了。…

西北乱跑娃 -- centos7安装python3.8最全教程

Centos7安装Python3.8详细教程 安装编译相关工具 yum -y groupinstall "Development tools" yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel yum install …

java 内置锁

java 内置锁 1.java内置锁是一个互斥锁&#xff0c;也就说明最多只有一个线程能够获得该锁&#xff0c;当线程A获得锁时&#xff0c;线程B想要尝试获得锁的时候&#xff0c;必须等线程A释放锁&#xff0c;若线程A一直不释放锁&#xff0c;则线程B一直等待处于阻塞状态中。获取…

Java锁的区别:独占模式与共享模式

目录 前言&#xff1a; Java 独占模式的锁有哪些&#xff1f; 共享模式的锁有哪些&#xff1f; Java即是 独占模式又是共享模式的锁有哪些&#xff1f; 前言&#xff1a; 资源有两种共享模式&#xff0c;或者说两种同步⽅式&#xff1a; 独占模式&#xff08;Exclusive&am…

类图(类之间的关系)

一.概述 类图(Class diagram)是显示了模型的静态结构&#xff0c;特别是模型中存在的类、类的内部结构以及它们与其他类的关系等。类图不显示暂时性的信息。类图是面向对象建模的主要组成部分。在软件工程中&#xff0c;类图是一种静态的结构图&#xff0c;描述了系统的类的集合…

MySQL调优笔记——慢SQL优化记录(2)

今天调优的原因是&#xff0c;有一个统计报表业务&#xff0c;查询的时间太慢&#xff1b;同时由于数据库的压力是随机性的&#xff0c;这个业务的执行下限和上限相差近20倍&#xff1b;快的时候可以达到600ms&#xff0c;慢的时候有9秒之多&#xff1b; 接下来详细介绍&#x…

SOFA Weekly|SOFARPC 5.10.0 版本发布、SOFA 五周年回顾、Layotto 社区会议回顾与预告...

SOFA WEEKLY | 每周精选 筛选每周精华问答&#xff0c;同步开源进展 欢迎留言互动&#xff5e; SOFAStack&#xff08;Scalable Open Financial Architecture Stack&#xff09;是蚂蚁集团自主研发的金融级云原生架构&#xff0c;包含了构建金融级云原生架构所需的各个组件&am…

水电设计院信息管理系统1.0

水电设计公司信息管理系统软件使用说明书 代码太多就不贴了&#xff0c;请在我的资源里下载&#xff0c;已部署在企业进行试运行。https://download.csdn.net/download/weixin_44735475/87704302 目录 1.引言 1 2.项目背景 1 3.系统功能 2 3.1系统功能 2 3.2系统性能 2 3.3系…

精通 TensorFlow 2.x 计算机视觉:第二部分

原文&#xff1a;Mastering Computer Vision with TensorFlow 2.x 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 本文来自【ApacheCN 深度学习 译文集】&#xff0c;采用译后编辑&#xff08;MTPE&#xff09;流程来尽可能提升效率。 不要担心自己的形象&#xff0c;…