• 【js】Date相关方法总结以及格式化的使用


    前言

    太久没写博客了,最近接触到的东西又多又杂,写的时候没有什么头绪,想总结Date是因为这是一个实用且常用的库,掌握基础方法可加快对于数据处理速度


    目录

    1. 基础语法
    2. Date基础方法
    3. Date进阶使用
    4. Date格式处理

    一、基础语法

    获取当前时间:today.value = new Date()

    在这里插入图片描述

    Date() 内部可以传参

    在这里插入图片描述


    二、基础方法

    主要有两种基准,本地时间和世界时间

    本地时间

    在这里插入图片描述

    世界时间

    世界时UT 即格林尼治平太阳时间,是指格林尼治所在地的标准时间,也是表示地球自转速率的一种形式。

    在这里插入图片描述


    三、进阶方法

    利用提供的基本方法快速计算常用时间

    在这里插入图片描述

    const computeRange = () => {
          const date = new Date()
          const today = date.getDay()
          time.yesturday = new Date(date.getTime() - 3600 * 1000 * 24)
    
          // thisWeek
          let stepMonday = 1 - today
          let stepSunDay = 7 - today
          if (today === 0) {
            stepMonday = 1 - 7
            stepSunDay = 7 - 7
          }
          const monday = new Date(date.getTime() + stepMonday * 24 * 3600 * 1000)
          const sunday = new Date(date.getTime() + stepSunDay * 24 * 3600 * 1000)
          time.thisWeek = [formatDate(monday), formatDate(sunday)]
    
          // lastWeek
          let lastMonday = 1 - today - 7
          let lastSunDay = 7 - today - 7
          if (today === 0) {
            lastMonday = 1 - 7 - 7
            lastSunDay = 7 - 7 - 7
          }
          const lmonday = new Date(date.getTime() + lastMonday * 24 * 3600 * 1000)
          const lsunday = new Date(date.getTime() + lastSunDay * 24 * 3600 * 1000)
          time.lastWeek = [formatDate(lmonday), formatDate(lsunday)]
    
          // thismonth
          const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
          const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
          time.thisMonth = [formatDate(firstDay), formatDate(lastDay)]
    
          // lastmonth
          const LfirstDay = new Date(date.getFullYear(), date.getMonth() - 1, 1)
          const LlastDay = new Date(date.getFullYear(), date.getMonth(), 0)
          time.lastMonth = [formatDate(LfirstDay), formatDate(LlastDay)]
    
          // thisyear
          const yearFirstDay = new Date(date.getFullYear(), 0, 1)
          const yearLastDay = new Date(date.getFullYear() + 1, 0, 0)
          time.thisYear = [formatDate(yearFirstDay), formatDate(yearLastDay)]
    
          // lastyear
          const lastYearFirstDay = new Date(date.getFullYear() - 1, 0, 1)
          const lastYearLastDay = new Date(date.getFullYear(), 0, 0)
          time.lastYear = [formatDate(lastYearFirstDay), formatDate(lastYearLastDay)]
        }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    formatDate() 时间格式化方法,如果不进行格式化,时间的样式应该跟new Date()那种差不多

    import dateformat from 'dateformat'
    
    // 格式化日期
    const formatDate = (t) => {
      return t ? dateformat(t, 'yyyy-mm-dd') : null
    }
    
    
    export default formatDate
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    时间格式的信息

    对于时间不同的处理可以更好的使用时间

    正常时间是一切的基础,但是很多时候都不方便使用
    时间戳是这个时间转换后的时间数值,便于存储和进行比较
    格式化通常是为了更好的展示这个时间

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

    时间格式化

    有两种途径,使用现成的库和自己去格式化时间,现成的库比较方便,但是你必须遵守其对时间定义的规则,自己写方法就可以定制化相关参数

    dateformat库
    通过npm直接下载就可以使用
    详见地址
    https://www.npmjs.com/package/dateformat/v/5.0.3
    这是相关format的格式,在这里插入图片描述

    自己创建库

    可以新建一个Date相关方法,主要是规定好各个时间的格式化参数

    在这里插入图片描述

    想要使用时直接引用即可
    在这里插入图片描述

  • 相关阅读:
    LAMP分布式安全方案搭建网页 (LinuxCentOS7+Apache+Mariadb+PHP)包括服务端口及防火墙规则配置
    如何通过EasyCVR接口监测日志观察平台拉流情况?
    2022年最新青海建筑八大员(劳务员)模拟题库及答案
    关于锁相环(PLL)你必须要知道的事(附资料)
    []==![]结果为true,探究 == 本质
    cf 交互题
    Kotlin apply 交换两个数
    b和B的区别?大B与小b的区别(Bps与bps)以及b、B、KB、MB、TB、PB、EB的换算
    如何利用CSS实现三角形、扇形、聊天气泡框
    Notion AI会员订阅付费
  • 原文地址:https://blog.csdn.net/qq_41443611/article/details/125620634