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

前言

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


目录

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

一、基础语法

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

在这里插入图片描述

Date() 内部可以传参

【js】Date相关方法总结以及格式化的使用_第1张图片


二、基础方法

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

本地时间

【js】Date相关方法总结以及格式化的使用_第2张图片

世界时间

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

【js】Date相关方法总结以及格式化的使用_第3张图片


三、进阶方法

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

【js】Date相关方法总结以及格式化的使用_第4张图片

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)]
    }

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

import dateformat from 'dateformat'

// 格式化日期
const formatDate = (t) => {
  return t ? dateformat(t, 'yyyy-mm-dd') : null
}


export default formatDate

时间格式的信息

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

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

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

时间格式化

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

dateformat库
通过npm直接下载就可以使用
详见地址
https://www.npmjs.com/package/dateformat/v/5.0.3
这是相关format的格式,【js】Date相关方法总结以及格式化的使用_第5张图片

自己创建库

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

【js】Date相关方法总结以及格式化的使用_第6张图片

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

五、应用

处理从本月1号到今天的数据列表

var today = new Date()
      const year = today.getFullYear().toString()
      const month = (today.getMonth() + 1).toString()
      console.log(today.getDate(), 12, today.getFullYear(), today.getMonth())
      // 更新日期表
      for (let index = 1; index <= today.getDate(); index++) {
        const tryDate = year + ('00' + month).slice(-2) + ('00' + index).slice(-2)
        console.log(tryDate)
        const data = { flowDate: tryDate, flowUsed: 0 }
        this.state.dayFlow.push(data)
      }

【js】Date相关方法总结以及格式化的使用_第7张图片

你可能感兴趣的:(前端,javascript,前端,开发语言)