大家好，我是Ned👀，一个刚刚入门前端未满两年的大三小学生🌹
未来路还长🎉, 一起努力加油吧?~
前言
最近还是在做那个练习的小项目，做完接收数据并渲染到页面上的时候，发现后端小伙伴又在给我找活干了欸，单纯的渲染这当然是小kiss啦，可这个字段是个什么东西？
"createTime" : "2021-01-17T13:32:06.381Z",
"lastLoginTime" : "2021-01-17T13:32:06.381Z"
直接CV到百度，查出来这一串是一种时间格式，下面放上它的解释：
T表示分隔符，Z表示的是UTC.
UTC：世界标准时间，在标准时间上加上8小时，即东八区时间，也就是北京时间。另：还有别的时间格式和时间戳，想了解的小伙伴可以百度了解一下哦，免得跟我一样，看到了才想着去百度了解，事先了解一下，没坏处的。
了解完了，现在我应该做的，就是将这个时间变成我们大家看得懂的那种格式，并将它渲染到页面上。
开始上手
JavaScript中，处理日期和时间，当然要用到我们的Date对象，所以我们先来写出这个函数的雏形：
const formateDate = (value)=>{
let date = new Date(value)
}
下面要做的应该是定义日期的格式了，这里我用的是yyyy-MM-dd hh:mm:ss
let fmt = 'yyyy-MM-dd hh:mm:ss'
因为年月日时分秒这里都是两位或者两位以上的，所以在获取的时候我是这样定义的：
const o = {
'y+': date.getFullYear(),
'M+': date.getMonth()+1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
首先先解释一下getMonth()+1，去查看Date文档就知道，这个函数的返回是0-11，我们正常月份都是1-12，所以加上1，才是正确的月份。
定义了规则之后，我们循环它，应该就可以得到我们想要的结果了吧。
for(let k in o ){
if(new RegExp(`(${k})`).test(fmt)){
const val = o[k] + ''
fmt = fmt.replace(RegExp.$1,val)
}
}
我们继续来解释一下代码，首先fmt.replace是代表我们要做一个替换，RegExp.$1就是获取到上面的值表达式内容，将这个内容，换成val中的值，之所以上面加了一个空字符串，是为了将val变成字符串的形式，以防再出纰漏。
我们渲染上去，看看结果如何？
日期被我们成功的转化为了，我们能看得懂的东西，但是我们可以看到，秒这里，只有一位，也就是说，在秒只有个位数的情况下，我们应该给予它一个补零的操作。
不光是秒，其他也应该是这个道理哦！
关于补零
补零的话，有两种方式，先来说说笨笨的这种吧：
我们去判断这个字符串的长度，如果是1，我们就加个零，如果不是1，那么就不用加。
var a = '6'
a.length = 1?'0'+a:a // '06'
再来说个略微比这个高级一点的：
我们需要两位，所以直接给字符串补上两个零，再用substr去分割一下字符串，就能得到我们想要的了。
var b = '6'
var result = ('00'+b).substr(b.length) // '06'
那么我们去改一下上面的代码，就得到了下面的函数：
const formateDate = (value)=>{
let date = new Date(value)
let fmt = 'yyyy-MM-dd hh:mm:ss'
const o = {
'y+': date.getFullYear(),
'M+': date.getMonth()+1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for(let k in o ){
if(new RegExp(`(${k})`).test(fmt)){
const val = o[k] + ''
fmt = fmt.replace(RegExp.$1,RegExp.$1.length==1?val:('00'+val).substr(val.length))
}
}
return fmt
}
在刷新一下网页，看看我们成功了没！
成功是成功了，但是我们发现，前面的年竟然被干掉了，他也变成了两位的样子，这可不行啊，我们定义的年份格式可是四位的。
但是别慌，这个只需要把年份单独的去做判断，不与其他2位的格式一起进行操作就能解决啦，所以我们最终的函数是这样的：
const formateDate = (value)=>{
let date = new Date(value)
let fmt = 'yyyy-MM-dd hh:mm:ss'
if(/(y+)/.test(fmt)){
fmt = fmt.replace(RegExp.$1,date.getFullYear())
}
const o = {
'M+': date.getMonth()+1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for(let k in o ){
if(new RegExp(`(${k})`).test(fmt)){
const val = o[k] + ''
fmt = fmt.replace(RegExp.$1,RegExp.$1.length==1?val:('00'+val).substr(val.length))
}
}
return fmt
}
看一下结果吧：
如果再严谨一点，可以再给函数加个参数，传递一个rule，这样方便我们后期进行调整数据格式，在定义格式的时候用||就好了。
let fmt = '传入的新格式' || '默认的格式'
写在最后
如果喜欢我的文章，欢迎一键三连哦亲🐾