Dostęp do właściwości JavaScript: notacja kropkowa vs. nawiasy?

Poza oczywistym faktem, że pierwsza forma może wykorzystywać zmienną, a nie tylko literał łańcuchowy, czy istnieje jakiś powód, aby używać jednego nad drugim, a jeśli tak, to w jakich przypadkach?

W kodzie:

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

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

// vs. 
var x = foo.bar;

Kontekst: Napisałem generator kodu, który produkuje te wyrażenia i zastanawiam się, który jest lepszy.

(Źródło stąd .)

Notacja w nawiasach kwadratowych pozwala na stosowanie znaków, których nie można używać z notacją kropkową:

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

w tym znaki spoza ASCII (UTF-8), jak w myForm["ダ"]( więcej przykładów ).

Po drugie, notacja w nawiasach kwadratowych jest przydatna w przypadku nazw właściwości, które różnią się w przewidywalny sposób:

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

Podsumowanie:

• Notacja kropkowa jest szybsza do zapisu i bardziej czytelna.
• Notacja w nawiasach kwadratowych umożliwia dostęp do właściwości zawierających znaki specjalne i wybór właściwości za pomocą zmiennych

Innym przykładem znaków, których nie można używać z notacją kropkową, są nazwy właściwości, które same zawierają kropkę .

Na przykład odpowiedź JSON może zawierać właściwość o nazwie bar.Baz.

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

Notacja w nawiasach umożliwia dostęp do właściwości według nazwy przechowywanej w zmiennej:

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

obj.x nie zadziałałoby w tym przypadku.

Dwa najczęstsze sposoby uzyskiwania dostępu do właściwości w JavaScript to kropka i nawiasy kwadratowe. Oba value.x and value[x]uzyskują dostęp do nieruchomości o wartości - ale niekoniecznie do tej samej właściwości. Różnica polega na interpretacji x. W przypadku użycia kropki część po kropce musi być prawidłową nazwą zmiennej i bezpośrednio określa nazwę właściwości. Podczas używania nawiasów kwadratowych wyrażenie między nawiasami jest obliczane w celu uzyskania nazwy właściwości. Podczas gdy value.x pobiera właściwość wartości o nazwie „x”, wartość [x] próbuje ocenić wyrażenie x i wykorzystuje wynik jako nazwę właściwości.

Jeśli więc wiesz, że interesująca Cię właściwość nazywa się „długością”, mówisz value.length. Jeśli chcesz wyodrębnić właściwość nazwaną wartością przechowywaną w zmiennej i, powiedz value[i]. A ponieważ nazwy nieruchomość może być dowolny ciąg znaków, jeśli chcesz uzyskać dostęp właściwość o nazwie “2”lub “John Doe”należy użyć nawiasów kwadratowych: value[2] or value["John Doe"]. Dzieje się tak, mimo że z góry znasz dokładną nazwę właściwości, ponieważ żadna z nich nie “2” nor “John Doe”jest prawidłową nazwą zmiennej i dlatego nie można uzyskać do niej dostępu za pomocą notacji kropkowej.

W przypadku tablic

Elementy w tablicy są przechowywane we właściwościach. Ponieważ nazwy tych właściwości są liczbami i często musimy uzyskać ich nazwę ze zmiennej, musimy użyć składni nawiasu, aby uzyskać do nich dostęp. Właściwość length tablicy mówi nam, ile elementów zawiera. Ta nazwa właściwości jest prawidłową nazwą zmiennej i znamy ją z góry, więc aby znaleźć długość tablicy, zwykle piszesz, array.lengthponieważ łatwiej jest ją zapisać array["length"].

Notacja kropkowa nie działa z niektórymi słowami kluczowymi (jak newi class) w programie Internet Explorer 8.

Miałem ten kod:

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

I to wywołuje przerażający „oczekiwany identyfikator” (przynajmniej w IE8 na Windows XP, nie próbowałem innych środowisk). Prostym rozwiązaniem jest przejście na notację w nawiasach:

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

Zachowaj ostrożność podczas używania tych notacji: Na przykład. jeśli chcemy uzyskać dostęp do funkcji znajdującej się w elemencie macierzystym okna. W IE:

window['parent']['func']

nie jest równoważne z

window.['parent.func']

Możemy użyć:

window['parent']['func'] 

lub

window.parent.func 

aby uzyskać do niego dostęp

Ogólnie rzecz biorąc, wykonują tę samą pracę.
Niemniej jednak notacja w nawiasach daje możliwość robienia rzeczy, których nie można zrobić za pomocą notacji kropkowej

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

Można to rozszerzyć na dowolną właściwość zawierającą znaki specjalne.

Musisz użyć nawiasów, jeśli nazwy właściwości mają znaki specjalne:

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

Poza tym przypuszczam, że to tylko kwestia gustu. IMHO, notacja kropkowa jest krótsza i sprawia, że ​​bardziej oczywiste jest, że jest to właściwość niż element tablicy (chociaż oczywiście JavaScript i tak nie ma tablic asocjacyjnych).

Notacja w nawiasach może używać zmiennych, więc jest przydatna w dwóch przypadkach, w których notacja kropkowa nie będzie działać:

1) Gdy nazwy właściwości są określane dynamicznie (gdy dokładne nazwy nie są znane do czasu uruchomienia).

2) Podczas korzystania z pętli for..in, aby przejść przez wszystkie właściwości obiektu.

źródło: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Należy użyć notacji w nawiasach kwadratowych, gdy -

1. Nazwa właściwości to liczba.

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

2. Nazwa właściwości ma charakter specjalny.

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

3. Nazwa właściwości jest przypisana do zmiennej i chcesz uzyskać dostęp do wartości właściwości przez tę zmienną.

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

Przypadek, w którym []notacja jest pomocna:

Jeśli twój obiekt jest dynamiczny i mogą występować losowe wartości w klawiszach takich jak numberi / []lub inny znak specjalny, na przykład -

var a = { 1 : 3 };

Teraz, jeśli spróbujesz uzyskać dostęp w a.1ten sposób, to przez błąd, ponieważ oczekuje tam łańcucha.

Notacja kropkowa jest zawsze lepsza. Jeśli używasz jakiegoś „inteligentniejszego” IDE lub edytora tekstowego, pokażą niezdefiniowane nazwy z tego obiektu. Notacji w nawiasach należy używać tylko wtedy, gdy nazwa ma podobne myślniki lub coś podobnego jest niepoprawna. A także, jeśli nazwa jest przechowywana w zmiennej.

Dodajmy jeszcze jeden przypadek użycia notacji w nawiasach kwadratowych. Jeśli chcesz uzyskać dostęp do właściwości powiedz x-proxyw obiekcie, wówczas -zostanie źle zinterpretowany. Są też inne przypadki, takie jak spacja, kropka itp., W których operacja kropki nie pomoże. Również jeśli masz klucz w zmiennej, wówczas jedynym sposobem na uzyskanie dostępu do wartości klucza w obiekcie jest notacja nawiasowa. Mam nadzieję, że uzyskasz więcej kontekstu.

Przykład, w którym notacja kropkowa kończy się niepowodzeniem

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

Nazwy właściwości nie powinny zakłócać reguł składni javascript, abyś mógł uzyskać do nich dostęp jako json.property_name