Hoàn cảnh đáng thương

Chắc hẳn các lập trình viên JavaScript thì không còn xa lạ gì Date, đối tượng dùng để nhẩm ngày, đếm tháng, tính năm. Vào một ngày đẹp trời 29/3/2019, đang OT một cách vui vẻ và đầy hào hứng, tôi bỗng phát hiện ra một bug liên quan đến hiển thị ngày tháng trên Front-end. Ủa, hàm này truyền tham số là 1 thì trả về Mar (tháng 3), truyền tham số là 0 thì trả về Jan (tháng 1), trong khi kết quả mình muốn nhận là Feb (tháng 2). Chơi gì kỳ vậy???

Nhẹ nhàng bật F12 lên và debug thì phát hiện ra nguyên nhân là do hàm Date.getMonth() trả về kết quả kỳ cục như vậy.

Lúc ấy cũng đã 9h tối, không còn tin vào sự tỉnh táo của mình nên tôi chuyển qua tab Console để gõ thử xem liệu kết quả như thế nào? Liệu có phải do hàm getMonth() trong project bị ông nào custom rồi không? Và kết quả nhận được như sau (kết quả được tái hiện lại vào sáng 30/3):

Các bạn có thể gõ thử trên console của mình để kiểm chứng:

Bẫy chuột này lớn quá

Hoá ra là sau khi gọi hàm setMonth(1), date không được set thành tháng 2 (index = 1) mà chỉ bị lùi đi 28 ngày (từ ngày 30/3 thành ngày 2/3)

Đọc kỹ phần “Description”, chúng ta mới thấy rằng hàm setMonth() sẽ dùng chính ngày hiện tại của tháng cũ để set ngày cho tháng mới, nếu vượt quá ngày của tháng mới thì sẽ cộng tiếp sang ngày của tháng tiếp theo. Ví dụ, ngày hiện tại là 30, 31 thì setMonth(1) chắc chắn sẽ bị tính sang tháng 3, vì tháng 2 chỉ có tối đa 29 ngày. Ở đây, ngày hiện tại của chúng ta là 30/3, thế nên khi set về tháng 2/2019 (có 28 ngày) sẽ bị tính thêm 2 ngày là thành ngày 2/3.

Quả thật, cái bẫy chuột này ít nhất đã bẫy được một con chuột béo là mình rồi.

Giải pháp

Từ đó, chúng ta rút ra rằng, để setMonth(), getMonth() được thoải mái nhất, tốt nhất là nên dùng ngày mùng 1.

Nguồn bài viết : vibloCó thể bạn muốn xem: .u9090b5de756799a3a8cd1a807720a60e { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u9090b5de756799a3a8cd1a807720a60e:active, .u9090b5de756799a3a8cd1a807720a60e:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u9090b5de756799a3a8cd1a807720a60e { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u9090b5de756799a3a8cd1a807720a60e .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u9090b5de756799a3a8cd1a807720a60e .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u9090b5de756799a3a8cd1a807720a60e:hover .postTitle { text-decoration: underline!important; } Mối liên hệ giữa Javascript và ECMAScript .u60a204f25afddec8a343a050b3a81b91 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; text-decoration:none; } .u60a204f25afddec8a343a050b3a81b91:active, .u60a204f25afddec8a343a050b3a81b91:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u60a204f25afddec8a343a050b3a81b91 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u60a204f25afddec8a343a050b3a81b91 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u60a204f25afddec8a343a050b3a81b91 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .u60a204f25afddec8a343a050b3a81b91:hover .postTitle { text-decoration: underline!important; } ECMAScript - ES6 Là gì? Overview về ES6