javascript new Date()について

Question

var ob={
  "date":null
}
ob.date=new Date(2018,0,1);
localStorage.setItem("key",JSON.stringify(ob));

new Date(2018,0,1)とJSON.parse(localStorage.getItem("key")).dateが同じ値になるようにすればどうすればいいですか？

Answer 1

以下のように.dateの値をnew Date()に渡します。

new Date(JSON.parse(localStorage.getItem("key")).date)

JSON.stringifyするとき、new Date(2018,0,1)は

"2017-12-31T15:00:00.000Z"

という文字列になります。これは、ISO 8601という形式で時刻を表した文字列で、そのまま Date に渡せば、同じ時刻を表す Date を作れます。

Answer 2

参考情報

• Understanding Date and Time in JavaScript

https://www.digitalocean.com/community/tutorials/understanding-date-and-time-in-javascript

• 要注意！？JavaScriptの日付の比較の5つのTips

https://www.sejuku.net/blog/23115

...
Date型の == 演算子は、日付が一致することを比較する演算子ではありません。
Date型の == 演算子は、Date型のインスタンスが一致するかどうかを比較する演算子です。
そのため、インスタンスが違う場合、== は false を返します。
...

• 面倒なJavaScriptの日付の処理は「date-fns」でラクに片付けよう

https://www.webprofessional.jp/date-fns-javascript-date-library/

Comments

[defghi1977]

先程比較演算子で「うん？」となりました. こんなもん簡単だろうといった思い込みがある程ハマりますね…

[miyabi-sun]

例えばPHPは`[] == []`の結果はtrueですが、JSではfalseになります。

単純にJSの==演算子でオブジェクト同士の比較をした場合、
オブジェクトのアドレス番地の比較になります。
Date型もオブジェクトのインスタンスなのでこの例に盛れず、==で比較すると常にfalse。
この辺の仕様を知っていればあまり意外ではないと思いますけど、他言語出身の人だと面食らうかもしれませんね。

Answer 3

筆者はhooさんの回答を支持します.

---

Date(2008,0,1)の引数は日本標準時(正確にはシステムのタイムゾーン)を基準とした日付値を表します.
一方JSON.stringify(ob)を介することでDateオブジェクトはUTC時刻を基準とした日付文字列に変換されます.
NOTE:
UTC時刻+9時間=日本標準時

従って, あなたは2008/01/01 00:00:00に相当するDateオブジェクトを生成したものの, JSON化された日付することで(見た目上)それより9時間前の2017/12/31 15:00:00が得られて, 混乱してしまったのです.

参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date

---

NOTE:
以下は見た目を重視した回りくどい内容になっています.

この問題はJSON化する前にDate.toString()メソッドを使って日付を日本標準時での日付文字列とすることで解決します.

const date = new Date(2018, 0, 1);
const parsed = new Date(JSON.parse(JSON.stringify({d: date.toString()})).d);
console.log(date.toString() == parsed.toString());//true