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

news2024/11/15 13:27:22

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+ 匹配一个或多个y
  if (/(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.coloradmin.cn/o/1551724.html

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

相关文章

LangChain教程 | langchain 文本拆分器 | Text Splitters全集

在阅读本文前&#xff0c;建议先看下langchain的基础&#xff0c;最主要的是先看下langchain 文档加载器使用教程有关的内容&#xff0c;会更容易把知识串联起来。 概述 一旦加载了文档&#xff0c;您通常会想要转换它们以更好地适应您的应用程序。最简单的例子是&#xff0c;您…

使用dlv配合goland调试在wsl中运行的go程序

参考文章&#xff1a;https://marksuper.xyz/2021/06/29/dlv-goland/ 首先安装一下dlv这个工具&#xff1a; git clone GitHub - go-delve/delve: Delve is a debugger for the Go programming language. cd delve go install github.com/go-delve/delve/cmd/dlv 我们直接开始配…

数据结构 之 栈与单调栈习题 力扣oj(附加思路版)

#include<stack> --栈的头文件 栈的特点 &#xff1a; 先进后出 &#xff0c; 后进先出 相关函数&#xff1a; top() 获取栈顶元素 ,返回栈顶元素的值 pop() 删除栈顶元素 ,没有返回值 push() 放入元素 ,没有返回值 empty() 为空返回 true 否则返回false size() 元素…

Java毕业设计-基于springboot开发的疫情防控期间外出务工人员信息管理系统-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、后台登录2.1管理员功能2.2用户功能2.3采集员功能2.4分析员功能 四、毕设内容和源代码获取总结 Java毕业设计-基…

文件上传漏洞-客户端检测

本文章仅供学习参考&#xff01;&#xff01;&#xff01; 靶场环境&#xff1a;upload-labs-master/pass-1 客户端检测 客户端检测一般都是在网页上写一段 javascript 脚本&#xff0c;校验上传文件 的后缀名&#xff0c;有白名单形式也有黑名单形式。 判断方式&#xff1…

Advisor 被重复代理问题排查

问题场景 项目中存在多个 AbstractAdvisorAutoProxyCreator 且其持有的 Advisor Bean 重复 问题复现 相关代码 ResponseBodyRequiresPermissions(PermissionConstant.****)GetMapping(value "/query****.json", name "")public List<***> query…

aws 入门篇 01.aws学习的方法论

aws入门篇 01.aws学习的方法论 第1章 aws学习的方法论 aws的服务很多&#xff0c;现在应该有100多个服务了&#xff0c;怎么来学习aws呢&#xff1f; 这几年也使用了一些aws的服务&#xff0c;谈谈自己对学习aws的理解。 1.先横向&#xff0c;后纵深 比如说&#xff0c;aws最…

【Hello,PyQt】控件拖拽

在 PyQt 中实现控件拖拽功能的详细介绍 拖拽功能是现代用户界面设计中常见的交互方式之一&#xff0c;它可以提高用户体验&#xff0c;增加操作的直观性。在 PyQt 中&#xff0c;我们可以很容易地实现控件之间的拖拽功能。本文将介绍如何在 PyQt 中实现控件的拖拽功能。 如何实…

第二百二十九回

文章目录 1. 概念介绍2. 关键信息2.1 程序包名 2.2 程序图标2.3 程序id3. 内容总结 我们在上一章回中介绍了"如何在打包apk时自动签名"相关的内容&#xff0c;本章回中将介绍程序中的包名等关键信息.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…

推荐:便宜幻兽帕鲁Palworld联机游戏服务器优惠价格表

2024年全网最全的幻兽帕鲁服务器租用价格表&#xff0c;阿里云幻兽帕鲁游戏服务器26元1个月、腾讯云32元一个月、京东云26元一个月、华为云24元1个月&#xff0c;阿腾云atengyun.com整理最新幻兽帕鲁专用4核16G、8核16G、8核32G游戏服务器租用价格表大全&#xff1a; 阿里云幻…

数据结构——链表(练习题)

大家好&#xff0c;我是小锋我们继续来学习链表。 我们在上一节已经把链表中的单链表讲解完了&#xff0c;大家感觉怎么样我们今天来带大家做一些练习帮助大家巩固所学内容。 1. 删除链表中等于给定值 val 的所有结点 . - 力扣&#xff08;LeetCode&#xff09; 我们大家来分…

十四、MySQL日志之 binlog日志

目录 一、二进制日志&#xff08;Binary log&#xff09; 1、binlog主要应用场景&#xff1a; 2、查看默认情况 3、日志参数设置 &#xff08;1&#xff09;永久设置 &#xff08;2&#xff09;临时性设置 4、查看日志 5、删除二进制日志 总结&#xff1a; 一、二进制日…

【JavaWeb】Day23.maven——依赖管理

依赖管理 一.依赖配置 依赖&#xff1a;指当前项目运行所需要的jar包。一个项目中可以引入多个依赖。 例如&#xff1a;在当前工程中&#xff0c;我们需要用到logback来记录日志&#xff0c;此时就可以在maven工程的pom.xml文件中&#xff0c;引入logback的依赖。具体步骤如…

docker容器内存检测排查

查询容器使用内存 在运维当中&#xff0c;你会发现内存很彪的高&#xff0c;但是如何判断为什么会高&#xff0c;是什么样的程序造成的呢&#xff1f;赶快使用 top&#xff0c;或者 free -h或者 ps -v。是吗&#xff1f;道理是对的。 但是你会发现&#xff0c;全部都是docker…

探索Python人工智能在气象监测中的创新应用

Python是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;在数据处理、科学计算、数学建模、数据挖掘和数据可视化方面具备优异的性能&#xff0c;这些优势使得Python在气象、海洋、地理、气候、水文和生态等地学领域的科研和工程项目中得到广泛应用。可以…

linux网络服务学习(4):SAMBA

1.什么是SAMBA SAMBA也是一种文件共享工具 &#xff08;1&#xff09;服务名&#xff1a;smb &#xff08;2&#xff09;软件名&#xff1a;samba &#xff08;3&#xff09;配置文件&#xff1a; /etc/samba/smb.conf /etc/samba/smb.conf.example &#xff08;4&#…

牛客NC26 括号生成【中等 递归 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/c9addb265cdf4cdd92c092c655d164ca 思路 答案链接&#xff1a;https://www.lintcode.com/problem/427/solution/16924 参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参…

#Linux(make工具和makefile文件以及makefile语法)

&#xff08;一&#xff09;发行版&#xff1a;Ubuntu16.04.7 &#xff08;二&#xff09;记录&#xff1a; &#xff08;1&#xff09;make为编译辅助工具&#xff0c;解决用命令编译工程非常繁琐的问题 &#xff08;2&#xff09;在终端键入make即可调用make工具&#xff0…

学习JavaEE的日子 Day29 yield,join,线程的中断,守护线程,线程局部变量共享,线程生命周期

Day29 多线程 12. 线程的礼让 Thread.yield(); 理解&#xff1a;此方法为静态方法&#xff0c;此方法写在哪个线程中&#xff0c;哪个线程就礼让 注意&#xff1a;所谓的礼让是指当前线程退出CPU资源&#xff0c;并转到就绪状态&#xff0c;接着再抢 需求&#xff1a;创建两个…

P8764 [蓝桥杯 2021 国 BC] 二进制问题

很板的一道题目&#xff0c;注意就是数组别开的太小 #include<bits/stdc.h> using namespace std; using ll long long; using pii pair<int,int>; #define int long long const int N 1e510; const int inf 0x3f3f3f3f; const int mod 1e97; int gcd(int a,…