Question

我正在使用一个名为D3的库加载一些CSV文件，并在加载文件后执行console.log它返回的数据，它给了我这个结果：

d3.csv(..., function(data) {
    console.log(data)
    // this returns the following:
    //"(6) [{…}, {…}, {…}, {…}, {…}, {…}, columns: Array(8)]"
})

现在这部分对我来说很奇怪：

(6) [{…}, {…}, {…}, {…}, {…}, {…}, columns: Array(8)]

这看起来像是一个数组的混合（因为我可以做var a = data[2]之类的东西），但它看起来也像一个对象（因为我可以像var a = data.columns那样做。

当我typeof(data)时，我知道它是一个对象，但我不知道如何构建一个也响应[]语法的对象。（或响应对象属性的数组）

如何构建这样的结构？

Answer 1

数组只是一种对象。他们可以做对象可以做的任何事情。

＆＃13;

var data = ["a", "b", "c"];
data.arbitaryProperty = "Hello, world";
console.log(typeof data);
console.log(data[0]);
console.log(data.arbitaryProperty);

＆＃13;

Answer 2

d3.csv()返回的数据确实是一个数组。没有进入技术讨论，在JavaScript数组中是对象，你所看到的只是数组的属性。

例如，让我们看看这个简单的数组：

var arr = [1, 2, 3, 4];

如果我这样做：

arr.foo = "bar";

它为该数组设置属性。我们来看看：

var arr = [1, 2, 3, 4];
arr.foo = "bar";
console.log(arr.foo)

'columns'属性

在D3 v4中，d3.csv()函数向数组添加一个新属性，称为columns。根据{{3}}：

返回的数组还公开了一个包含输入顺序列名的columns属性（与Object.keys相反，其迭代顺序是任意的）。

所以，让我们加载一个我在网上找到的非常小的样本CSV：

d3.csv("https://www.ibm.com/support/knowledgecenter/SVU13_7.2.1/com.ibm.ismsaas.doc/reference/AssetsImportMinimumSample.csv?view=kc", function(data) {
  console.log(data);
})

<script src="https://d3js.org/d3.v4.min.js"></script>

如果我使用data.columns，我将获得包含该CSV中第一行（标题）的数组属性。我们来看看标题：

d3.csv("https://www.ibm.com/support/knowledgecenter/SVU13_7.2.1/com.ibm.ismsaas.doc/reference/AssetsImportMinimumSample.csv?view=kc", function(data) {
  console.log(data.columns);
})

<script src="https://d3js.org/d3.v4.min.js"></script>

是否可以构建响应[]运算符的对象

2 个答案:

'columns'属性