JavaScriptプロパティへのアクセス：ドット表記vsブラケット？

最初の形式が単なる文字列リテラルではなく変数を使用できるという明白な事実以外に、どちらを使用するのか、またそうであるのはどの場合ですか？

コードで：

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

コンテキスト：これらの式を生成するコードジェネレーターを作成しましたが、どちらが望ましいのでしょうか。

（ここから入手。）

角括弧表記では、ドット表記では使用できない文字を使用できます。

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

myForm["ダ"]（その他の例）のように、非ASCII（UTF-8）文字を含めます。

次に、予測可能な方法で変化するプロパティ名を処理する場合、角かっこ表記が役立ちます。

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

切り上げする：

• ドット表記は、書き込みが速く、読み取りが明確です。
• 角括弧表記により、特殊文字を含むプロパティへのアクセス、および変数を使用したプロパティの選択が可能

ドット表記で使用できない文字の別の例は、ドットを含むプロパティ名です。

たとえば、json応答にはというプロパティを含めることができますbar.Baz。

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

ブラケット表記を使用すると、変数に格納されている名前でプロパティにアクセスできます。

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x この場合は機能しません。

JavaScriptでプロパティにアクセスする最も一般的な2つの方法は、ドットと角括弧です。どちらもvalue.x and value[x]値のプロパティにアクセスしますが、必ずしも同じプロパティである必要はありません。違いは、xの解釈方法です。ドットを使用する場合、ドットの後の部分は有効な変数名である必要があり、プロパティを直接指定します。角かっこを使用すると、角かっこ間の式が評価され、プロパティ名が取得されます。value.xは「x」という名前の値のプロパティをフェッチしますが、value [x]は式xを評価し、その結果をプロパティ名として使用します。

したがって、関心のあるプロパティが「長さ」と呼ばれていることがわかっている場合は、と言いvalue.lengthます。変数iに保持されている値によって名前が付けられたプロパティを抽出する場合は、次のように言いvalue[i]ます。また、プロパティ名には任意の文字列を使用できるため、“2”orまたはという名前のプロパティにアクセスする“John Doe”場合は、角かっこを使用する必要がありますvalue[2] or value["John Doe"]。これは、プロパティの正確な名前が事前にわかっている場合でも同じです。どちらも“2” nor “John Doe”有効な変数名ではないため、ドット表記ではアクセスできません。

配列の場合

配列の要素はプロパティに格納されます。これらのプロパティの名前は数値であり、多くの場合変数からそれらの名前を取得する必要があるため、ブラケット構文を使用してアクセスする必要があります。配列の長さプロパティは、配列に含まれる要素の数を示します。このプロパティ名は有効な変数名であり、その名前は事前にわかっているため、配列の長さを見つけるには、通常array.lengthよりも簡単に書き込むことができるため、配列の長さを見つけますarray["length"]。

Internet Explorer 8の一部のキーワード（newおよびなどclass）ではドット表記が機能しません。

私はこのコードを持っていました：

//app.users is a hash
app.users.new = {
  // some code
}

そして、これは恐ろしい「予想される識別子」をトリガーします（少なくともWindows XPのIE8では、私は他の環境を試していません）。そのための簡単な修正は、ブラケット表記に切り替えることです。

app.users['new'] = {
  // some code
}

これらの表記を使用するときは注意してください。ウィンドウの親にある関数にアクセスしたい場合。IEの場合：

window['parent']['func']

に等しくない

window.['parent.func']

次のいずれかを使用できます。

window['parent']['func'] 

または

window.parent.func 

アクセスする

一般的に言えば、彼らは同じ仕事をします。
それにもかかわらず、ブラケット表記は、ドット表記ではできないことを行う機会を提供します。

var x = elem["foo[]"]; // can't do elem.foo[];

これは、特殊文字を含む任意のプロパティに拡張できます。

プロパティ名に特殊文字が含まれている場合は、角かっこを使用する必要があります。

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

それ以外は、好みの問題だと思います。私見、ドット表記は短く、配列要素ではなくプロパティであることを明確にします（もちろん、JavaScriptには連想配列がありません）。

ブラケット表記は変数を使用できるため、ドット表記が機能しない2つの場合に役立ちます。

1）プロパティ名が動的に決定されるとき（正確な名前が実行時までわからないとき）。

2）for..inループを使用してオブジェクトのすべてのプロパティを確認する場合。

ソース：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

次の場合は角括弧表記を使用する必要があります-

1. プロパティ名は数値です。

   var ob = {
     1: 'One',
     7 : 'Seven'
   }
   ob.7  // SyntaxError
   ob[7] // "Seven"

2. プロパティ名には特殊文字が含まれています。

   var ob = {
     'This is one': 1,
     'This is seven': 7,
   }  
   ob.'This is one'  // SyntaxError
   ob['This is one'] // 1

3. プロパティ名が変数に割り当てられており、この変数によってプロパティ値にアクセスしたい。

   var ob = {
     'One': 1,
     'Seven': 7,
   }
   
   var _Seven = 'Seven';
   ob._Seven  // undefined
   ob[_Seven] // 7

[]表記が役立つケース：

オブジェクトが動的で、やなどのキーnumber、[]またはその他の特殊文字にランダムな値が含まれている可能性がある場合-

var a = { 1 : 3 };

そこにアクセスしようa.1とすると、エラーが発生します。これは、そこに文字列があることを期待しているためです。

ドット表記が常に望ましい。「よりスマートな」IDEまたはテキストエディタを使用している場合は、そのオブジェクトの未定義の名前が表示されます。大括弧表記は、ダッシュなどの無効な名前が含まれている場合にのみ使用してください。また、名前が変数に格納されている場合。

角括弧表記の使用例をもう少し追加しましょう。x-proxyオブジェクトのプロパティにアクセスしたい場合、-間違って解釈されます。それらは、スペース、ドットなど、ドット操作が役に立たない他のいくつかのケースです。また、uが変数にキーを持っている場合、オブジェクトのキーの値にアクセスする唯一の方法は、ブラケット表記です。もう少しコンテキストを取得してください。

ドット表記が失敗する例

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

プロパティ名は、JavaScriptの構文規則に干渉してはいけません。 json.property_name