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

Die Punkt- und die Klammerschreibweise werden beide für den Zugriff auf die Objekteigenschaften in JavaScript verwendet. Die Punktschreibweise wird meist verwendet, da sie leichter zu lesen und zu verstehen ist. Warum sollten wir also die Klammerschreibweise verwenden, und worin besteht der Unterschied zwischen beiden? [] ermöglicht den Zugriff auf Objekteigenschaften mit Hilfe von Variablen, da es den Ausdruck innerhalb der eckigen Klammern in eine Zeichenkette umwandelt.

const person = {
  name: 'John',
  age: 30
};

//dot notation
const nameDot = person.name;
console.log(nameDot);
// 'John'

const nameBracket = person['name'];
console.log(nameBracket);
// 'John'

Betrachten wir nun ein Beispiel für eine Variable:

const person = {
  name: 'John',
  age: 30
};

const myName = 'name';
console.log(person[myName]);
// 'John'

Ein weiterer Vorteil ist, dass die Punktschreibweise nur alphanumerische Zeichen enthält (und _ und $). Wenn Sie also beispielsweise auf ein Objekt wie das folgende zugreifen möchten (das '-' enthält, müssen Sie die Klammerschreibweise dafür verwenden)

const person = {
  'my-name' : 'John'
}

console.log(person['my-name']); // 'John'
// console.log(person.my-name); // Error

Answer 2

Ich gebe ein weiteres Beispiel, um die Nutzungsunterschiede zwischen den beiden klar zu verstehen. Bei der Verwendung von verschachtelten Arrays und verschachtelten Objekten

    const myArray = [
  {
    type: "flowers",
    list: [ "a", "b", "c" ],
  },
  {
    type: "trees",
    list: [ "x", "y", "z" ],
  }
];

Wenn wir nun auf den zweiten Eintrag in der Baumliste zugreifen wollen means y .

Wir können nicht immer die Klammerschreibweise verwenden

const secondTree = myArray[1]["list"][1]; // incorrect syntex

Stattdessen, müssen wir

const secondTree = myArray[1].list[1]; // correct syntex