Acesso à propriedade JavaScript: notação de ponto x colchetes?

Além do fato óbvio de que a primeira forma poderia usar uma variável e não apenas uma cadeia de caracteres literal, existe alguma razão para usar uma sobre a outra e, em caso afirmativo, em quais casos?

Em código:

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

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

// vs. 
var x = foo.bar;

Contexto: escrevi um gerador de código que produz essas expressões e estou me perguntando qual é preferível.

(Originado daqui .)

A notação de colchete permite o uso de caracteres que não podem ser usados ​​com a notação de ponto:

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

incluindo caracteres não ASCII (UTF-8), como em myForm["ダ"]( mais exemplos ).

Em segundo lugar, a notação entre colchetes é útil ao lidar com nomes de propriedades que variam de maneira previsível:

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

Arredondar para cima:

• A notação de pontos é mais rápida de escrever e mais clara de ler.
• A notação de colchete permite acesso a propriedades que contêm caracteres especiais e seleção de propriedades usando variáveis

Outro exemplo de caracteres que não podem ser usados ​​com notação de ponto são os nomes de propriedades que contêm um ponto .

Por exemplo, uma resposta JSON poderia conter uma propriedade chamada bar.Baz.

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

A notação de colchete permite acessar as propriedades pelo nome armazenado em uma variável:

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

obj.x não funcionaria neste caso.

As duas maneiras mais comuns de acessar propriedades no JavaScript são com um ponto e entre colchetes. Ambos value.x and value[x]acessam uma propriedade em valor - mas não necessariamente a mesma propriedade. A diferença está em como x é interpretado. Ao usar um ponto, a parte após o ponto deve ser um nome de variável válido e nomeia diretamente a propriedade. Ao usar colchetes, a expressão entre colchetes é avaliada para obter o nome da propriedade. Enquanto value.x busca a propriedade do valor chamado “x”, o valor [x] tenta avaliar a expressão x e usa o resultado como o nome da propriedade.

Então, se você sabe que o imóvel em que você está interessado se chama “comprimento”, você diz value.length. Se você deseja extrair a propriedade nomeada pelo valor mantido na variável i, você diz value[i]. E porque os nomes de propriedade pode ser qualquer cadeia, se você quiser acessar uma propriedade chamada “2”ou “John Doe”, você deve usar colchetes: value[2] or value["John Doe"]. Esse é o caso mesmo que você saiba o nome exato da propriedade com antecedência, porque nenhum “2” nor “John Doe”é um nome de variável válido e, portanto, não pode ser acessado por meio de notação de ponto.

No caso de matrizes

Os elementos em uma matriz são armazenados em propriedades. Como os nomes dessas propriedades são números e geralmente precisamos obter o nome de uma variável, precisamos usar a sintaxe do colchete para acessá-los. A propriedade length de uma matriz nos diz quantos elementos ela contém. Esse nome de propriedade é um nome de variável válido e sabemos seu nome com antecedência; portanto, para encontrar o comprimento de uma matriz, você normalmente escreve array.lengthporque é mais fácil escrever do que array["length"].

A notação de ponto não funciona com algumas palavras-chave (como newe class) no Internet Explorer 8.

Eu tinha esse código:

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

E isso aciona o temido "indentificador esperado" (pelo menos no IE8 no Windows XP, eu não tentei outros ambientes). A correção simples para isso é mudar para a notação de colchete:

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

Tenha cuidado ao usar estas notações: Por exemplo. se queremos acessar uma função presente no pai de uma janela. No IE:

window['parent']['func']

não é equivalente a

window.['parent.func']

Nós podemos usar:

window['parent']['func'] 

ou

window.parent.func 

para acessá-lo

De um modo geral, eles fazem o mesmo trabalho.
No entanto, a notação de colchete oferece a oportunidade de fazer coisas que você não pode fazer com a notação de ponto, como

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

Isso pode ser estendido a qualquer propriedade que contenha caracteres especiais.

Você precisa usar colchetes se os nomes das propriedades tiverem caracteres especiais:

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

Fora isso, suponho que seja apenas uma questão de gosto. IMHO, a notação de ponto é mais curta e torna mais óbvio que é uma propriedade e não um elemento de matriz (embora, é claro, o JavaScript não tenha matrizes associativas de qualquer maneira).

A notação entre colchetes pode usar variáveis; portanto, é útil em dois casos em que a notação de ponto não funcionará:

1) Quando os nomes de propriedades são determinados dinamicamente (quando os nomes exatos não são conhecidos até o tempo de execução).

2) Ao usar um loop for..in para percorrer todas as propriedades de um objeto.

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

Você deve usar a notação de colchete quando -

1. O nome da propriedade é número.

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

2. O nome da propriedade possui um caractere especial.

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

3. O nome da propriedade é atribuído a uma variável e você deseja acessar o valor da propriedade por essa variável.

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

Caso em que a []notação é útil:

Se seu objeto é dinâmico e pode haver alguns valores aleatórios em chaves como numbere []ou qualquer outro caractere especial, por exemplo:

var a = { 1 : 3 };

Agora, se você tentar acessar como a.1será através de um erro, porque espera uma string por lá.

A notação de pontos é sempre preferível. Se você estiver usando algum editor de texto ou IDE "mais inteligente", ele mostrará nomes indefinidos desse objeto. Use a notação de colchetes apenas quando você tiver o nome com traços iguais ou algo semelhante inválido. E também se o nome estiver armazenado em uma variável.

Deixe-me adicionar mais alguns casos de uso da notação entre colchetes. Se você deseja acessar uma propriedade, digamos x-proxyem um objeto, ela -será interpretada incorretamente. Existem outros casos também como espaço, ponto, etc., onde a operação de ponto não o ajudará. Além disso, se você tiver a chave em uma variável, a única maneira de acessar o valor da chave em um objeto é por meio de notação entre colchetes. Espero que você tenha um pouco mais de contexto.

Um exemplo em que a notação de ponto falha

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

Os nomes das propriedades não devem interferir nas regras de sintaxe do javascript para que você possa acessá-las como json.property_name