JS系列：真实项目中的需求

真实项目中的需求

1.时间字符串格式化

有一个时间字符串“2018-4-4 16:26:8” , 变为“04月04日 16时26分”

   方法1
   /*
   * 1.基于split按照kongge  把字符串拆分两部分（数组中两项）
   * 2.左边的这一部分继续以split按照中杠来拆
   * 3.右边这一部分继续split按照冒号来拆
   * 4.把需要的信息拼接在一起即可（不足10位的补零）
   */
   function addZero (val){
     return val < 10 ? '0' + val :val;
     // month < 10 ? month = '0' + month :null  //如果小于10（不足两位数）就给它加0
}
   var str = '2018-4-4 16:32:8';
   var ary = str.split(' '), //=>["2018-4-4", "16:32:8"]
       aryLeft = ary[0].split('-'), //=>["2018", "4", "4"]
       aryRight = ary[1].split(':'); //=>["16", "32", "8"]
   var month = addZero(aryLeft[1]),
       day = addZero(aryLeft[2]),
       hour = addZero(aryRight[0]),
       minute = addZero(aryRight[1]);
   var result = month + '月' + day + '日' + hour + '时' + minute + '分';
   console.log(result)    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dL5WMbdv-1576060307754)(./1576052835774.png)]

第二种方式

第三种方式

• 提高眼界

   ~function (pro){
       pro.formatTime = function (template) {
       template = template || '{0}年{1}月{2}日 {3}时{4}分{5}秒';
       var ary = this.match(/\d+/g);
       template = template.replace(/\{(\d+)}/g, function () {
       var n = arguments[1],
          val = ary[n] || '0';
          val < 10 ? val = '0' + val : null;
          return val;
});   
   return template;
}
}(String.prototype)

URL地址问号传参解析

有一个url地址：“https://sports.qq.com/zhufnegpeixun/stu/?lx=1&name=AA&sex=man" 地址问号后面的内容是我们需要解析出来的参数信息
{
lx : 1
name : ‘AA’
sex : man
}

/*
* 1.先找到问号，把问号后的信息截取下来
* 2.首先我们要验证是否存在#哈希值，存在的话我们从问号开始截取到#，不存在的话，我们直接截取到字符串的末尾
* 3.以&进行拆分（数组）
* 4.遍历数组中的每一项，在按照=进行拆分，把拆分后的第一项作为对象的属性名，第二项作为属性值进行存储即可

*/
 var str = 'https://sports.qq.com/zhufnegpeixun/stu/?lx=1&name=AA&sex=man#teatcher'; //#号后面的称为哈希值（hash）值，这个值可能有，可能没有，我们需要处理，有的话，我们截取的时候需要过滤掉
 var indexASK=str.indexOf('?'),
     indexWell=str.indexOf('#');
           //=>#可能有，可能没有，需要判断
     if(indexWell > -1){
           //存在#号，我们截取到#号的位置即可
     str = str.substring(indexASK + 1, indexWell);
}else {
   //没有#号，我们截取到末尾
   str = str.substr(indexASK + 1);
}
  console.log(str)
  //=> lx=1&name=AA&sex=man
  var ary = str.split('&'), //=>["lx=1", "name=AA", "sex=man"]
      obj = {};
  for (var i =0 ;i<ary.length; i++){
   var item =ary[i],
       itemAry = item.split('=');
   console.log(itemAry);  
   //=>(2) ["lx", "1"]0: "lx"1: "1"length: 2__proto__: Array(0)
   //=>    (2) ["name", "AA"]0: "name"1: "AA"length: 2__proto__: Array(0)
  //=>     (2) ["sex", "man"]
  var key = itemAry[0],
     value = itemAry[1];
   obj[key] = value;
}
console.log(obj);

正则

  有一个url地址：“https://sports.qq.com/zhufnegpeixun/stu/?lx=1&name=AA&sex=man" 地址问号后面的内容是我们需要解析出来的参数信息

   
    ~function (pro){
   pro.queryURLParmater = function () {
     var obj= {},
         reg = /([^?=&#]+)(?:=?([^?=&#]+)?)/g;
     this.replace(reg, function (){
         var key = arguments[1],
             value = arguments[2] || null;
         obj[key] = value;
   });
    return obj;
  }
}(String.prototype);

 var str = 'https://sports.qq.com/zhufnegpeixun/stu/?lx=1&name=AA&sex=man#teatcher';
  console.log(str.queryURLParmater());
 =>{https://sports.qq.com/zhufnegpeixun/stu/: null, lx: "1", name: "AA", sex: "man", teatcher: null}
https://sports.qq.com/zhufnegpeixun/stu/: null
lx: "1"
name: "AA"
sex: "man"
teatcher: null
__proto__: Object