Question

我一直在使用D3.js库并且遇到了这个未知的行为。我使用范围函数创建了包含从0到99的100个数字的数组，然后将映射函数映射到数组的每个成员，如下所示：

var data = d3.range(100).map(function() {
    return {
        x: 0,
        y: 0
    };
})

在Mozilla中关于javascript的文档是这个地图功能行为描述：

创建一个新数组，其结果是在此数组中的每个元素上调用提供的函数。

我的期望是，在执行此代码后，我的变量数据将是一个包含100个对象的数组，每个对象的属性x和y都设置为0.

我尝试使用两种不同的方法访问这些对象。起初，我尝试使用for / in循环：

for(d in data){
  console.log(d);
  console.log(d.x + " " + d.y);
}

这个周期的输出是：

0
undefined undefined
1
undefined undefined
...
99
undefined undefined

然后我尝试通过索引访问每个对象，使用像这样的循环

for(var i = 0; i < data.length; i++){
    console.log(data[i]);
    console.log(data[i].x + " " + data[i].y);
}

突然，输出完全不同，找到并匹配所有对象及其属性：

[object Object]
0 0
[object Object]
0 0
...
[object Object]
0 0

我不明白为什么通过for / in循环访问数组中的对象不起作用，但是直接索引访问是成功的。我想我可能会遗漏一些关于map函数如何将函数结果映射到原始数组的东西，或者可能因为/ in循环访问数组而不是通过索引。有谁知道为什么会这样？谢谢。

Answer 1

for..in遍历数组索引，而不是值：

> a = [100,200,300]
[100, 200, 300]
> for(d in a) console.log(d)
0
1
2

所以，在你的第一个循环中你需要：

for(d in data)
    console.log(data[d].x + " " + data[d].y);

Answer 2

如你所说，

var data = d3.range(100).map(function() {
    return {
        x: 0,
        y: 0
    };
})

创建一个新数组，其结果是在此数组中的每个元素上调用提供的函数。

for in可用于不是数组的对象。

对于需要用于循环的数组。

你可以按照这个

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in