0

私は D3.js ライブラリを使用しており、未知の動作に遭遇しました。範囲関数を使用して 0 から 99 までの 100 個の数値を含む配列を作成し、その後、次のように配列の各メンバーに関数をマップしました。

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

javascript に関する Mozilla docs には、このマップ関数の動作の説明があります。

この配列内のすべての要素に対して提供された関数を呼び出した結果で、新しい配列を作成します。

このコードの実行後、変数データは 100 個のオブジェクトを含む配列になり、それぞれの属性 x と y が 0 に設定されると予想していました。

2 つの異なる方法を使用して、これらのオブジェクトにアクセスしようとしました。最初は、次のように 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 サイクルを介した配列内のオブジェクトへのアクセスが機能しなかった理由はわかりませんが、直接のインデックス アクセスは成功しました。マップ関数が関数の結果を元の配列にマップする方法について何かが欠けている可能性があると思います。または、配列への for/in サイクル アクセスがインデックス経由とは異なる可能性があります。なぜこれが起こるのか誰か知っていますか？ありがとうございました。

4

2 に答える 2

2

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);
于 2013-09-30T20:57:07.907 に答える
-1

あなたが言ったように、

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
于 2013-09-30T20:56:54.880 に答える