这两种JavaScript创建数组列表的方式有什么区别？

Question

我该如何在JavaScript中动态创建一个数组列表，在开发者控制台上实际显示为一个数组列表？

重新表述一下这个问题：有很多示例可以做到这一点，我的代码也可以工作，但是使用这两种方法得到了两个非常不同的结果：

我尝试了这个方法：

var volume = [];
for (i = 0; i < json.length; i++) {
    var item = new Array(2);
    item[0] = json[i].json_date;
    item[1] = json[i].volume;
    volume.push(item);
    }

所以，这段代码可以运行，并且似乎创建了一个数组的数组，但是在开发者控制台中，console.log(typeof volume[0]) 的结果为 undefined。

如果我手动创建数组，它就会更好地工作：

var volume = [
    [1313964000000,23.17],
    [1314050400000,23.78],
    [1314741600000,25.24],
    [1314828000000,24.77],
    [1440021600000,82.69]
];

现在console.log(typeof volume[0])是对象，而console.log(volume)的结果为：(5) [Array(2), Array(2), Array(2), Array(2), Array(2)]。这就是我需要的，不仅仅是[]。

我已经花了整整一天的时间寻找答案，并尝试了许多代码的变化，但似乎找不到能动态创建该卷数组以正确显示为数组的代码。

还有其他人遇到过这种情况吗？

以下是完整的代码：

var volume = [];

fetch("http://localhost:3000/api/v1/TSLA").then(function(response) {
    if(response.ok) {
        response.json().then(function(json) {
            for (i = 0; i < Object.keys(json).length; i++){
                volume.push(new Array(json[i].json_date, json[i].volume));
                }

            });
        } else {
            console.log('Network request failed with response ' + 
response.status + ': ' + response.statusText);
        }
        });

        console.log(volume);

所以，oknawe的答案帮助我解决了这个问题，但从某种意义上说，问题仍未得到解答，因为volume数组仅在fetch函数内可用。在代码后面，数据仍然存在，但单独的元素测试为未定义...

- Russ Karlberg

---

你的代码应该能够正常工作。你可能在做其他方面出了问题（例如，没有等待异步操作完成）。 - SLaks

变量 json 是什么样子？你是怎么得到它的？（尝试将其转储到控制台。） - Ashton Wiersdorf

json部分没问题：{signal_date: "2010-06-29T04:00:00.000Z", json_date: 1277769600000, open: 19, high: 25, low: 17.54, ...} - 就是一堆这样的记录。 - Russ Karlberg

是的，代码确实可以工作...但是主数组内部的数组类型由于某些原因未定义，无论我尝试什么，都无法让这些内部数组显示为Array(2)。 - Russ Karlberg

@RussKarlberg请看下面的答案。由于json.length将是undefined，因此循环永远不会被迭代。 - joknawe

Answer 1

假设变量 json 的结构符合您的期望，那么这应该可以正常工作。您也可以尝试：

let volume = json.map((i) => [i.json_date, i.volume]);

(如果您的环境允许使用ES6.)

您可以使用map函数迭代数组内容，而不是手动循环遍历��组。

- Ashton Wiersdorf

---

谢谢您的帮助。我尝试了那个方法，代码确实更加简洁。我正在使用最新版本的所有工具。JSON数据来自API，这部分工作正常。但是我需要创建一个数组的数组，以便将其加载到HighCharts中，而这一部分却无法正常工作，也没有任何错误或警告提示。 - Russ Karlberg

Answer 2

JSON对象的length属性是undefined，因为对象没有length值。你可以使用Object.keys来获取大小，但这对你并没有太大帮助，因为对象的值无法通过索引访问：

var volume = [];
for (i = 0; i < Object.keys(json).length; i++) {
    // can't access using json[i] here
}

然而，您可以使用Object.keys(json)或Object.values(json)并执行以下操作： （您需要在json回调中放置代码）

let volume = [];
fetch('/api/foo/bar').then((data) => {
    return data.json();
}).then((json) => {
    console.log(json);
    Object.keys(json).forEach((obj) => {
        // obj = {"json_date": 1313964000000, "volume": 23.17, ...}
        console.log(obj);
        volume.push(new Array(obj["json_date"], obj["volume"]));
    });
    console.log(volume);
}).catch((e) => {
    console.error('There was a problem with the request');
})

- joknawe

---

@RussKarlberg - 上面更新的代码应该能帮助你解决问题。 - joknawe

此代码假设响应确实是一个对象，而不是对象数组。 - joknawe

好的，我对我的代码进行了更新，好消息是它给了我需要的数组列表...但是数组的元素都是未定义的... - Russ Karlberg

终于搞定了 - 使用 volume.push(new Array(json[obj].json_date, json[obj].volume)); - Russ Karlberg

很难在没有看到你的JSON响应结构的情况下知道确切的情况，但很高兴听到你已经解决了它。 - joknawe

Answer 3

感谢oknawe，我终于让它工作了。只要我在获取代码中使用那个音量数组，那段代码就能正常工作。如果在外部使用音量数组，它仍然包含数据，但是单个元素未定义。非常感谢在这里发布帖子的每个人！

- Russ Karlberg