解析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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
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 shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript 乱码问题
2009/08/06 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python样条插值的实现代码
2018/12/17 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
五年级数学教学反思
2014/02/11 职场文书
岗位职责风险防控
2014/02/18 职场文书
前台接待员岗位职责
2015/04/15 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang