如何填充变量列表？

Question

我正在尝试组织我的代码以使其看起来不那么愚蠢。

var date = new Date();
  
var tokyo = new Date().toLocaleDateString("ja-JP");
var londo = new Date().toLocaleDateString("en-US");

document.getElementById('Tokyo').innerHTML = tokyo;
document.getElementById('London').innerHTML = london;

这对于 2-3 个城市来说可能看起来不错，但随着越来越多的城市被添加，这段代码将开始看起来真的 redundant/silly。

所以我尝试填充 html 元素 li 并将每个城市放在每个 li 中。

var cityList = ['london', 'tokyo'];

function populateCities() {
  var list = document.querySelector(".cities");

  var li;
  for (var e = 0; e & lt; cityList.length; e++) {
    li = document.createElement("li");
    li.appendChild(document.createTextNode(cityList[e]));
    list.appendChild(li);
  }

  var date = new Date();

  var tokyo = new Date().toLocaleDateString("ja-JP");
  var londo = new Date().toLocaleDateString("en-US");
}

window.onload = populateCities;

而不是显示每个城市的日期，每个 li 字面意思是将城市名称（文本）放入其中。

我想我需要在 var 中放入参数而不是文字，但我还不够了解 javascript 无法修复上述代码。

只是想学习 javascript。任何帮助将不胜感激。

Answer 1

如果您想以编程方式定义您的时间戳，您需要将 tz 信息添加到您的城市列表：

var cityList = ["ja-JP", "en-US"]

然后你就可以使用array.map通过tz得到一个时间数组：

var date = new Date()
var timeList = cityList.map(tz => date.toLocaleDateString(tz))

您可以使用它来填充您的 li 元素：

var cityList = ["ja-JP", "en-US"]
var list = document.querySelector(".cities")
var date = new Date()
cityList.forEach(tz => {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(date.toLocaleDateString(tz)));
    list.appendChild(li);
})

<ul class="cities"></ul>

Answer 2

var cityList = ['london', 'tokyo'];
var cityListLocalDatesMapping = {
    'london': 'en-US',
    'tokyo': 'ja-JP'
};
// Nothing complex here , you just missed the mapping. i.e for which country which codes should be used in toLocaleDateString function
function populateCities() {
    var list = document.querySelector(".cities");
    var li;
    for (var e = 0; e < cityList.length; e++) {
        li = document.createElement("li");
        li.appendChild(document.createTextNode(new Date().toLocaleDateString(cityListLocalDatesMapping[cityList[e]])));
        list.appendChild(li);
    }
}

Answer 3

cityList应该是一个既包含城市名称又包含城市代码的数据结构（被toLocaleDateString使用），对象{}比数组更合适，像这样：

var cityList = {
  london: "en-GB",
  tokyo: "ja-JP",
  /* more cities and their codes */
};

使用像 for(var city in cityList) 这样的 for..in 循环，我们可以通过 city 访问城市名称，通过 cityList[city] 访问城市代码，并使用它们来填充列表像这样：

var cityList = {
  berlin: "de-DE",
  cairo: "ar-EG",
  london: "en-GB",
  "new york": "en-US",
  paris: "fr-FR",
  seoul: "ko-KR",
  tokyo: "ja-JP"
};

function populateCities() {
  var list = document.querySelector("#cities");
  var date = new Date();

  for (var city in cityList) {
    var li = document.createElement("li");

    li.textContent = city + ": " + date.toLocaleDateString(cityList[city]);

    list.appendChild(li);
  }
}

window.onload = populateCities;

<ul id="cities"></ul>

Answer 4

var cityList = ['london','tokyo'];

应该是

var cityList = ['en-US','ja-JP'];

和

li.appendChild(document.createTextNode(cityList[e]));

应该是

li.appendChild(document.createTextNode(new Date().toLocaleDateString(cityList[e])));

看起来不太干净，但应该可以用

如何填充变量列表？

How do I populate a list of vars?

javascript

arrays

var