web-dev-qa-db-ja.com

JavaScriptのプロパティへのアクセス：ドット表記とかっこ？

最初の形式が文字列リテラルだけではなく変数を使用できるという明白な事実以外に、一方を他方よりも上に使用する理由はありますか。

コードでは：

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

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

// vs. 
var x = foo.bar;

文脈：これらの式を生成するコードジェネレータを書きましたが、どちらが望ましいのか疑問に思います。

javascriptsyntax
366
Mark Renouf

（ ここ からの供給）

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

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

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

2番目に、大括弧表記は、予測可能な方法で異なるプロパティ名を扱うときに便利です。

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

切り上げ：

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

ドット表記で使用できない文字のもう1つの例は、それ自体がドットを含むプロパティ名です。

例えば、jsonレスポンスはbar.Bazという名前のプロパティを含むことができます。

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

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

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

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

98
naiquevin

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

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

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

そしてこれは恐ろしい「予期される識別子」を引き起こします（少なくともWindows XP上のIE8では、私は他の環境を試したことがありません）。そのための簡単な修正は、括弧表記に切り替えることです。

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

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

window['parent']['func']

と等価ではありません

window.['parent.func']

どちらを使用しても構いません。

window['parent']['func']

または

window.parent.func

アクセスする

8
user2593104

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

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

配列の場合

配列の要素はプロパティに格納されています。これらのプロパティの名前は数値であり、多くの場合変数から名前を取得する必要があるため、アクセスするには角かっこの構文を使用する必要があります。 配列の長さプロパティは、それに含まれる要素の数を示します。このプロパティ名は有効な変数名であり、その名前は事前にわかっています。したがって、配列の長さを調べるには、array.lengthを書くarray["length"]よりも書きやすいです。

7
Sagar Munjal

一般的に言って、彼らは同じ仕事をします。
それにもかかわらず、大括弧表記は、ドット表記ではできないことをする機会をあなたに与えます。

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

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

6
CdB

プロパティ名に特殊文字が含まれる場合は角括弧を使用する必要があります。

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

それ以外に、私はそれが単なる好みの問題だと思います。私見、ドット記法はより短く、そしてそれがそれが配列要素よりむしろ特性であることをより明白にする（もちろんJavaScriptは連想配列をとにかく持っていないが）。

5
Álvaro González

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

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

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

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

3
Lev Stefanovich

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

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

    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
2
Harunur Rashid

[]表記が役立つ場合

もしあなたのオブジェクトが動的で、numberや[]、あるいは他の特殊文字のようなキーにランダムな値があるかもしれません、例えば：

var a = { 1 : 3 };

a.1のようにアクセスしようとすると、エラーが発生します。文字列があそこにあることが予想されるためです。

1
Anshul

角括弧表記のユースケースをもう1つ追加します。オブジェクト内のx-proxyというプロパティにアクセスしたい場合、-は誤って解釈されます。それらはスペース、ドットなどのような他のいくつかのケースでもあります、ドット操作はあなたを助けないでしょう。また、uが変数内にキーを持っている場合、オブジェクト内のキーの値にアクセスする唯一の方法は大括弧表記によるものです。あなたがもう少し文脈を得ることを願っています。

0
Manish Waran