常用JavaScript库

一、认识前端工具库

1.前端工具类库

jQuery是一个快速、小型且功能丰富的 JavaScript 库，它使HTML文档遍历和操作、事件处理、动画和 AJAX 之类的事情变得 更加简单。当时jQuery库不但简化了代码，而且提供出色的跨浏览器支持，其极大的提高了 Web 开发人员的工作效率。 除了 jQuery之外，其实还有许多库和框架可供JavaScript开发人员使用。下图是前端开发常用的工具库：

在这里插入图片描述

二、underscore库 VS Lodash库

Lodash 和 Underscore 都是非常实用JavaScript工具库，它们都提供了非常多的函数来对数字、字符串、数组、对象等操作， 这些函数不但可以简化JavaScript编写，而且可以极大的提高我们的开发效率。这些库非常适合如下操作：

  • 迭代数组、对象和字符串。
  • 操作和测试值。
  • 创建复合函数。

Lodash是Underscore的一个分支，仍然遵循Underscore的API， 但在底层已完全重写过。对于字符串、数组、对象等Lodash 提供了跨环境迭代的支持。

Lodash还添加了许多Underscore没有提供的特性和功能，例如：提供 AMD 支持、深度克隆、深度合并、更好的性能、大型数组和对象迭代的优化等，如今的Lodash足以成为Underscore替代品。

Lodash从第4个版本开始放弃对IE9以下的支持。

1.Lodash库 的安装

方式一：CND

  • https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js

方式二：下载源码引入

  <script src="./lib/lodash.min.js"></script>
<script>console.log(window._)console.log( _.compact([1,2,3,false,null]))</script>

2.Lodash库字符串、数组

字符串（String）

  • _.camelCase(string) - 转换字符串为驼峰写法。
  • _.capitalize(string) - 转换字符串首字母为大写，剩下为小写。
  • _.endsWith(string, target) - 检查字符串是否以给定的target字符串结尾。
  • _padStart(str, length,char) - 如字符串长度小于 length 则在左侧填充字符。 如果超出length长度则截断超出的部分。
  • _.trim(string, chars) - 从字符串中移除前面和后面的 空格 或 指定的字符。

数组（Array）

  • _.first(arr, level) - 获取array中的第一个元素。
  • _.last(arr, [n=1]) - 获取array中的最后一个元素。
  • _.uniq(arr) - 创建一个去重后的array数组副本。返回新的去重后的数组。
  • _.compact(arr) - 创建一个新数组，包含原数组中所有的非假值元素。返回过滤掉假值的新数组。
  • _.flatten(arr) - 减少一级array嵌套深度。返回新数组。
// 1.获取随机数
console.log( _.random(5)  )  // 0-5
console.log( _.random(5, 10)  )  // 5 - 10
// 2.将字符串转成 驼峰命名
console.log( _.camelCase(' foo bar  ')  )
console.log( _.camelCase('--foo-bar--')  )console.log( _.capitalize('foo bar') )console.log(_.endsWith('logo.jpeg', '.png') )
console.log(_.padStart('9', 2, '0'))   // 1 -> 01
// 3.array操作
var obj = {}
var colors = ['red', 'red', obj, obj,  'green', 'blue', ['orange', 'pink'] ]// 1.数组去重
// console.log( _.uniq(colors) )// 2.扁平化
// console.log( _.flatten(colors) )// 2.去除数组中假的值
console.log( _.compact( [1, 2, {}, '', 0, null, undefined, false, 'red'] ) )

3.Lodash库对象、集合、函数

对象

  • _.pick(object, [props]) : 从object中选中的属性来创建一个对象。返回新对象。
  • _.omit(object, [props]): 反向版_.pick ; 删除object对象的属性。返回新对象。 _
  • _.clone( value) - 支持拷贝 arrays、 booleans、 date 、map、 numbers， Object 对象, sets, strings, symbols等等。 arguments对象的可枚举属性会拷贝为普通对象。（注： 也叫浅拷贝） 返回拷贝后的值。
  • _.cloneDeep(value) -这个方法类似_.clone，担它会递归拷贝 value。（注：也叫深拷贝）。返回拷贝后的值。

集合（Array | Object）

  • _.sample(): 从collection（集合）中获得一个随机元素。返回随机元素。
  • _.orderBy : 给数组排序，默认是升序asc。
  • _.each() / _.forEach() - 遍历(集合) 中的每个元素
  • _.filter( ) - 返回一个新的过滤后的数组。

函数

  • _.curry() - 返回新的柯里化（curry）函数。
  • _.debounce() - 返回新的 debounced（防抖动）函数。
  • _.throttle() - 返回节流的函数。
//4.obj操作
var user = {name: 'liujun',age: '17',height: '1.66',friends: ['Evan','John','Mark','Jack','David']
}// console.log( _.pick(user, ['name', 'friends']) )
// console.log( _.omit(user, ['name', 'friends']) )// console.log( _.clone(user) )
console.log( _.cloneDeep(user) )  // 深拷贝

三、Moment.js库 VS Day.js库

Moment库，官网的描述：

  • Moment 是一个 JavaScript 库，可以帮助我们快速处理时间和日期，已在数百万的项目中使用。
  • Moment对浏览器的兼容性比较好，例如，在Internet Explorer 8+版本运行良好。
  • 现在比较多人反对使用 Moment是因为它的包大小。Moment 不适用于“tree-shaking”算法，因此往往会增加 Web 应用程序包的大小。如果需要国际化或时区支持，Moment 可以变得相当大。
  • Moment团队也希望我们在未来的新项目中不要使用Moment 。而推荐使用其它的替代品。例如：Day.js。

Day.js库，官网的描述：

  • Day.js 是 Moment的缩小版。Day.js 拥有与 Moment相同的 API，并将其文件大小减少了 97%。
  • Moment完整压缩文件的大小为 67+Kb，Day.js 压缩文件只有 2Kb。
  • Day.js所有的 API 操作都将返回一个新的 Day.js 对象，这种设计能避免 bug 产生，减少调试时间。
  • Day.js 对国际化支持良好。国际化需手动加载，多国语言默认是不会被打包到Day.js中的。

1.Day.js库安装

方式一：CDN

  • https://unpkg.com/dayjs@1.8.21/dayjs.min.js

方式二：下载源码引入：

  <script src="./lib/dayjs.min.js"></script><script>console.log(dayjs().format())</script>

2.Day.js获取、设置、操作时间

获取(Get) + 设置(Set)

  • .year()、.month、.date() - - 获取年、月、日
  • .hour()、.minute()、.second() - 获取时、分、秒
  • .day() - 获取星期几
  • .format() - 格式化日期

在这里插入图片描述

操作日期和时间

  • .add(numbers , unit) - 添加时间
  • .subtract(numbers , unit) - 减去时间
  • .startOf(unit) - 时间的开始
    • 例如：获取今年的第一天零时零分零秒
// 1.拿到Dayjs的对象
// var day = dayjs()
// 获取时间
// console.log(day.year(), (day.month() + 1), day.date(), day.hour(), day.minute(), day.second())// 2.设置时间
var day = dayjs()
.year(2021)
.month(5)
.date(1)
console.log(day.year(), (day.month() + 1), day.date(), day.hour(), day.minute(), day.second())
// 1.增加一天
var day = dayjs() // dayjs 对象
// .add(1, 'year') // 增加一年
// .add(2, 'month') // 增加2个月
// .add(-1, 'month') // 减去一个月// .subtract(1, 'year')  // 减去一年
// .subtract(1, 'month')
// .subtract(1, 'day') // .startOf('year')  // 一年的开始 2022-01-01 00:00:00
// .startOf('month')  // 
// .startOf('day')  //// 时间的格式化
console.log( day.format("YYYY-MM-DD HH:mm:ss") )

3.Day.js解析、国际化、插件

解析时间

  • dayjs(毫秒|秒) - 时间戳（毫秒 和 秒）
  • dayjs(‘2022-06-15’) - ISO 8601格式的字符串
  • dayjs(new Date()) - 接收日期对象
// 1.解析一个字符串(ISO 8601)类型的时间
// YYYY-MM-DD HH:mm:ss
// YYYY-MM-DD
// YYYY/MM/DD
// var day = dayjs('2021-2-2 12:00:10') // dayjs 对象// 2.解析时间戳(毫秒)
// var day = dayjs(1656206934331) // dayjs 对象// 3.解析时间戳(秒)
// var day = dayjs.unix( 1656206934 ) // dayjs 对象// 4.解析Date对象
// var day = dayjs(new Date('2022-10-1')) // dayjs 对象// 时间的格式化
// console.log( day.format("YYYY/MM/DD HH/mm/ss") )

Day.js的插件应用

  • .fromNow() - 从现在开始的时间 （需要依赖：relativeTime 插件）
  • relativeTime插件：
    • https://cdn.jsdelivr.net/npm/dayjs@1.11.3/plugin/relativeTime.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="./libs/dayjs.js"></script><!-- 会在 Dayjs 的原型上添加: fromNow .... --><script src="./libs/dayjs.relative-time.min.js"></script><!-- 给给dayjs的全局变量 Ls 添加了一个中文支持--><script src="./libs/dayjs.zh-cn.min.js"></script><script>// 1.安装插件dayjs.extend(dayjs_plugin_relativeTime)// 2.切换使用中文dayjs.locale('zh-cn')// 1. 1小时   5分钟   2天前var day = dayjs(1656206934331) // dayjs 对象console.log(day.fromNow())</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/578852.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

黑马头条-day10-xxl-job热点文章计算

黑马头条-day10-xxl-job热点文章计算

目录 一.需求分析 实现思路 定时计算 定时任务框架-xxljob 二. 学习目录 分布式任务调度 1 xxl-Job简介 2 XXL-Job-环境搭建 2.1调度中心环境要求 2.2源码仓库地址 2.3 初始化“调度数据库” 2.4配置部署“调度中心” 3.配置部署调度中心-docker安装 4.简单实例 创建…
阅读更多...
springboot 0-1之pagehelper分页

springboot 0-1之pagehelper分页

1、pom.xml安装依赖 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.2.10</version></dependency>2、配置 application.yml pagehelper:helper-…
阅读更多...
每周一算法：邻值查找

每周一算法：邻值查找

给定一个长度为 n n n的序列 A A A&#xff0c; A A A中的数各不相同。 对于 A A A 中的每一个数 A i A_i Ai​&#xff0c;求&#xff1a; m i n 1 ≤ j < i ∣ A i − A j ∣ min_{1≤j<i}|A_i−A_j| min1≤j<i​∣Ai​−Aj​∣&#xff0c;以及令上式取到最小值的…
阅读更多...
40G多模光模块QSFP-40G-SR4优势及应用领域介绍

40G多模光模块QSFP-40G-SR4优势及应用领域介绍

QSFP-40G-SR4光模块是一种常用的光纤传输解决方案。传输速率40G&#xff0c;SR代表短距离多模光纤&#xff08;Short Range Multimode Fiber&#xff09;&#xff0c;4表示有四个光纤通道。这种光模块采用MPO/MTP多模光纤连接器来实现高速传输&#xff0c;传输距离可以达到300米…
阅读更多...
WU反走样算法

WU反走样算法

WU反走样算法 由离散量表示连续量而引起的失真称为走样&#xff0c;用于减轻走样现象的技术成为反走样&#xff0c;游戏中称为抗锯齿。走样是连续图形离散为想想点后引起的失真&#xff0c;真实像素面积不为 零。走样是光栅扫描显示器的一种固有现象&#xff0c;只能减轻&…
阅读更多...
【Echarts】使用echarts和echarts-wordcloud生成词云图

【Echarts】使用echarts和echarts-wordcloud生成词云图

一、下载echarts和echarts-wordcloud 地址&#xff1a;https://download.csdn.net/download/qq_25285531/88663006 可直接下载放在项目中使用 二、词云数据 词云数据是对象的格式&#xff0c;可以从后端获取&#xff0c;这里以下面数据为例 {"visualMap": 199,&…
阅读更多...
基于多反应堆的高并发服务器【C/C++/Reactor】（中）EventLoop初始化

基于多反应堆的高并发服务器【C/C++/Reactor】（中）EventLoop初始化

这个Dispatcher是一个事件分发模型&#xff0c;通过这个模型,就能够检测对应的文件描述符的事件的时候,可以使用epoll/poll/select,前面说过三选一。另外不管是哪一个底层的检测模型,它们都需要使用一个数据块,这个数据块就叫做DispatcherData。除此之外,还有另外一个部分,因为…
阅读更多...
vue3 vue3-print-nb 实现打印功能

vue3 vue3-print-nb 实现打印功能

vue3 vue3-print-nb 实现打印功能 效果 vue3-print-nb 文档 安装 pnpm add vue3-print-nbtypescript 中 xx.d.ts declare module "vue3-print-nb";配置 全局配置 src/main.ts import print from "vue3-print-nb";const app createApp(App); app.us…
阅读更多...
Leetcode2928. 给小朋友们分糖果 I

Leetcode2928. 给小朋友们分糖果 I

Every day a Leetcode 题目来源&#xff1a;2928. 给小朋友们分糖果 I 解法1&#xff1a;暴力 枚举 3 位小朋友的糖果数&#xff0c;范围为 [0, limit]&#xff0c;分别记为 i、j、k。 当满足 i j k n 时&#xff0c;答案 1。 代码&#xff1a; /** lc appleetcode.c…
阅读更多...
引领制造业迈向智能化新时代，SIA上海智能工厂展助力行业蓬勃发展

引领制造业迈向智能化新时代，SIA上海智能工厂展助力行业蓬勃发展

当今制造业迎来了数字化革命的潮流&#xff0c;其中智能工厂作为其中的一个关键角色&#xff0c;正在推动着制造业的转型和升级。智能工厂不仅仅是一个集成了先进技术的制造厂房&#xff0c;更是数字化时代制造业发展的崭新范本。本文将探讨智能工厂在现代制造业中的重要作用。…
阅读更多...
微盛·企微管家：用户运营API集成，电商无代码解决方案

微盛·企微管家：用户运营API集成，电商无代码解决方案

连接电商平台的新纪元&#xff1a;微盛企微管家 随着电子商务的蓬勃发展&#xff0c;电商平台的高效运营已经成为企业成功的关键。在这个新纪元里&#xff0c;微盛企微管家以其创新的无代码开发连接方案&#xff0c;成为企业之间连接电商平台的强大工具。它允许企业轻松集成电…
阅读更多...
SecuSphere：一款功能强大的一站式高效DevSecOps安全框架

SecuSphere：一款功能强大的一站式高效DevSecOps安全框架

关于SecuSphere SecuSphere是一款功能强大的一站式高效DevSecOps解决方案&#xff0c;DevSecOps作为一个经过针对性设计的集中式平台&#xff0c;可以帮助广大研究人员管理和优化漏洞管理、CI/CD管道集成、安全评估和DevSecOps实践。 SecuSphere是一个功能全面的DevSecOps平台…
阅读更多...
RK3568驱动指南｜第八篇 设备树插件-第83章 设备树插件驱动分析实验

RK3568驱动指南｜第八篇 设备树插件-第83章 设备树插件驱动分析实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
IDEA 控制台中文出现乱码问题解决

IDEA 控制台中文出现乱码问题解决

一、问题概述 请看下图 二、问题分析 IDEA控制台输出乱码一般会有三种来源&#xff1a; ①　IDEA本身编码错误 ②　Tomcat日志输出编码错误 ③　项目本身原因。 终极原因&#xff1a;IDEA编码和Tomcat编码不一致&#xff0c;统一设置为UTF-8即可。 三、解决思路 修改…
阅读更多...
C++中的左值，右值和移动语义详解

C++中的左值，右值和移动语义详解

左值&#xff0c;右值与移动语义 左值表示了一个占据内存中某个可识别位置的对象。右值是无法寻址的临时对象或表达式的值。左值可以隐式地转换为右值&#xff0c;而右值不可。右值可以显式地赋值给左值。赋值运算符、取地址符、内置解引用运算符、下标运算符、内置类型和迭代…
阅读更多...
跨域怎么解决

跨域怎么解决

跨域解决主要有以下⼏种&#xff1a; JSONP CORS Nginx代理 document.domain window.name postMessageiframe 1.JSONP 我们知道写 HTML 代码的时候&#xff0c;加⼊图⽚链接就不会有获取不到图⽚的问题。这是因为图 ⽚资源并没有进⾏ ajax 请求&#xff0c;⽽且 script…
阅读更多...
Superset二次开发之环境部署（Windows版）

Superset二次开发之环境部署（Windows版）

本地环境版本介绍: 编号 名称 版本 1supersetv3.0.0rc32Pythonv3.10.123Nodev16.20.24npmv8.19.45Anacondav3 1.下载源码 #下载源码 git clone https://github.com/apache/superset.git ##速度慢可替换为 https://gitclone.com/github.com/apache/superset.git #进入项目目录…
阅读更多...
前端性能优化四十七：工程目录设计范式种类

前端性能优化四十七：工程目录设计范式种类

1. 模块化: ①. 将一个复杂应用根据预设规范封装为多个块并组合起来:a. 对内实现数据私有化b. 对外暴露接口、其它模块通信②. 在前端工程化具体体现:a. 在文件层面上对代码与资源实现拆分与组装b. 将一个大文件拆分为互相依赖的小文件,再统一拼装与加载1. 工程目录设计范式种…
阅读更多...
搜维尔科技：Geomagic Phantom Premium 1.5六自由度力反馈设备开箱测试！

搜维尔科技：Geomagic Phantom Premium 1.5六自由度力反馈设备开箱测试！

搜维尔科技&#xff1a;Geomagic Phantom Premium 1.5六自由度力反馈设备开箱测试&#xff01; Geomagic Phantom系列产品中首屈一指的力反馈产品Phantom Premium 六自由度力反馈设备&#xff08;原Sensable&#xff09;能够提供高度精确的3D对象操作&#xff0c;使用户能够探索…
阅读更多...
在Go中解析HTTP请求中的表单数据

在Go中解析HTTP请求中的表单数据

想象一下&#xff0c;你收到了一封神秘的信件&#xff0c;信上写着&#xff1a;“在HTTP请求的表单数据中&#xff0c;隐藏着一座宝藏&#xff0c;等待勇敢的冒险者前来寻找。” 你知道&#xff0c;这封信正是冲着你来的&#xff01;今天&#xff0c;我们将使用Go语言作为我们的…
阅读更多...
最新文章

Copyright @ 2022~2023