Zugriff auf JavaScript-Eigenschaften: Punktnotation vs. Klammern?

Abgesehen von der offensichtlichen Tatsache, dass das erste Formular eine Variable und nicht nur ein Zeichenfolgenliteral verwenden könnte, gibt es einen Grund, eine übereinander zu verwenden, und wenn ja, in welchen Fällen?

In Code:

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

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

// vs. 
var x = foo.bar;

Kontext: Ich habe einen Codegenerator geschrieben, der diese Ausdrücke erzeugt, und ich frage mich, welcher vorzuziehen ist.

(Von hier bezogen .)

Die eckige Klammernotation ermöglicht die Verwendung von Zeichen, die mit der Punktnotation nicht verwendet werden können:

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

einschließlich Nicht-ASCII-Zeichen (UTF-8) wie in myForm["ダ"]( weitere Beispiele ).

Zweitens ist die eckige Klammer nützlich, wenn Sie mit Eigenschaftsnamen arbeiten, die auf vorhersehbare Weise variieren:

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

Zusammenfassen:

• Die Punktnotation ist schneller zu schreiben und klarer zu lesen.
• Die eckige Klammer ermöglicht den Zugriff auf Eigenschaften mit Sonderzeichen und die Auswahl von Eigenschaften mithilfe von Variablen

Ein weiteres Beispiel für Zeichen, die nicht mit der Punktnotation verwendet werden können, sind Eigenschaftsnamen, die selbst einen Punkt enthalten .

Beispielsweise könnte eine JSON-Antwort eine Eigenschaft enthalten, die aufgerufen wird bar.Baz.

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

Mit der Klammernotation können Sie auf Eigenschaften nach Namen zugreifen, die in einer Variablen gespeichert sind:

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

obj.x würde in diesem Fall nicht funktionieren.

Die beiden häufigsten Möglichkeiten, auf Eigenschaften in JavaScript zuzugreifen, sind ein Punkt und eckige Klammern. Beide value.x and value[x]greifen auf eine Eigenschaft nach Wert zu - aber nicht unbedingt auf dieselbe Eigenschaft. Der Unterschied besteht darin, wie x interpretiert wird. Bei Verwendung eines Punkts muss der Teil nach dem Punkt ein gültiger Variablenname sein und die Eigenschaft direkt benennen. Bei Verwendung von eckigen Klammern wird der Ausdruck zwischen den Klammern ausgewertet, um den Eigenschaftsnamen zu erhalten. Während value.x die Eigenschaft des Werts "x" abruft, versucht value [x], den Ausdruck x auszuwerten, und verwendet das Ergebnis als Eigenschaftsnamen.

Wenn Sie also wissen, dass die Immobilie, an der Sie interessiert sind, "Länge" heißt, sagen Sie value.length. Wenn Sie die Eigenschaft extrahieren möchten, die durch den in der Variablen enthaltenen Wert benannt ist i, sagen Sie value[i]. Und da Eigenschaftsnamen eine beliebige Zeichenfolge sein können, müssen Sie eckige Klammern verwenden , wenn Sie auf eine Eigenschaft mit dem Namen “2”oder zugreifen möchten “John Doe”: value[2] or value["John Doe"]. Dies ist der Fall, obwohl Sie den genauen Namen der Eigenschaft im Voraus kennen, da keiner der beiden “2” nor “John Doe”einen gültigen Variablennamen hat und daher nicht über die Punktnotation zugegriffen werden kann.

Im Falle von Arrays

Die Elemente in einem Array werden in Eigenschaften gespeichert. Da die Namen dieser Eigenschaften Zahlen sind und wir häufig ihren Namen von einer Variablen erhalten müssen, müssen wir die Klammer-Syntax verwenden, um auf sie zuzugreifen. Die Länge-Eigenschaft eines Arrays gibt an, wie viele Elemente es enthält. Dieser Eigenschaftsname ist ein gültiger Variablenname, und wir kennen seinen Namen im Voraus. Um die Länge eines Arrays zu ermitteln, schreiben Sie normalerweise, array.lengthda dies einfacher zu schreiben ist als array["length"].

Die Punktnotation funktioniert bei einigen Schlüsselwörtern (wie newund class) im Internet Explorer 8 nicht.

Ich hatte diesen Code:

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

Und dies löst den gefürchteten "erwarteten Indentifier" aus (zumindest unter IE8 unter Windows XP habe ich keine anderen Umgebungen ausprobiert). Die einfache Lösung dafür besteht darin, zur Klammer-Notation zu wechseln:

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

Seien Sie vorsichtig, wenn Sie diese Notationen verwenden: Zum Beispiel. wenn wir auf eine Funktion zugreifen möchten, die im übergeordneten Fenster eines Fensters vorhanden ist. Im IE:

window['parent']['func']

ist nicht gleichbedeutend mit

window.['parent.func']

Wir können entweder verwenden:

window['parent']['func'] 

oder

window.parent.func 

um darauf zuzugreifen

Im Allgemeinen machen sie den gleichen Job.
Trotzdem gibt Ihnen die Klammernotation die Möglichkeit, Dinge zu tun, die Sie mit der Punktnotation nicht machen können, wie z

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

Dies kann auf jede Eigenschaft erweitert werden, die Sonderzeichen enthält.

Sie müssen Klammern verwenden, wenn die Eigenschaftsnamen Sonderzeichen enthalten:

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

Davon abgesehen ist es wohl nur Geschmackssache. IMHO ist die Punktnotation kürzer und es wird deutlicher, dass es sich eher um eine Eigenschaft als um ein Array-Element handelt (obwohl JavaScript natürlich sowieso keine assoziativen Arrays hat).

Die Klammernotation kann Variablen verwenden, daher ist sie in zwei Fällen nützlich, in denen die Punktnotation nicht funktioniert:

1) Wenn die Eigenschaftsnamen dynamisch ermittelt werden (wenn die genauen Namen erst zur Laufzeit bekannt sind).

2) Wenn Sie eine for..in-Schleife verwenden, um alle Eigenschaften eines Objekts zu durchlaufen.

Quelle: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Sie müssen die eckige Klammer verwenden, wenn -

1. Der Eigenschaftsname ist Nummer.

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

2. Der Eigenschaftsname hat ein Sonderzeichen.

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

3. Der Eigenschaftsname wird einer Variablen zugewiesen, und Sie möchten über diese Variable auf den Eigenschaftswert zugreifen.

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

Fall, in dem die []Notation hilfreich ist:

Wenn Ihr Objekt dynamisch ist und einige zufällige Werte in Schlüsseln wie numberund []oder einem anderen Sonderzeichen vorhanden sein können, z.

var a = { 1 : 3 };

Wenn Sie nun versuchen, wie a.1in einem Fehler darauf zuzugreifen , weil dort eine Zeichenfolge erwartet wird.

Punktnotation ist immer vorzuziehen. Wenn Sie eine "intelligentere" IDE oder einen Texteditor verwenden, werden undefinierte Namen von diesem Objekt angezeigt. Verwenden Sie die Notation in Klammern nur, wenn Sie den Namen mit ähnlichen Strichen oder ähnlichem ungültig haben. Und auch, wenn der Name in einer Variablen gespeichert ist.

Lassen Sie mich noch einen Anwendungsfall der eckigen Klammer hinzufügen. Wenn Sie beispielsweise x-proxyin einem Objekt auf eine Eigenschaft zugreifen möchten , -wird dies falsch interpretiert. Es gibt auch einige andere Fälle wie Leerzeichen, Punkte usw., in denen die Punktoperation Ihnen nicht hilft. Auch wenn Sie den Schlüssel in einer Variablen haben, können Sie nur in Klammernotation auf den Wert des Schlüssels in einem Objekt zugreifen. Hoffe du bekommst mehr Kontext.

Ein Beispiel, bei dem die Punktnotation fehlschlägt

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

Die Eigenschaftsnamen sollten die Syntaxregeln von Javascript nicht beeinträchtigen, damit Sie als auf sie zugreifen können json.property_name