JavaScript 常用方法(1):JS日期格式化函数、JS实现并列排序、JS实现数字每三位添加逗号、JS 实现根据日期和时间进行排序

1、JS日期格式化函数

JS日期格式化转换方法

/*** @description 格式化时间* @param fmt 格式  如:yyyy-MM-dd、yyyy-MM-dd HH:mm:ss、yyyy年MM月dd日 W HH:mm:ss等* @param {String} date 时间戳* @returns {string|null}* 对 Date 的扩展,将 Date 转化为指定格式的 String , 年(y)、月(M)、日(d)、24小时(H)、分(m)、秒(s)、周(W)、季度(q)、毫秒(S)。* 年(y) 可以用1-4个占位符,月(M)、日(d)、24小时(H)、分(m)、秒(s)、季度(q)可以用 1-2 个占位符,周(W)、毫秒(S)(是 1-3 位的数字) 只能用一个占位符。* * new Date() ==> Tue Apr 11 2023 09:43:51 GMT+0800 (中国标准时间)* dateFtt('yyyy-MM-dd', new Date()) ==> '2023-04-11'* dateFtt('yyyy-M-d', new Date()) ==> '2023-4-11'* dateFtt('yyyy-MM-dd HH:mm:ss', new Date()) ==> '2023-04-11 09:46:22'* dateFtt('yyyy-MM-dd W HH:mm:ss', new Date()) ==> '2023-04-11 星期二 09:48:33'* dateFtt('yyyy年MM月dd日 W HH:mm:ss', new Date()) ==> '2023年04月11日 星期二 09:49:51'* dateFtt('yyyy/MM/dd W HH:mm:ss', new Date()) ==> '2023/04/11 星期二 09:54:04'* dateFtt('yyyy-MM-dd W HH:mm:ss.S', new Date()) ==> '2023-04-11 星期二 10:03:38.543'*/
export function dateFtt(fmt, date) {const o = {'M+': date.getMonth() + 1, // 月份'd+': date.getDate(), // 日'H+': date.getHours(), // 小时'm+': date.getMinutes(), // 分's+': date.getSeconds(), // 秒'q+': Math.floor((date.getMonth() + 3) / 3), // 季度'S': date.getMilliseconds(), // 毫秒'W': ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()], //星期// 有其他格式化字符需求可以继续添加,必须转化成字符串}// 处理年份 正则 y+ 匹配一个或多个yif (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }for (const k in o) {if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }}return fmt
}

示例:

let str = '2023-04-06t15:00:00.000+08:00';
let dateee = new Date(str).toJSON();
let date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
// 或者 二者等效
let date = dateFtt("yyyy-MM-dd HH:mm:ss", new Date(new Date(str).getTime()));

2、JS 实现并列排序

参考:js排名[【分数相同,排名并列,按人数排名】

并列排名算法

使用:
在这里插入图片描述

    parallelSorting(list, value) {//并列排序for (let i = 0; i < list.length; i++) {if (i == 0) {list[i].index = i;} else {if (list[i - 1][value] == list[i][value]) {list[i].index = list[i - 1].index;} else {list[i].index = i;}}}},

代码优化后:

/***  @description 实现数组并列排序* @param {Object[]} list - 需要排序的数组* @param {string} value - 需要排序的字段* @param {boolean} bol - true: 升序;false: 降序;默认为true 升序*/
function parallelSorting(list, value, bol = true) {list.sort(function (a, b) {if (bol) {return a[value] - b[value];  // 升序} else {return b[value] - a[value];  // 降序}});for (let i = 0; i < list.length; i++) {if (i == 0) {list[i].index = i;} else {if (list[i - 1][value] == list[i][value]) {list[i].index = list[i - 1].index;} else {list[i].index = i;}}}
}

示例:

let arrListThree = [{ id: 1, name: 'test1', score: 99 },{ id: 2, name: 'test2', score: 89 },{ id: 3, name: 'test3', score: 88 },{ id: 4, name: 'test4', score: 85 },{ id: 5, name: 'test5', score: 96 },{ id: 6, name: 'test6', score: 88 },]parallelSorting(arrListThree, 'score');  // 升序
// parallelSorting(arrListThree, 'score', false);  // 降序console.log('并列排序(升序):', arrListThree);
// console.log('并列排序(降序):', arrListThree);

在这里插入图片描述
在这里插入图片描述

3、JS实现数字每三位添加逗号

参考: JS数字每三位加逗号的最简单方法

(1)toLocaleString() 方法

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。

// 根据本地时间把 Date 对象转换为字符串:
var d = new Date();
var n = d.toLocaleString();
console.log(n);  // 2024/3/21 11:46:37

还可以将数字变成千分位格式,这个方法最为简单,使用JS原生实现。toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。如果是浮点数,只保留小数点后三位数,并进行了四舍五入。如果对结果要求不高,这个算是最简单的实现。

let number = 12345678.10291;
console.log(number.toLocaleString()); // 12,345,678.103

(2)Intl.NumberFormat

Intl.NumberFormat 是对语言敏感的格式化数字类的构造器类。
Intl.NumberFormat 对象能使数字在特定的语言环境下格式化。

let number = 12345678.10291;console.log(new Intl.NumberFormat('de-DE').format(number)) // 12.345.678,103
console.log(new Intl.NumberFormat('ja-JP').format(number)) // 12,345,678.103
console.log(new Intl.NumberFormat('en-IN', { maximumSignificantDigits: 3 }).format(number)) // 1,23,00,000

(3)正则表达式

<script>
function thousands(num) {var str = num.toString();var reg =str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;return str.replace(reg, "$1,");
}let number = 12345678.10291;
console.log(thousands(number));  // 12,345,678.10291</script>

4、JS 实现根据日期和时间进行排序

参考: JS数组对象——根据日期进行排序Date.parse(),按照时间进行升序或降序排序localeCompare()

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(1)根据数字大小排序

/*** @description 1.封装数组对象的排序方法* @param {Object[]} dataList - 要排序的数组* @param {string} prop - 传入需要排序的字段* @param {boolean} bol - true: 升序;false: 降序;默认为true 升序* @return {Object[]} dataList - 返回改变完顺序的数组*/
function compare(dataList, prop, bol = true) {dataList.sort(function (a, b) {if (bol) {return a[prop] - b[prop];  // 升序} else {return b[prop] - a[prop];  // 降序}});return dataList;
}

示例: 从大到小排序

let arrList = [{ id: 1, name: 'test1', score: 99, time: '2024-03-25 13:51:03' },{ id: 2, name: 'test2', score: 89, time: '2024-03-24 23:01:52' },{ id: 3, name: 'test3', score: 102, time: '2024-03-15 01:51:12' },{ id: 4, name: 'test4', score: 100, time: '2024-03-23 10:30:39' },{ id: 5, name: 'test5', score: 111, time: '2024-03-23 11:21:42' },]
// console.log(compare(arrList, 'score'));  // 升序
console.log(compare(arrList, 'score', false));  // 降序

在这里插入图片描述

(2)根据日期排序

/*** @description 2.根据日期时间混合排序* @param {Object[]} dataList - 要排序的数组* @param {string} property - 传入需要排序的字段* @param {boolean} bol - true: 升序;false: 降序;默认为true 升序* @return {Object[]} dataList - 返回改变完顺序的数组*/
function dateSort(dataList, property, bol = true) {dataList.sort(function (a, b) {if (bol) {// return a[property].localeCompare(b[property]); // 升序return Date.parse(a[property]) - Date.parse(b[property]);  // 升序} else {// return b[property].localeCompare(a[property]); // 降序return Date.parse(b[property]) - Date.parse(a[property]);  // 降序}})return dataList;
}

示例:

let arrList = [{ id: 1, name: 'test1', score: 99, dateTime: '2024-03-25 13:51:03' },{ id: 2, name: 'test2', score: 89, dateTime: '2024-03-24 23:01:52' },{ id: 3, name: 'test3', score: 102, dateTime: '2024-03-15 01:51:12' },{ id: 4, name: 'test4', score: 100, dateTime: '2024-03-23 10:30:39' },{ id: 5, name: 'test5', score: 111, dateTime: '2024-03-23 11:21:42' },]
// console.log('升序:', dateSort(arrList, 'dateTime')); // 升序
console.log('降序:', dateSort(arrList, 'dateTime', false)); // 降序

在这里插入图片描述
在这里插入图片描述

(3)分别根据日期和时间进行排序

/*** @description 3.分别根据日期和时间进行排序* @param {Object[]} dataList - 要排序的数组* @param {string} property1 - 传入需要排序的字段1* @param {string} property2 - 传入需要排序的字段2* @param {boolean} bol - true: 升序;false: 降序;默认为true 升序* @return {Object[]} dataList - 返回改变完顺序的数组*/
function dateSortTwo(dataList, property1, property2, bol = true) {dataList.sort(function (a, b) {if (bol) {return a[property1].localeCompare(b[property1]) || a[property2].localeCompare(b[property2]); // 升序} else {return b[property1].localeCompare(a[property1]) || b[property2].localeCompare(a[property2]); // 降序}})return dataList;
}

示例:

let arrListTwo = [{ id: 1, name: "test1", date: '2024-03-25', time: '10:20:12' },{ id: 2, name: "test2", date: '2024-03-24', time: '22:19:31' },{ id: 3, name: "test3", date: '2024-03-24', time: '20:45:17' },{ id: 4, name: "test4", date: '2024-03-26', time: '09:36:22' },{ id: 5, name: "test5", date: '2024-03-25', time: '14:10:46' },{ id: 6, name: "test6", date: '2024-03-26', time: '08:27:38' },]console.log('升序:', dateSortTwo(arrListTwo, 'date', 'time')); // 升序
// console.log('降序:', dateSortTwo(arrListTwo, 'date', 'time', false)); // 降序

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

如何在CentOS使用Docker搭建MinIO容器并实现无公网ip远程访问本地服务

文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器&#xff0c;可以在各种环境中运行&#xff0c;例如本地、Docker容器、Kubernetes集群等。它兼…

拥有超小型领先工艺射频微波电子元器件厂商兆讯授权世强硬创代理

射频前端芯片在模拟芯片中&#xff0c;属于进入门槛较高、设计难度较大的细分领域&#xff0c;由于国内射频前端芯片行业起步较晚&#xff0c;其市场份额主要被外企所占据&#xff0c;而在国产化浪潮的推动下&#xff0c;上游厂商的射频前端产品及技术逐渐具备领先的竞争优势。…

【C++初阶】之类和对象(下)

【C初阶】之类和对象&#xff08;下&#xff09; ✍ 再谈构造函数&#x1f3c4; 初始化列表的引入&#x1f498; 初始化列表的语法&#x1f498; 初始化列表初始化元素的顺序 &#x1f3c4; explicit关键字 ✍ Static成员&#x1f3c4; C语言中的静态变量&#x1f3c4; C中的静…

Leveled mode of TFHE

参考文献&#xff1a; [CGGI16] Chillotti I, Gama N, Georgieva M, et al. Faster fully homomorphic encryption: Bootstrapping in less than 0.1 seconds[C]//Advances in Cryptology–ASIACRYPT 2016: 22nd International Conference on the Theory and Application of C…

蓝桥杯嵌入式学习笔记(6):IIC程序设计

目录 前言 1. IIC基本原理 2. 电路原理 3. 代码编程 3.1 预备工作 3.2 AT24C02写读功能编写 3.2.1 AT24C02写操作实现 3.2.2 AT24C02读操作实现 3.3 MCP4017写读功能编写 3.3.1 MCP4017写操作实现 3.3.2 MCP4017读操作实现 3.4 main.c编写 3.4.1 头文件引用 3.4.…

蓝桥杯每日一题(floyd算法)

4074 铁路与公路 如果两个城市之间有铁路t11&#xff0c;公路就会t2>1,没铁路的时候t1>1,公路t21。也就是公路铁路永远都不会相等。我们只需要计算通过公路和铁路从1到n最大的那个即可。 floyd是直接在数组上更新距离。不需要新建dis数组。另外一定要记得把邻接矩阵初始…

【数据结构】链表习题之环形链表的约瑟夫问题

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《数据结构》 &#x1f389;道阻且长&#xff0c;行则将至 前言 今天这道题目时牛客上的题目&#xff0c;名为环形链表的约瑟夫问题&#xff0c;很有趣的的一道题目 环形链表的约瑟…

SpringBoot在线电影订票系统实战开发教程及源码之手把手教你做一个在线电影订票系统(带参考论文)

今天发布的是一款基于SpringBoot脚手架开发的在线电影订票系统实战开发教程和完整源码&#xff0c;这里强调一下&#xff1a;本系统基于springboot脚手架开发&#xff0c;如果还没学习脚手架的话先去学习脚手架&#xff0c;不然学不懂这个电影订票系统哦&#xff0c;重要的事说…

2024河北石家庄矿业矿山展览会|河北智慧矿山展会|河北矿博会

2024中国&#xff08;石家庄&#xff09;国际矿业博览会      时间&#xff1a;2024年7月4-6日 地点&#xff1a;石家庄国际会展中心.正定      随着全球经济的持续增长和矿产资源需求的不断攀升&#xff0c;矿业行业正迎来前所未有的发展机遇。作为矿业领域的盛会&…

蓝桥OJ3510 冶炼金属(暴力+二分)

冶炼金属 学习了b站Turing_Sheep的思路 一、暴力模拟 思路&#xff1a; b[i] a[i] / v b[1] a[1] / v b[2] a[2] / v .... b[n] a[n] / v 以上列举中v要满足所有的记录&#xff0c;但凡一个记录不满足&#xff0c;v就不满足题意。 从小到大列举v,设置v最大为1e6 设置一个标…

如何用Flask中的Blueprints构建大型Web应用

本文分享自华为云社区《构建大型Web应用Flask中的Blueprints指南》&#xff0c;作者&#xff1a; 柠檬味拥抱。 什么是Blueprints&#xff1f; 什么是Blueprints&#xff1f; Blueprints是Flask中的一种模式&#xff0c;用于将应用程序分解为可重用的模块。每个蓝图实际上是…

时序数据库IoTDB:功能详解与行业应用

一文读懂时序数据库 IoTDB。 01 为什么需要时序数据库 解释时序数据库前&#xff0c;先了解一下何谓时序数据。 时序数据&#xff0c;也称为时间序列数据&#xff0c;是指按时间顺序记录的同一统计指标的数据集合。这类数据的来源主要是能源、工程、交通等工业物联网强关联行业…

蓝牙耳机哪个品牌的好?2024年精选硬核机型推荐

​随着时代的进步和潮流的演进&#xff0c;人们对蓝牙耳机的需求已不再局限于音质&#xff0c;舒适度也成为了关键考量。下面&#xff0c;我将为你推荐五款既舒适又性能出色的蓝牙耳机。 一、如何挑选蓝牙耳机&#xff1f;&#xff08;重点码住&#xff09; 1.选择知名大品牌&…

1.4.1 着色器

着色器&#xff08;Shader&#xff09;是运行在GPU上的小程序&#xff0c;这些小程序为图形渲染管线的某个特定部分而运行&#xff0c;从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。 一、着色器类QOpenGLShaderProgram QOpenGLShaderProgram是Qt中对着…

C++ 迭代器与反向迭代器

目录 一&#xff0c;什么是迭代器 1&#xff0c;定义 2&#xff0c;迭代器的设计思维 3&#xff0c;迭代器种类 二&#xff0c;迭代器与容器 1&#xff0c;容器中的迭代器 2&#xff0c;迭代器失效问题 三&#xff0c;迭代器的类型萃取&#xff08;traits&#xff09; …

sdwan本地组网分析

随着数字化转型的深入发展&#xff0c;企业对网络架构的要求也不断提高。SDWAN&#xff08;软件定义广域网&#xff09;作为一种创新的网络技术&#xff0c;正在逐渐受到企业的关注和采用。SDWAN本地组网技术可以帮助企业快速搭建高效稳定的企业网络架构&#xff0c;提升企业的…

Linux:基础IO

回顾C文件接口 stdin & stdout & stderr C 默认会打开三个输入输出流&#xff0c;分别是 stdin, stdout, stderr 仔细观察发现&#xff0c;这三个流的类型都是 FILE*, fopen 返回值类型&#xff0c;文件指针 系统文件I/O 接口介绍 open man open #include <sy…

TSINGSEE青犀推出县域治理视频基座数字化、智慧化解决方案

一、方案背景 县域治理方案是我国地方治理体系的重要组成部分&#xff0c;对于促进县域经济社会发展、维护社会稳定、推进全面深化改革具有重要意义。随着科技的不断进步&#xff0c;视频监管已经成为了现代社会治理的重要手段之一。县域治理视频监管方案是通过视频监控、数据…

鸿蒙OS开发实例:【装饰器-@BuilderParam】

背景 这是一个基础概念&#xff0c;其实没有什么原因&#xff0c;练习过程中&#xff0c;自然可以感受到其用法&#xff0c;后期加上真实项目的演练&#xff0c;会形成习惯 功能核心理念 “在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法&#xff0c;将会…

电商系列之优惠券

> 插&#xff1a;AI时代&#xff0c;程序员或多或少要了解些人工智能&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家…