javascript - 数组不相等

Question

我正在尝试使用 d3 加载一个 csv 文件，并正在尝试为显式二维数组(名为 iris_2)创建一个直接替换。当使用 underscore.js(使用 _.isEqual)比较两个二维数组时，我注意到它们不相等(check out the Codepen.io code)。更奇怪的是，如果我在检查 html 页面时使用 _.isEqual 来比较它们，它会说它们相等。

这是 d3 代码:

var iris = [];
d3.csv("data/iris.csv", function(mydata) {
    mydata.forEach(function(d) {
        d["sepal_length"] = +d["sepal_length"];
        d["sepal_width"] = +d["sepal_width"];
        d["petal_length"] = +d["petal_length"];
        d["petal_width"] = +d["petal_width"];
        iris.push([d["sepal_length"], d["sepal_width"], d["petal_length"], d["petal_width"], d["species"]]);
    });
});

这是 iris.csv 文件的前五个数据行，其中包含我想用 d3 读取的标题:

sepal_length,sepal_width,petal_length,petal_width,species
5.1,3.5,1.4,0.2,setosa
4.9,3,1.4,0.2,setosa
4.7,3.2,1.3,0.2,setosa
4.6,3.1,1.5,0.2,setosa
5,3.6,1.4,0.2,setosa
...

这是“显式”二维数组的前五行:

var iris_2 = [
  [5.1, 3.5, 1.4, 0.2, 'setosa'],
  [4.9, 3.0, 1.4, 0.2, 'setosa'],
  [4.7, 3.2, 1.3, 0.2, 'setosa'],
  [4.6, 3.1, 1.5, 0.2, 'setosa'],
  [5.0, 3.6, 1.4, 0.2, 'setosa'] ...

这是我用来比较两个数组的 underscore.js 代码:

_.isEqual(iris, iris_2);

对于 html 代码(参见上面的 Codepen 链接)返回 false，但对于 Chrome html 检查器控制台返回 true。

Answer 1

d3.csv 是异步。这意味着，当您到达...

document.getElementById("myValue").innerHTML = _.isEqual( iris, iris_2 );

...仍然没有 iris 数组(或者，更准确地说，它仍然是空的)，结果是false。

但是，如果您比较回调内部的数组，给 d3.csv 填充您的iris 数组的时间......

d3.csv("iris.csv", function(mydata) {
    mydata.forEach(function(d) {
        d["sepal_length"] = +d["sepal_length"];
        d["sepal_width"] = +d["sepal_width"];
        d["petal_length"] = +d["petal_length"];
        d["petal_width"] = +d["petal_width"];
        iris.push([d["sepal_length"],
            d["sepal_width"],
            d["petal_length"],
            d["petal_width"],
            d["species"]
        ]);
    });

    var iris_2 = [
        [5.1, 3.5, 1.4, 0.2, 'setosa'],
        ...
    ];

    document.getElementById("myValue").innerHTML = _.isEqual(iris, iris_2);
    //comparing inside the callback

});//callback ends here

...您会看到结果为 true。

实际上，“给时间”给 d3.csv 填充 iris 数组就是解释你所说的内容:

What's even stranger is that if I use _.isEqual to compare them when inspecting the html page, it says they are equal.

发生这种情况是因为，当您检查页面时，已经创建了 iris 数组。

您可以在此处查看工作代码:https://plnkr.co/edit/24CypznlScazjcqGKsCq?p=preview