Diferença entre o uso de notação de colchetes (“) e ponto (`.`)

Qual é a diferença real no uso de [] e . para acessar propriedades de matriz ou object? Qual deles usar?

Também porque não faz . operador permite a propriedade de índice?

Acessando membros com . é chamado de notação de ponto . Acessá-los com [] é chamado de notação de colchetes .

A notação de ponto só funciona com nomes de propriedades que são nomes de identificadores válidos [especificação] , então basicamente qualquer nome que também seria um nome de variável válido (um identificador válido, veja também Quais caracteres são válidos para nomes de variables ​​JavaScript? ) E qualquer palavra reservada [spec] .

A notação de colchetes espera uma expressão que seja avaliada como uma cadeia (ou possa ser coagida para uma cadeia), para que você possa usar qualquer sequência de caracteres como nome de propriedade . Não há limites para o que uma string pode conter.

Exemplos:

 obj.foo; // valid obj.else // valid, reserved keywords are valid identifier names obj.42 // invalid, identifier names cannot start with numbers obj.3foo // invalid, "" obj.foo-bar // invalid, `-` is not allowed in identifier names obj[42] // valid, 42 will be coerced to "42" obj["--"] // valid, any character sequence is allowed obj[bar] // valid, will evaluate the variable `bar` and // use its value as property name 

Use a notação de colchetes:

  • Quando o nome da propriedade está contido em uma variável, por exemplo, obj[foo] .
  • O nome da propriedade contém caracteres não permitidos em identificadores, por exemplo, começa com um dígito ou contém um espaço ou traço ( - ), por exemplo, obj["my property"] .

Use a notação de ponto: em todas as outras situações.

Há uma ressalva em relação a palavras-chave reservadas. Embora a especificação permita usá-los como nomes de propriedades e com a notação de ponto, nem todos os navegadores ou ferramentas respeitam isso (notavelmente versões mais antigas do IE). Portanto, a melhor solução, na minha opinião, é evitar o uso de palavras-chave reservadas para nomes de propriedade ou usar a notação de colchetes se você não puder.


†: Essa também é a razão pela qual você pode usar apenas a notação de colchetes para acessar os elementos da matriz. Os identificadores não podem começar com dígitos e, portanto, não podem consistir apenas em dígitos.

Você deveria usar . quando você sabe o nome da propriedade

 var object = {}; object.property = 'whatever'; 

, use [] quando o nome da propriedade estiver contido em uma variável

 var object = {}; var property = 'another-property'; object[property] = 'whatever'; 

Como @DCoder adicionado, certas propriedades do object não podem ser acessadas sem usar a notação [] , porque seus nomes quebram a syntax. Por exemplo, propriedades nomeadas class , default ou data-prop-value

Também porque não faz. operador permite a propriedade de índice? Eu realmente quero o motivo completo. Obrigado.

Bem, se isso fosse possível, considere:

 var a = 0.5; 

Você quis dizer o número 0.5 ou acessar o elemento 5 do número? Vejo:

 Number.prototype[5] = 3; 0[5] //3 0.5 // 0.5 

Se você permitiu que a syntax 0.5 fosse igual a 0[5] , como você sabe o que quer dizer?

No entanto, é possível usar números diretamente com o literal do object:

 var a = { 0: 3, 1: 5 }; 

O operador de ponto e o operador de índice (notação de colchetes) são usados ​​para acessar a propriedade de um object. Geralmente, o access com o operador de ponto é muito mais rápido, porque acessar variables ​​por janela é significativamente mais lento. Mas, no caso de caracteres especiais nas variables, você não pode usar o operador de ponto, pois isso dará erro. Para tais casos, precisamos usar o operador de indexação e passar o nome da variável, pois um formato de string significa subducção dupla, caso contrário, ocorrerá um erro indefinido. por exemplo-

 var abc = { font-size : "12px" } Using dot operator - abc.font-size; //it will give error (Incorrect) Using index operator - abc["font-size"]; //12px (Correct)