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

394

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.

Mark Renouf
źródło
3
Wystarczy się wtrącić, nie jest to odpowiedź na twoje pierwotne pytanie (ponieważ masz wiele dobrych wyjaśnień), ale pod względem szybkości nie ma żadnej różnicy, o której warto wspomnieć: jsperf.com/dot-vs-square-brackets . Powyższy test daje co najwyżej 2% margines dla każdego z nich, są to kark i kark.
nieświadomie
To pytanie / odpowiedź może być również użyte do kluczy UTF-8.
Peter Krauss

Odpowiedzi:

422

(Ź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
Aron Rotteveel
źródło
45
Przykłady kodu i sformułowania podsumowania wyglądają okropnie znajomo. dev-archive.net/articles/js-dot-notation
Quentin
61
Czy nie ma potrzeby ponownego wymyślania koła? Powołując się na to jako odniesienie.
Aron Rotteveel
13
Notacja kropkowa
Dave Chen
4
w chrome 44 na moim wsporniku maszyny notacja jest szybsza
Austin France
2
@chenghuayang Jeśli chcesz uzyskać dostęp do właściwości obiektu, którego klucz jest przechowywany w zmiennej, nie możesz z notacją kropkową.
Abdul,
104

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.

naiquevin
źródło
12

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"].

Sagar Munjal
źródło
Czy mógłbyś rozwinąć więcej na temat array.length? Mówisz, że właściwości, do których dostęp uzyskuje się za pomocą notacji kropkowej, nie są oceniane, więc w przypadku array.length nie dałoby nam łańcucha „length” zamiast wartości szacowanej, w tym przypadku liczby elementów w tablicy? The elements in an array are stored in propertiesto mnie dezorientuje. Co rozumiesz przez przechowywane we właściwościach? Jakie są właściwości? W moim rozumieniu tablica to tylko garść wartości bez właściwości. Jeśli są one przechowywane we właściwościach, to dlaczego nie jest to property: valuetablica asocjacyjna?
Limpuls,
Ta odpowiedź jest szczególnie cenna, ponieważ wyjaśnia różnicę między tymi dwoma notacjami.
chessweb
11

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
}
Benjamin Crouzier
źródło
Pomocna odpowiedź Dziękuję Ci.
Ilyas karim
8

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

użytkownik2593104
źródło
6

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.

CdB
źródło
5

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).

Álvaro González
źródło
3

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

Lew Stefanowicz
źródło
3

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
Harunur Rashid
źródło
1

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.

Anszul
źródło
1

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.

Dušan Novák
źródło
Są też sytuacje, w których notacja w nawiasach jest w ogóle niedozwolona, ​​nawet jeśli nie masz myślników. Na przykład możesz pisać Math.sqrt(25), ale nie Math['sqrt'](25).
Pan Lister
0

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.

Manish Waran
źródło
0

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

Phani Rithvij
źródło