在某些浏览器中日期返回为“未定义”和“NaN”？答案

【问题标题】：Date returning as "Undefined" and "NaN" in some browsers?在某些浏览器中日期返回为“未定义”和“NaN”？
【发布时间】：2017-05-30 13:02:04
【问题描述】：

我今天早上一直在创建一个网络应用程序，该应用程序从 JSON 文件中获取信息 - 在这种情况下，来自@POTUS 帐户的推文信息，因为白宫刚刚公开了大量信息 - 并将其呈现屏幕上。

具体来说，我一直致力于获取@POTUS 推文信息的 JSON 文件，并显示推文的文本和日期。日期取自时间戳，我使用了一些 JS 将其转换为吸引我的格式。

我的问题是：日期在 Chrome 中正确显示（我一直在测试），但是在 Safari、Firefox 或移动设备中查看时，日期返回“未定义的 NaN，NaN”，其中月份是返回“未定义”，日和年都返回“NaN”。查看我的代码，我找不到发生这种情况的原因。

这是我的完整 HTML 文件：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>@POTUS</title>
      <link rel="stylesheet" href="assets/css/main.css">
      <link href="https://fonts.googleapis.com/css?family=Lato:300,900" rel="stylesheet">
   </head>
   <body>
      <div class="tweet-container">
         <header>
            <h1 class="title">
               <a class="twitter" href="http://www.twitter.com/potus" target="_blank">@POTUS</a> Tweets
            </h1>
            <p class="description">A complete archieve of tweets from President Barack Obama, presented in reverse chronological order.</p>
         </header>
         <div id="potus-tweets"></div>
         <button id="btn">New Tweet</button>
      </div>
      <script src="assets/js/tweets.js"></script>
   </body>
</html>

这是我的完整 JS 文件：

var tweetCounter = 0;
var tweetsContainer = document.getElementById("potus-tweets");
var btn = document.getElementById("btn");

btn.addEventListener("click", function(){
  var request = new XMLHttpRequest();
  request.open('GET', 'assets/js/potus.json');
  request.onload = function(){
    var potusTweets = JSON.parse(request.responseText);
    loadTweets(potusTweets);
  };
  request.send();
});

function loadTweets(data){

  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  var date = new Date(data[tweetCounter].timestamp);
  var year = date.getFullYear();
  var month = date.getMonth();
  var day = date.getDate();

  var tweet = "";

  for (i = 0; i < 1; i++){
    tweet += '<div class="tweet"><p class="copy">' + data[tweetCounter].text + '</p><p class="date">' + monthNames[month] + ' ' + day + ', ' + year + '</p></div>';
    tweetCounter++;
  };

  tweetsContainer.insertAdjacentHTML('beforeend', tweet);
};

供参考，该项目在此处直播：http://thejessicafelts.github.io/projects/POTUS-Tweets/

代码可以在这里找到：https://github.com/thejessicafelts/POTUS-Tweets

任何关于为什么这不起作用的见解将不胜感激。我整个早上都在尝试解决这个问题，但我看不到任何会导致“未定义的 NaN，NaN”返回的东西。

提前致谢

【问题讨论】：

这是您向 GET 请求的链接吗？github.com/thejessicafelts/POTUS-Tweets/assets/js/potus.json 我需要它来在两个浏览器上调试此代码（如果是，那么我会收到 {error: not found}）
没关系，我得到了链接。
可能是Why does Date.parse give incorrect results?的副本。

标签： javascript json date undefined nan

【解决方案1】：

首先，时间戳的样本，因为它是问题中缺少的重要输入。

{ // A sample tweet in your array.
  "tweet_id": 796018814072672300,
  "in_reply_to_status_id": "",
  "in_reply_to_user_id": "",
  "timestamp": "2016-11-08 15:57:29 +0000",
  "source": "<a href=\"http://twitter.com\" rel=\"nofollow\">Twitter Web Client</a>",
  "text": "Today, progress is on the ballot. Go vote - then make sure your friends, your family, and everyone you know votes too.",
  "retweeted_status_id": "",
  "retweeted_status_user_id": "",
  "retweeted_status_timestamp": "",
  "expanded_urls": ""
}

有了这个供参考，我将链接到 Date 构造函数的 MDN 文档。

//Syntax:
new Date(); [1]
new Date(value); [2]
new Date(dateString); [3]
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]); [4]

从我从您的json 资产中提取的对象，然后按照此描述，您正在使用第三种语法。我将从文档中引用dateString 参数必须符合date.parse 方法

日期字符串

代表日期的字符串值。该字符串应采用 Date.parse() 方法可识别的格式（符合 IETF 的 RFC 2822 时间戳，也是 ISO8601 的一个版本）。

更接近您的问题的原因，我会提到documentation 为date.parse

日期字符串

表示 RFC2822 或 ISO 8601 日期的字符串（可以使用其他格式，但结果可能出乎意料）。

是的，出乎意料。在描述的更下方，您可能会发现：-

由于日期字符串的解析存在差异，建议始终手动解析字符串，因为结果不一致，尤其是在不同的 ECMAScript 实现中，可能会将“2015-10-12 12:00:00”等字符串解析为作为 NaN、UTC 或本地时区。

现在听起来很熟悉。

我在 Firefox 47.0.2 上测试了没有时区偏移的相同字符串

var a = new Date("2016-11-08 15:57:29")
a.getDate()
// returns 8
a.getMonth()
//returns 10
a.getFullYear()
//returns 2016

【讨论】：

new Date("2016-11-08 15:57:29") 在 Safari 中返回 NaN。不要用 Date 构造函数解析字符串（相当于 Date.parse 进行解析），使用小函数或库。
我明白了。我只是给出了一个在 Firefox 中工作的测试情况。我的回答中确实包含日期字符串方法可能会产生意想不到的结果。

【解决方案2】：

将您的 timestamp 转换为毫秒，然后将 Date() 构造函数提供给它们：

var a = Date(<date in milliseconds>);

【讨论】：