数组输出不正常

Question

let test = [];

d3.csv("cgvList.csv", function (data) { 
    if (data.poi_nm == "CGV") { 
      let obj = {};
      obj.content = '<div>' + data.branch_nm + '</div>';

      test.push(obj); 
    }
});
console.log(test);
console.log("test[0] : " + test[0]);
console.log("test.length : " + test.length);
[enter image description here][1]

我把csv文件做成了对象数组。

并且作为数组输出的结果，数组输出的很好， enter image description here 但是在输出index 0的时候，undefined出来了，数组的长度也是0。
从控制台打印的时候打印正确。

有什么问题？

enter image description here

Answer 1

没有 jsfiddle 或沙箱可以玩，我无法确切地说出发生了什么，但我认为正在发生的是两件事的混合：

d3.csv 是一个 async function，因此 return 是一个承诺。
您传递给 d3.csv 的函数应该告诉函数如何解析 csv 中的每个元素，并且应该 return 解析对象，而不是将其添加到外部数组或诸如此类的事情。您在该函数中 return 的每个元素都将成为结果数组中的一个元素

有（至少）两种可能的方法可以处理此问题：

await 异步函数，它的 return 值将是您需要的值，例如

const test = await d3.csv("cgvList.csv", function (data) { 
    if (data.poi_nm == "CGV") { 
      let obj = {};
      obj.content = '<div>' + data.branch_nm + '</div>';

      return obj; 
    }
});
console.log(test);
console.log("test[0] : " + test[0]);
console.log("test.length : " + test.length);

请注意，这里您传递给 d3.csv return 对象的函数是您想要格式化的对象！

在 .then 语句中执行您的逻辑，该语句也等待 promise 实现：

d3.csv("cgvList.csv", function (data) { 
    if (data.poi_nm == "CGV") { 
      let obj = {};
      obj.content = '<div>' + data.branch_nm + '</div>';

      return obj; 
    }
}).then((test) => {
   console.log(test);
   console.log("test[0] : " + test[0]);
   console.log("test.length : " + test.length);
});

数组输出不正常

The array does not output properly

csv

d3.js