JavaScript-Eigenschaftszugriff: Punktschreibweise vs. Klammern?

Question

Abgesehen von der offensichtlichen Tatsache, dass die erste Form eine Variable und nicht nur ein Zeichenkettenliteral verwenden könnte, gibt es irgendeinen Grund, das eine dem anderen vorzuziehen, und wenn ja, in welchen Fällen?

Im 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, was vorzuziehen ist.

Answer 1

Fall, in dem [] Notation hilfreich ist:

Wenn Ihr Objekt dynamisch ist und einige zufällige Werte in den Schlüsseln enthalten sein könnten, wie number y [] oder ein anderes Sonderzeichen, zum Beispiel -

var a = { 1 : 3 };

Wenn Sie nun versuchen, in etwa a.1 wird es einen Fehler geben, weil es dort eine Zeichenkette erwartet.

Answer 2

Die Punktschreibweise ist immer vorzuziehen. Wenn Sie eine "intelligentere" IDE oder einen Texteditor verwenden, werden undefinierte Namen von diesem Objekt angezeigt. Verwenden Sie die Klammerschreibweise nur, wenn Sie den Namen mit Bindestrichen oder ähnlichem ungültig machen wollen. Und auch, wenn der Name in einer Variablen gespeichert ist.

Answer 3

Lassen Sie mich noch einen weiteren Anwendungsfall für die eckige Klammer hinzufügen. Wenn Sie auf eine Eigenschaft zugreifen wollen, sagen wir x-proxy in einem Objekt, dann - falsch interpretiert werden. Es gibt auch einige andere Fälle wie Leerzeichen, Punkt usw., in denen die Punkt-Operation nicht hilfreich ist. Auch wenn Sie den Schlüssel in einer Variablen haben, ist die einzige Möglichkeit, auf den Wert des Schlüssels in einem Objekt zuzugreifen, die Klammerschreibweise. Ich hoffe, Sie erhalten etwas mehr Kontext.

Answer 4

Ein Beispiel, bei dem die Punktnotation versagt

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 nicht mit den Syntaxregeln von Javascript kollidieren, damit Sie in der Lage sind, auf sie als json.property_name

Answer 5

Oder wenn Sie die classList-Aktion für ein Element dynamisch ändern wollen:

// Correct

showModal.forEach(node => {
  node.addEventListener(
    'click',
    () => {
      changeClass(findHidden, 'remove'); // Correct
    },
    true
  );
});

//correct
function changeClass(findHidden, className) {
  for (let item of findHidden) {
    console.log(item.classList[className]('hidden'));// Correct
  }
}

// Incorrect 
function changeClass(findHidden, className) {
  for (let item of findHidden) {
    console.log(item.classList.className('hidden')); // Doesn't work
  }
}