Acesso à propriedade JavaScript: notação de pontos vs. colchetes?

Além do fato óbvio de que o primeiro formulário poderia usar uma variável e não apenas um literal de string, há algum motivo para usar um sobre o outro 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: Eu escrevi um gerador de código que produz essas expressões e estou me perguntando qual é preferível.

(Sourced from here .)

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

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

Em segundo lugar, a notação de 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 colchetes permite o access a propriedades contendo caracteres especiais e seleção de propriedades usando variables

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 do json pode conter uma propriedade chamada bar.Baz .

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

A notação de colchetes permite acessar 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 nesse caso.

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

Eu tinha esse código:

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

E isso desencadeia o temido “identificador esperado” (pelo menos no IE8 no windows xp, eu não tentei outros ambientes). A solução simples para isso é mudar para a notação de colchetes:

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

Tenha cuidado ao usar estas notações: Por exemplo. se quisermos acessar uma function 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 colchetes lhe dá 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 para 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; 

Além disso, suponho que seja apenas uma questão de gosto. IMHO, a notação de ponto é mais curta e torna mais óbvio que é uma propriedade em vez de um elemento de matriz (embora, é claro, o JavaScript não tenha arrays associativos).

As duas formas mais comuns de acessar propriedades em JavaScript são com um ponto e com colchetes. Tanto value.x and value[x] acessam uma propriedade no 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 os 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 xe usa o resultado como o nome da propriedade.

Então, se você sabe que a propriedade em que você está interessado é chamada de “comprimento”, você diz value.length . Se você quiser extrair a propriedade nomeada pelo valor mantido na variável i , você diz value[i] . E como os nomes das propriedades podem ser qualquer string, se você quiser acessar uma propriedade chamada “2” ou “John Doe” , deverá usar colchetes: value[2] or value["John Doe"] . Esse é o caso, mesmo que você saiba o nome preciso da propriedade antecipadamente, porque nem “2” nor “John Doe” são um nome de variável válido e, portanto, não podem ser acessados ​​por meio da 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 seu nome de uma variável, precisamos usar a syntax de colchetes para acessá-los. A propriedade length de uma matriz nos informa quantos elementos ela contém. Esse nome de propriedade é um nome de variável válido e sabemos seu nome antecipadamente, portanto, para encontrar o comprimento de um array, você geralmente escreve array.length porque é mais fácil escrever que array["length"] .

A notação de colchetes pode usar variables, por isso é útil em duas instâncias onde a notação de ponto não funcionará:

1) Quando os nomes das 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 object.

fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects

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

Se o seu object é dynamic e pode haver alguns valores randoms em teclas como number e [] ou qualquer outro caractere especial, por exemplo –

var a = { 1 : 3 };

Agora, se você tentar acessar como em a.1 isso ocorrerá por meio de um erro, porque está esperando uma string por lá.

Deixe-me adicionar mais alguns casos de uso da notação de colchetes. Se você quiser acessar uma propriedade, digamos x-proxy em um object, então - será interpretado incorretamente. Existem alguns 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 object é pela notação de colchetes. Espero que você obtenha um pouco mais de contexto.

Você tem que usar a notação de colchetes quando –

  1. O nome da propriedade é number.
    var ob = { 1: 'One', 7 : 'Seven' }
    ob.7 // SyntaxError ob[7] // "Seven"

  2. O nome da propriedade tem 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