总结时间戳的各种问题

前后端联调,时间戳的格式很重要。最常见的场景是在做日期选择的时候,要拿开始时间和结束时间的时间戳。

回头看处理过的处理

  • 在「代寄代取」增加每日往返的功能时又到了很多关于时间戳的知识。都是照着 dayjs 的文档来处理的,用起来不够得心应手。有空可以回头看看代码总结一下
  • 在香不香港的「编辑启动图」中有使用遇到过一次
  • 在留学鸟后台的「平台数据统计」点击「昨日新增用户」跳转到「用户管理」页面时应该在列表页中筛选出注册时间为昨日的用户。

理清概念

JS 中的 Date 对象

  • JavaScript 的 Date 实例对象:Thu Jan 01 1970 08:00:00 GMT+0800 (China Standard Time) JS 中时间戳、Unix 时间戳
  • Unix 时间戳:表示当前时间到1970年1月1日00:00:00 UTC对应的秒数
  • JavaScript 时间戳:指的是当前时间到1970年1月1日00:00:00 UTC对应的毫秒 几种时间标准:
  • UTC(世界标准时间)比北京时间快 8 小时
  • GMT(格林尼治平时)
  • CST(北京时间)

日期字符串的 ISO 8061 标准,即YYYY-MM-DDTHH:mm:ss.sssZ格式,其中最后的 Z 表示时区。

总结就是,前后端去传时间的时候,尽量都用 UTC 时间标准,并使用 Unix 时间戳。

原生 JS 中,Date 构造函数的使用

Date对象是 JavaScript 原生的时间库。它以 1970 年 1 月 1 日 00:00:00 作为时间的零点。 作为构造函数时,Date 对象可以接受多种格式的参数,返回一个该参数对应的时间实例。

// 参数为时间零点开始计算的毫秒数
new Date(1547383979224) 
// Sun Jan 13 2019 20:52:59 GMT+0800 (CST)

// 参数为日期字符串,要能被 Date.parse() 正确解析
new Date('January 6, 2013');

// 参数为多个整数,
// 代表年、月、日、小时、分钟、秒、毫秒
new Date(2013, 0, 1, 0, 0, 0, 0)
// Tue Jan 01 2013 00:00:00 GMT+0800 (CST)

Date 实例对象的方法

  • to 类
  • get 类
  • set 类

Date对象 — JavaScript 标准参考教程(alpha)

熟悉 Dayjs 中的 API

Dayjs 是在多个项目中引入了的时间处理的库,有方便各种方便的 API。 GitHub - iamkun/dayjs: ⏰ Day.js 2KB immutable date library alternative to Moment.js with the same modern API

Element-UI 的 DatePicker 和 TimePicker 的使用

Element-UI 的 DatePicker 组件可以传入 value-format 的 props 来指定 value 的格式 DatePicker 日期选择器 - Element

积累使用的小技巧

那到当前的时间戳 date - How do you get a timestamp in JavaScript? - Stack Overflow

在底层,运行时调用了Date对象的valueOf方法。然后一元操作符+调用了之前返回值的toNumber()方法

let dateTime = +new Date()
const unixTimeStamp = Math.floor(dateTime / 1000);

拿到当天 00:00 和 24:00 的时间戳

let timestamp = new Date().setHours(0, 0, 0, 0)
let timestamp = new Date().setHours(24, 0, 0, 0)

某个月的天数

function getDays(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

Day.js 使用实战

在留学鸟早起打卡的项目中需要处理各种时间点(如打卡时间、报名时间、截至时间……)在读代码时发现用 Day.js 来处理这些时间问题很方便而且代码易于理解

// lxbird/src/components/actives/clockIn/timeInfo.js

function getTimeInfo() {
  const dayObject = dayjs().toObject()
  const currentDay = `${dayObject.years}-${dayObject.months + 1}-${dayObject.date}`
  
  const isAfter8 = dayjs().isAfter(dayjs(`${currentDay} 08:00:59`))
  const canJoin = dayjs().isBefore(dayjs(`${currentDay} 01:00:59`)) || dayjs().isAfter(dayjs(`${currentDay} 06:00:00`));
    
// 实现一个倒计时
  let countDown = {
    h: 0,
    m: 59 - dayObject.minutes,
    s: 60 - dayObject.seconds
  }
  if (dayObject.hours < 6) {
    countDown.h = 5 - dayObject.hours
  } else {
    countDown.h = 23 - dayObject.hours + 6
  }
  
  return {
    canJoin,
    canClockin,
    countDown,
    isAfter8
  }
}

参考链接