このようなことを試していますが、この例は機能しません。
jsObj = {};
for (var i = 1; i <= 10; i++) {
jsObj{'key' + i} = 'example ' + 1;
}
このような動的キーを作成するにはどうすればよいでしょうか?
ベストアンサー1
角括弧:
jsObj['key' + i] = 'example' + 1;
JavaScript では、すべての配列がオブジェクトですが、すべてのオブジェクトが配列であるわけではありません。主な違い (純粋な JavaScript やプレーンなオブジェクトで真似するのはかなり難しい違い) は、配列インスタンスがlength
プロパティを維持し、その値が、名前が数値であり、数値に変換されたときにそのようなすべてのプロパティの中で最大となるプロパティの数値に 1 を加えた値を反映するようにすることです。これは非常に奇妙に聞こえますが、配列インスタンスが与えられると、、、などの名前を持つプロパティはすべて特別に扱われ、その存在によって の値が決まることを意味します"0"
。"5"
さらに"207"
、length
の値を設定することで、そのようなプロパティを削除length
できます。配列の を に設定すると、名前が整数のように見えるすべてのプロパティが効果的に削除されます。length
0
なるほど、これが配列を特別なものにしているわけですね。しかし、これらはすべて、JavaScript[ ]
演算子の動作とはまったく関係ありません。この演算子は、あらゆるオブジェクトで機能するオブジェクト プロパティ アクセス メカニズムです。この点で重要なのは、数値配列プロパティ名は、単純なプロパティ アクセスに関しては特別ではないということです。数値配列プロパティ名は、たまたま数字のように見える文字列にすぎませんが、JavaScript オブジェクト プロパティ名は、任意の種類の文字列にすることができます。
したがって、演算子は配列を反復するループ[ ]
内で次のように動作します。for
for (var i = 0; i < myArray.length; ++i) {
var value = myArray[i]; // property access
// ...
}
[ ]
これは、名前が計算された文字列であるプロパティにアクセスする場合の動作とまったく同じです。
var value = jsObj["key" + i];
ここでの演算子は、どちらの場合もまったく[ ]
同じことを行います。言い換えれば、一方のケースで関係するオブジェクトがたまたま配列であるという事実は重要ではありません。
を使用してプロパティ値を設定する場合も、プロパティの維持に関する特別な動作を除いて[ ]
、ストーリーは同じです。配列インスタンスに数値キーを持つプロパティを設定する場合:length
myArray[200] = 5;
すると (「200」が最大の数値プロパティ名であると仮定すると)、length
プロパティはプロパティ割り当ての副作用として に更新されます201
。ただし、同じことがプレーン オブジェクトに対して行われた場合は次のようになります。
myObj[200] = 5;
そのような副作用はありません。配列とオブジェクトの両方の「200」というプロパティは、5
それ以外はまったく同じ方法で値に設定されます。
このlength
動作は便利なので、すべてのオブジェクトをプレーン オブジェクトではなく Array コンストラクターのインスタンスにすればよいと考える人もいるかもしれません。これについては直接的な問題はありません (ただし、一部のプロパティは に含まれ、他のプロパティは含まれないことは、特に他の言語に慣れている人にとっては混乱を招く可能性があります)。ただし、JSON シリアル化 (かなり一般的なもの) を扱っている場合は、配列インスタンスは数値で名前が付けられたプロパティのみlength
を含む方法で JSON にシリアル化されることを理解してください。配列に追加された他のプロパティは、シリアル化された JSON 形式には表示されません。たとえば、次のようになります。
var obj = [];
obj[0] = "hello world";
obj["something"] = 5000;
var objJSON = JSON.stringify(obj);
「objJSON」の値は だけを含む文字列になります["hello world"]
。つまり、「something」プロパティは失われます。
ES2015:
ES6 JavaScriptの機能を使用できる場合は、計算されたプロパティ名これを非常に簡単に処理するには:
var key = 'DYNAMIC_KEY',
obj = {
[key]: 'ES6!'
};
console.log(obj);
// > { 'DYNAMIC_KEY': 'ES6!' }