javascript - 通过for循环/for循环访问数组中映射对象的区别

Question

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

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

在关于 javascript 的 Mozilla 文档中是这个映射函数行为描述：

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

我的预期是，在执行此代码后，我的变量数据将是一个包含 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 函数如何将函数结果映射到原始数组的内容，或者可能 for/in 循环访问数组与通过索引不同。有谁知道为什么会这样？谢谢你。

score 2 · Accepted Answer

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);

score -1 · Accepted Answer

如你所说，

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

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

for in 可用于对象而非数组。

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

你可以按照这个

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

2 回答 2