Acceso a la propiedad de JavaScript: ¿notación de punto vs. paréntesis?

394

Aparte del hecho obvio de que la primera forma podría usar una variable y no solo un literal de cadena, ¿hay alguna razón para usar una sobre la otra? De ser así, ¿en qué casos?

En codigo:

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

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

// vs. 
var x = foo.bar;

Contexto: he escrito un generador de código que produce estas expresiones y me pregunto cuál es preferible.

Mark Renouf
fuente
3
Solo para contribuir, no es una respuesta a su pregunta original (ya que ha tenido muchas buenas explicaciones hasta ahora), pero en términos de velocidad tampoco hay diferencia digna de mencionar: jsperf.com/dot-vs-square-brackets . La prueba anterior solo da un margen del 2% en el mejor de los casos, son cuello y cuello.
involuntario
Esta pregunta / respuesta se puede usar también para las teclas UTF-8.
Peter Krauss

Respuestas:

422

(Procedente de aquí )

La notación de corchetes permite el uso de caracteres que no se pueden usar con la notación de puntos:

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

incluidos caracteres no ASCII (UTF-8), como en myForm["ダ"]( más ejemplos ).

En segundo lugar, la notación de corchetes es útil cuando se trata de nombres de propiedades que varían de manera predecible:

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

Redondeo:

  • La notación de puntos es más rápida de escribir y más clara de leer.
  • La notación de corchetes permite el acceso a propiedades que contienen caracteres especiales y la selección de propiedades usando variables

Otro ejemplo de caracteres que no se pueden usar con notación de puntos son los nombres de propiedades que contienen un punto .

Por ejemplo, una respuesta json podría contener una propiedad llamada bar.Baz.

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax
Aron Rotteveel
fuente
45
Los ejemplos de código y la redacción del resumen parecen muy familiares. dev-archive.net/articles/js-dot-notation
Quentin
61
No hay necesidad de reinventar la rueda, ¿verdad? Citando como referencia.
Aron Rotteveel
13
La notación de puntos
Dave Chen
44
en el cromo 44 en la notación del soporte de mi máquina es más rápido
Austin France
2
@chenghuayang Cuando desea acceder a una propiedad de un objeto cuya clave se almacena en una variable, no puede hacerlo con la notación de puntos.
Abdul
105

La notación de paréntesis le permite acceder a las propiedades por nombre almacenado en una variable:

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

obj.x No funcionaría en este caso.

naiquevin
fuente
12

Las dos formas más comunes de acceder a las propiedades en JavaScript son con un punto y entre corchetes. Ambos value.x and value[x]acceden a una propiedad en valor, pero no necesariamente la misma propiedad. La diferencia está en cómo se interpreta x. Cuando se usa un punto, la parte que sigue al punto debe ser un nombre de variable válido y nombra directamente la propiedad. Cuando se utilizan corchetes, la expresión entre corchetes se evalúa para obtener el nombre de la propiedad. Mientras que value.x obtiene la propiedad del valor llamado "x", el valor [x] intenta evaluar la expresión x y utiliza el resultado como el nombre de la propiedad.

Entonces, si sabe que la propiedad que le interesa se llama “longitud”, usted dice value.length. Si desea extraer la propiedad nombrada por el valor contenido en la variable i, diga value[i]. Y debido a que los nombres de propiedades pueden ser cualquier cadena, si desea acceder a una propiedad llamada “2”o “John Doe”, debe utilizar corchetes: value[2] or value["John Doe"]. Este es el caso a pesar de que conoce el nombre preciso de la propiedad de antemano, porque ninguno de los dos “2” nor “John Doe”es un nombre de variable válido y, por lo tanto, no se puede acceder a él mediante la notación de puntos.

En caso de matrices

Los elementos en una matriz se almacenan en propiedades. Debido a que los nombres de estas propiedades son números y, a menudo, necesitamos obtener su nombre de una variable, tenemos que usar la sintaxis de paréntesis para acceder a ellos. La propiedad de longitud de una matriz nos dice cuántos elementos contiene. Este nombre de propiedad es un nombre de variable válido, y conocemos su nombre de antemano, por lo que para encontrar la longitud de una matriz, normalmente escribe array.lengthporque es más fácil de escribir que array["length"].

Sagar Munjal
fuente
¿Podría elaborar más sobre array.length? Usted dice que las propiedades a las que se accede mediante la notación de puntos no se evalúan, por lo que, en el caso de array.length, ¿no nos daría una cadena de "longitud" en lugar del valor evaluado, en este caso, el número de elementos en la matriz? The elements in an array are stored in propertiesEsto es lo que me confunde. ¿Qué quieres decir con almacenado en propiedades? ¿Qué son las propiedades? En mi opinión, la matriz es solo un montón de valores sin propiedades. Si se almacenan en propiedades, ¿cómo es que no es property: value/ matriz asociativa?
Limpuls
Esta respuesta es particularmente valiosa porque explica la diferencia entre las dos notaciones.
telaraña el
11

La notación de puntos no funciona con algunas palabras clave (como newy class) en Internet Explorer 8.

Tenía este código:

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

Y esto desencadena el temido "identificador esperado" (al menos en IE8 en Windows XP, no he probado otros entornos). La solución simple para eso es cambiar a la notación de paréntesis:

app.users['new'] = {
  // some code
}
Benjamin Crouzier
fuente
Respuesta útil Gracias.
Ilyas karim
Funciona en Chrome 2019 res.cloudinary.com/rootworld/image/upload/v1567651133/js.png
Phani Rithvij
8

Tenga cuidado al usar estas anotaciones: por ej. si queremos acceder a una función presente en el padre de una ventana. En IE:

window['parent']['func']

no es equivalente a

window.['parent.func']

Podemos usar:

window['parent']['func'] 

o

window.parent.func 

para acceder a ella

usuario2593104
fuente
6

En términos generales, hacen el mismo trabajo.
Sin embargo, la notación de corchetes te da la oportunidad de hacer cosas que no puedes hacer con la notación de puntos, como

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

Esto se puede extender a cualquier propiedad que contenga caracteres especiales.

CdB
fuente
5

Debe usar corchetes si los nombres de las propiedades tienen caracteres especiales:

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

Aparte de eso, supongo que es solo cuestión de gustos. En mi humilde opinión, la notación de puntos es más corta y hace que sea más obvio que es una propiedad en lugar de un elemento de matriz (aunque, por supuesto, JavaScript no tiene matrices asociativas de todos modos).

Álvaro González
fuente
4

Debe usar la notación de corchetes cuando:

  1. El nombre de la propiedad es número.

    var ob = {
      1: 'One',
      7 : 'Seven'
    }
    ob.7  // SyntaxError
    ob[7] // "Seven"
    
  2. El nombre de la propiedad tiene un carácter especial.

    var ob = {
      'This is one': 1,
      'This is seven': 7,
    }  
    ob.'This is one'  // SyntaxError
    ob['This is one'] // 1
  3. El nombre de la propiedad se asigna a una variable y desea acceder al valor de la propiedad mediante esta variable.

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

La notación de corchetes puede usar variables, por lo que es útil en dos casos en los que la notación de puntos no funcionará:

1) Cuando los nombres de las propiedades se determinan dinámicamente (cuando los nombres exactos no se conocen hasta el tiempo de ejecución).

2) Cuando se usa un bucle for..in para recorrer todas las propiedades de un objeto.

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

Lev Stefanovich
fuente
1

Caso donde la []notación es útil:

Si el objeto es dinámico y puede haber algunos valores aleatorios de teclas como numbery []o cualquier otro carácter especial, por ejemplo -

var a = { 1 : 3 };

Ahora, si intenta acceder como a.1lo hará a través de un error, porque está esperando una cadena allí.

Anshul
fuente
1

La notación de puntos siempre es preferible. Si está utilizando algún IDE o editor de texto "más inteligente", mostrará nombres indefinidos de ese objeto. Use la notación de corchetes solo cuando tenga el nombre con guiones similares o algo similar no válido. Y también si el nombre se almacena en una variable.

Dušan Novák
fuente
Y también hay situaciones en las que la notación de paréntesis no está permitida, incluso si no tiene guiones. Por ejemplo, puedes escribir Math.sqrt(25), pero no Math['sqrt'](25).
Sr. Lister
0

Permítanme agregar un caso de uso más de la notación de corchetes. Si desea acceder a una propiedad, digamos x-proxyen un objeto, -se interpretará incorrectamente. También hay otros casos como espacio, punto, etc., donde la operación de puntos no lo ayudará. Además, si tiene la clave en una variable, entonces la única forma de acceder al valor de la clave en un objeto es mediante notación de paréntesis. Espero que tengas más contexto.

Manish Waran
fuente
0

Un ejemplo donde la notación de puntos falla

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

Los nombres de propiedad no deberían interferir con las reglas de sintaxis de javascript para que pueda acceder a ellos como json.property_name

Phani Rithvij
fuente