Accesso alle proprietà JavaScript: notazione punto vs parentesi?

A parte il fatto ovvio che la prima forma potrebbe usare una variabile e non solo una stringa letterale, c'è qualche motivo per usarne una rispetto all'altra, e in tal caso in quali casi?

Nel codice:

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

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

// vs. 
var x = foo.bar;

Contesto: ho scritto un generatore di codice che produce queste espressioni e mi chiedo quale sia preferibile.

(Proveniente da qui .)

La notazione a parentesi quadra consente l'uso di caratteri che non possono essere utilizzati con la notazione a punti:

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

compresi i caratteri non ASCII (UTF-8), come in myForm["ダ"]( altri esempi ).

In secondo luogo, la notazione tra parentesi quadre è utile quando si hanno a che fare con nomi di proprietà che variano in modo prevedibile:

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

Arrotondare:

• La notazione a punti è più veloce da scrivere e più chiara da leggere.
• La notazione con parentesi quadra consente l'accesso a proprietà contenenti caratteri speciali e la selezione di proprietà mediante variabili

Un altro esempio di caratteri che non possono essere utilizzati con la notazione punto sono i nomi delle proprietà che a loro volta contengono un punto .

Ad esempio una risposta json potrebbe contenere una proprietà chiamata bar.Baz.

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

La notazione di parentesi quadra consente di accedere alle proprietà per nome memorizzate in una variabile:

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

obj.x non funzionerebbe in questo caso.

I due modi più comuni per accedere alle proprietà in JavaScript sono con un punto e tra parentesi quadre. Entrambi value.x and value[x]accedono a una proprietà in base al valore, ma non necessariamente alla stessa proprietà. La differenza sta nel modo in cui x viene interpretato. Quando si utilizza un punto, la parte dopo il punto deve essere un nome di variabile valido e assegna direttamente un nome alla proprietà. Quando si usano parentesi quadre, l'espressione tra parentesi viene valutata per ottenere il nome della proprietà. Mentre value.x recupera la proprietà del valore denominato "x", value [x] tenta di valutare l'espressione x e utilizza il risultato come nome della proprietà.

Quindi, se sai che la proprietà che ti interessa si chiama "lunghezza", dici value.length. Se vuoi estrarre la proprietà chiamata dal valore contenuto nella variabile i, dici value[i]. E poiché i nomi delle proprietà può essere qualsiasi stringa, se si desidera accedere a una proprietà denominata “2”o “John Doe”, è necessario utilizzare le parentesi quadre: value[2] or value["John Doe"]. Questo è il caso anche se si conosce in anticipo il nome preciso della proprietà, poiché nessuno dei due “2” nor “John Doe”è un nome di variabile valido e pertanto non è possibile accedervi tramite la notazione a punti.

In caso di array

Gli elementi in un array sono memorizzati in proprietà. Poiché i nomi di queste proprietà sono numeri e spesso dobbiamo ottenere il loro nome da una variabile, per accedervi dobbiamo usare la sintassi del bracketing. La proprietà length di un array ci dice quanti elementi contiene. Questo nome di proprietà è un nome di variabile valido e ne conosciamo il nome in anticipo, quindi per trovare la lunghezza di un array, in genere si scrive array.lengthperché è più facile da scrivere rispetto a array["length"].

La notazione a punti non funziona con alcune parole chiave (come newe class) in Internet Explorer 8.

Ho avuto questo codice:

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

E questo innesca il temuto "indentificatore previsto" (almeno su IE8 su Windows XP, non ho provato altri ambienti). La soluzione semplice è quella di passare alla notazione parentesi:

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

Fai attenzione quando usi queste notazioni: ad es. se vogliamo accedere a una funzione presente nel genitore di una finestra. In IE:

window['parent']['func']

non è equivalente a

window.['parent.func']

Possiamo usare:

window['parent']['func'] 

o

window.parent.func 

per accedervi

In generale, fanno lo stesso lavoro.
Tuttavia, la notazione tra parentesi ti dà l'opportunità di fare cose che non puoi fare con la notazione punto, come

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

Questo può essere esteso a qualsiasi proprietà contenente caratteri speciali.

È necessario utilizzare le parentesi se i nomi delle proprietà hanno caratteri speciali:

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

A parte questo, suppongo sia solo una questione di gusti. IMHO, la notazione dei punti è più breve e rende più ovvio che si tratta di una proprietà piuttosto che di un elemento array (anche se ovviamente JavaScript non ha comunque array associativi).

Devi usare la notazione parentesi quadra quando -

1. Il nome della proprietà è numero.

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

2. Il nome della proprietà ha un carattere speciale.

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

3. Il nome della proprietà è assegnato a una variabile e si desidera accedere al valore della proprietà da questa variabile.

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

La notazione con parentesi può usare le variabili, quindi è utile in due casi in cui la notazione con punti non funzionerà:

1) Quando i nomi delle proprietà sono determinati dinamicamente (quando i nomi esatti non sono noti fino al runtime).

2) Quando si utilizza un ciclo for..in per esaminare tutte le proprietà di un oggetto.

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

Caso in cui la []notazione è utile:

Se il tuo oggetto è dinamico e potrebbero esserci dei valori casuali in chiavi come numbere []o in qualsiasi altro carattere speciale, ad esempio -

var a = { 1 : 3 };

Ora, se provi ad accedere come a.1farebbe attraverso un errore, perché si aspetta una stringa laggiù.

La notazione a punti è sempre preferibile. Se stai usando un IDE "più intelligente" o un editor di testo, mostrerà nomi non definiti da quell'oggetto. Usa la notazione tra parentesi solo quando hai il nome con trattini simili o qualcosa di simile non valido. E anche se il nome è memorizzato in una variabile.

Vorrei aggiungere qualche altro caso d'uso della notazione parentesi quadra. Se si desidera accedere a una proprietà, dire x-proxyin un oggetto, quindi -verrà interpretato in modo errato. Ci sono anche altri casi come spazio, punto, ecc., In cui l'operazione punto non ti aiuterà. Inoltre, se hai la chiave in una variabile, l'unico modo per accedere al valore della chiave in un oggetto è la notazione tra parentesi. Spero che tu abbia un po 'più di contesto.

Un esempio in cui la notazione punto non riesce

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

I nomi delle proprietà non dovrebbero interferire con le regole di sintassi di javascript affinché tu possa accedervi come json.property_name