解析JS在获取当前月的最后一天遇到的坑


Posted in Javascript onAugust 30, 2019

为了更好的讲这节的内容,提示一个 JS 处理日期的小技巧,想获取上个月最后一天,只需要设置SetDate参数为0即可。

var endDate = new Date();
//上个月最后一天
endDate.setDate(0);

接着正文开始:

使用 JS 获取当前月的最后一天,咱们通常的思路先获取下个月的第一天,然后在减去一天,就是当前月的最后一天,所以自然会用到下面的代码:

var date= new Date();
date.setMonth(date.getMonth() + 1);
//日期设置为0号, 0表示1号的前一天
let lastDay = date.setDate(0);
console.log('最后一天:' + new Date(lastDay).toLocaleString())

我写此文的日期是2019.08.21,所以打印结果如下:

最后一天:2019/8/31 下午4:10:43

那这样的算法有没有bug,咱们并不确定,所以为了还原现场,现在咱们从2019.01.31一个一个来试试

var date= new Date(2019, 0, 31); //0 表示1月
date.setMonth(date.getMonth() + 1);
// 日期设置为0号, 0表示1号的前一天
let lastDay = date.setDate(0);
console.log('最后一天:' + new Date(lastDay).toLocaleString())

打印:

最后一天:2019/2/28 上午12:00:00

咱们可以看到,我们把 1月31号往后拨一个月在往前减一天,理应得到的是 1月31号,实际得到的是 2月28号,所以咱们写的代码是有bug的。

这又是怎么肥事?

咱们可以列出月份:

1月 1 ....... 28 29 30 31
2月 1 ....... 28
3月 1 ....... 28 29 30 31

咱们通过 month + 1,在 JS 中会理解成:

当前日期 + 当月的天数

所以上例中的 date.setMonth(date.getMonth() + 1) 等价于 1月31号 + 31天 ,根据上面的列表,就可以看到结果是3月3号

解析JS在获取当前月的最后一天遇到的坑

所以不要认为 month + 1 就是月份加 1,它的意思是当前日期加上当月天数 。

那要怎么保证多了不会多跳一个月呢?

只要保证 month + 1 之前不会超过28号就行啦,那要怎么做到呢?

推算:

  • 31号 + 31 会超
  • 30号 + 31 会超
  • 29号 + 31 会超
  • 28号 + 31 还是 28 号 刚好

所以秘诀在把31号回拨到28号就行啦,所以多加以下这句话就行了:

date.setDate(28)

完整代码:

var date= new Date(2019, 0, 31); //0 表示1月
date.setDate(28)
date.setMonth(date.getMonth() + 1);
// 日期设置为0号, 0表示1号的前一天
let lastDay = date.setDate(0);
console.log('最后一天:' + new Date(lastDay).toLocaleString())

运行结果:

最后一天:2019/1/31 上午12:00:00

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
javascript基础知识
Jun 07 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
Vue函数式组件的应用实例详解
Aug 30 #Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 #Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 #Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 #Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 #Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 #Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 #Javascript
You might like
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
学院书画协会部门岗位职责
2013/12/01 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
企业申诉管理制度
2014/01/30 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers