前端系统化学习【JS篇】:(六-5)引用数据类型之Date日期篇

332 阅读6分钟

前言

  • 细阅此文章大概需要 6分钟\color{red}{6分钟}左右
  • 本篇中讲述了:
      1. Date日期对象的概述
      1. Date日期对象常用的属性和方法
      1. 时间字符串处理的几种思路
      1. 封装一个兼容度较高的时间字符串处理方法
  • 如果有任何问题都可以留言给我,我看到了就会回复,如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教,帮我指正,在下万分感谢。希望今后能和大家共同学习、进步。
  • 下一篇会尽快更新,已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
  • 如果觉得这篇文章对您有帮助,还请点个赞支持一下,谢谢大家!

Date日期对象

  • 日期对象的基本操作

  1. new Date() 获得当前客户端本地(本机电脑)的时间
    • 这个时间用户自己能够修改,不能作为重要的参考依据
    • 获取的结果不是字符串是 对象数据类型的,属于日期对象(或者说是Date这个类的实例对象)
        let time = new Date();
        console.log(time)l;// =>Mon Aug 03 2020 17:30:10 GMT+0800 (中国标准时间)
        typeOf time;//=>'object'
    

  • 标准日期对象中提供了一些属性和方法,供我们操作日期信息

    • getFullYear() 获取年
    • getMonth() 获取月【0-11】
    • getDate() 获取日
    • getDay() 获取星期几【0-6】周日-周六
    • getHours() 获取时
    • getMinutes() 获取分
    • getMilliseconds() 获取秒
    • getTime() 获取当前日期距离1970/01/01/00:00:00这个时刻之间的毫秒差
    • toLocalDateString()获取年月日(字符串)
    • toLocalString() 获取完整的日期

  • new Date() 除了获取本机时间,还可以把一个时间格式的字符串转换为标准的时间格式
        new Date('2020/08/03');
        //Mon Aug 03 2020 00:00:00 GMT+0800 (中国标准时间)
        new Date('2020-08-03 17:30:10');
        //Mon Aug 03 2020 17:30:10 GMT+0800 (中国标准时间)
    
    • 支持的格式
      • yyyy/mm/dd
      • yyyy/mm/dd hh:mm:ss
      • yyyy-mm-dd 【这种格式在IE下不支持】

  • 时间字符串处理的几种思路

时间字符串的处理方式(一)

  • 处理普通的字符串格式的时间数据
    let time = '2020-08-03 17:35:55';
    //变为自己需要呈现出来的格式
    //'2020年08月03日 17时35分55秒'
    
    //=================================
    function formatTime(time){
    /* 先加上不足十位补零的方法 */
    function addZore  (val){
        val = Number(val);
        return val<10?'0'+val:val;
    } 
    //1.获取年月日时分秒这几个值
    let Ary = time.split(' ');//['2020-08-03','17:35:55']
    let AryLeft = Ary[0].split('-');//['2020','08','03']
    let AryRight = Ary[1].split(':');//['17','35','55']
    Ary = AryLeft.concat(AryRight);//['2020','08','03','17','35','55']
    //2.拼接成想要的格式
    let result = Ary[0]+'年'+addZore(Ary[1])+'月'+addZore(Ary[2])+'日'+addZore(Ary[3])+'时'+addZore(Ary[4])+'分'+addZore(Ary[5])+'秒';
    return result;
    }
    
    time = formatTime(time);
    console.log(time);// =>2020年08月03日17时35分55秒
    

时间字符串的处理方式(二)

  • 基于日期事件对象处理
    let time = '2020-08-03 17:35:55';
    //变为自己需要呈现出来的格式
    //'2020年08月03日 17时35分55秒'
    
    //=================================
    function formatTime(time){
    /* 先加上不足十位补零的方法 */
    function addZero  (val){
        val = Number(val);
        return val<10?'0'+val:val;
    } 
    //1.把时间字符串变为标准日期对象
    time = time.replace(/-/g,'/');
    time = new Date(time);
    //2.基于日期时间对象获取详细信息
    let year = time.getFullYear(),
        month = addZero(time.getMonth()+1),
        day = addZero(time.getDate()),
        hours = addZero(time.getHours()),
        minutes = addZero(time.getMinutes()),
        seconds = addZero(time.getSeconds());
    //3.返回想要的结果
    return year+'年'+month+'月'+day+'日  '+ hours+':'+minutes+':'+seconds;
    }
    
     time = formatTime(time);
     console.log(time); // =>2020年08月03日  17:35:55
    

  • 上面两种在面对某种具体需求时,可以使用,但是如果服务器传来的时间格式不是我们定好的格式,或者没有具体时间,又或者我们想输出不同的格式,就不能完全匹配使用了。于是可以写一个万能的方法来处理时间数据

时间字符串的处理方式(三)【兼容性更高的】

  • 【兼容性更高的】 封装一套公共的时间字符串格式化处理方法
       /* 
        *
        * formatTime:万能的时间字符串格式化处理方法
        * @param
        *      [string] 要设置的格式的模板 
        *       如'{0}@{1}@{2}@ {3}@{4}@{5}',@可换为任意间隔符
        *       
        * @return
        *      [string] 处理好的时间字符串
        * 
        *  by lsw on 20200803
        *
        */

     	String.prototype.formatTime = function formatTime(template) {

        //template:格式模板,想变成什么样式就传什么样的模板,如果不传,就按照方法中设置的默认模板来设置
        /* 设置默认模板 */
        typeof template ==='undefined'?template='{0}年{1}月{2}日 {3}:{4}:{5}':null;
        //this:我们要处理的字符串
        /* 获取字符串中的数字信息 */
        let matchAry = this.match(/\d+/g);//利用正则只拿到数字

        //对模板中的{X}进行替换【使用正则表达式】,【/\{(\d+)\}/g)】代表被替换的老数据,后面的【函数】代表要替换的新数据
        //(n,x,y)可能是正则当中规定的参数,【在replace中,【n代表前面逗号前面的正则】,【x代表着前面【逗号前面的正则所表示的那个数据】【大正则匹配内容】】【y代表着逗号前面的正则所表示的那个数据【中的\d+】【第一个分组的匹配内容】】
        
        //【函数】中最后赋值给template
        //模板和数据的渲染(引擎机制)
        template = template.replace(/\{(\d+)\}/g,(x,y)=>{
                let val = matchAry[y]||'0';//【y代表着【第一个分组的匹配内容】【是replace每次替换时执行的\d+】
                //且同时要判断一下matchAry[y]这个值是否存在【如服务器未传时分秒过来,则matchAry[3][4][5]不存在】
                val.length<2?val = '0'+val:null;//不足十位补零
                return val;//返回每次replace的{},处理好的数据
        });
        return template;//返回整个处理好的时间字符串

    };


   //================执行===================== 
    let time = '2020-08-03 17:35:55';
    console.log(time.formatTime());//不传模板
    //2020年08月03日 17:35:55
    console.log(time.formatTime('{1}-{2} {3}-{4}'));//传模板
    //08-03 17-35