1. for循环中使用字符串

在项目需求中遇到这样一个问题:

双时间问题: 四个输入框(起始日期,起始时间,结束日期,结束时间),现在要将所选时间段按照"2018-12-27 02:00:00"这样的格式整点编排成一个数组。

首先对起始日期和结束日期进行日期化,得到所有日期数组,写了如下函数

function getDateArr(start, end){
    // 参数解释: (1.起始日期 2.结束日期)-- 示例('2017-12-27','2017-12-30')
    let s = new Date(start).getTime();
    let e = new Date(end).getTime();
    let diff = (e - s)/60/60/1000/24;
    let result = [];
    for(let i = 0; i <= diff; i ++){
        let date = new Date(s+i*60*60*1000*24)
        result.push( date.getFullYear() + "-" + (date.getMonth()+1) + "-" + ('0' + date.getDate()).slice(-2) )
    }
    return result;
}

// ["2017-12-27", "2017-12-28", "2017-12-29", "2017-12-30"]

我写了这样一个函数

function getDateTimeArr(dateArr,start, end){
  // 参数解释:(1.日期数组 2.起始时间数值 3.结束时间数值)
  // 示例(["2017-12-27"], 2, 7)
  var time = []
    for (let m = 0; m < dateArr.length; m++) {
      let s = m !== 0 ? 0 : start // 取开始时间 或者 0
      let e = m !== (dateArr.length - 1) ? 23 : end // 取结束时间 或者 23
      for (let n = s; n <= e; n++) {
        let t = n < 10 ? '0' + n : n // 补零
        time.push(dateArr[m] + ' ' + t + ':' + '00' + ':' + '00') // 凑整点格式
      }
    }
  console.log(time)
}

// ["2017-12-27 02:00:00", "2017-12-27 03:00:00", "2017-12-27 04:00:00", "2017-12-27 05:00:00", "2017-12-27 06:00:00", "2017-12-27 07:00:00"]

到这里基本逻辑就实现了。但是在实际项目中楼主遇到的问题是getDateTimeArr这个函数后面两个参数传来的是字符串格式的,也就是说,实际执行是这样的:

// 你想的是这样
// getDateTimeArr(getDateArr('2017-12-27', '2017-12-27'), 2, 7)
// 实际是这样
getDateTimeArr(getDateArr('2017-12-27', '2017-12-27'), '2', '7')

执行完似乎没什么影响,但是换个参数就不行了啊,好好的汉子换个姿势就不行了啊。

getDateTimeArr(getDateArr('2017-12-27', '2017-12-27'), '2', '17')
// 输出结果: []

最开始的表象就是时而好使时而报错,和女朋友一样难以捉摸;后来发现只要时间选的大于10就会bug,一头雾水、五脸懵逼,楼主以为这个参数单身久了不想变成双位数呢。

让我们深入浅出一下,这个字符串进入函数后是怎么工作的。

无图言***,我们看图说话。

getDateTimeArr(getDateArr('2017-12-27', '2017-12-27'), '2', '7')
// '2' 和 '7' 比较,根据字符串自然顺序比较规律
// '2' < '7' 满足循环执行条件,于是打印了字符串 '2'
// 然后 i++ 的时候强制类型转换了,i 变身成了数字 3

// 第二次循环 3 < '7' 的比较,依然成立,但打印的就是数字 3 了
// 所以年看到Chrome打印出来 3 的颜色变了
// 以此类推

-------------------------------------------------------
getDateTimeArr(getDateArr('2017-12-27', '2017-12-27'), '2', '17')
// '2' 和 '17' 比较,按第一位的自然顺序比较
// '2' > '17' 不满足循环条件,循环结束!还没开始呢就这么结束了!啊,废物!

好了,我讲完了,结束!还没开始就这么结束了!啊,废物!

2. new Date()到底是几点

大家都知道 new Date()会返回当前时间,那么new Date("2017-01-01")呢?

new Date("2017-01-01").getHours();
// 8
new Date("2017-01-01 00:00:00").getHours();
// 0

// 为什么呢?因为UTC时间和我们所在的东八区差了8个小时