Acceso a propiedades de JavaScript: ¿notación de puntos frente a corchetes?
Aparte del hecho obvio de que la primera forma podría usar una variable y no solo una cadena literal, ¿hay alguna razón para usar una sobre la otra y, de ser así, en qué casos?
En codigo:
// Given:
var foo = {'bar': 'baz'};
// Then
var x = foo['bar'];
// vs.
var x = foo.bar;
Contexto: escribí un generador de código que produce estas expresiones y me pregunto cuál es preferible.
(Obtenido de aquí ).
La notación entre 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 que no son ASCII (UTF-8), como en myForm["ダ"]( más ejemplos ).
En segundo lugar, la notación entre corchetes es útil cuando se trata de nombres de propiedades que varían de forma 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 entre corchetes permite el acceso a propiedades que contienen caracteres especiales y la selección de propiedades mediante variables.
Otro ejemplo de caracteres que no se pueden utilizar con la 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
La notación entre corchetes le permite acceder a propiedades por nombre almacenado en una variable:
var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello
obj.xno funcionaría en este caso.
Las dos formas más comunes de acceder a propiedades en JavaScript son con un punto y con corchetes. Ambos value.xacceden value[x]a una propiedad según su valor, pero no necesariamente a la misma propiedad. La diferencia está en cómo se interpreta x. Cuando se usa un punto, la parte después del 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 recupera la propiedad del valor denominada "x", value[x] intenta evaluar la expresión x y utiliza el resultado como nombre de propiedad.
Entonces, si sabes que la propiedad que te interesa se llama “longitud”, dices 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 las propiedades pueden ser cualquier cadena, si desea acceder a una propiedad llamada “2”o “John Doe”, debe usar corchetes: value[2]o value["John Doe"]. Este es el caso incluso aunque conozca el nombre exacto de la propiedad de antemano, porque ni “2”ni “John Doe”es un nombre de variable válido y, por lo tanto, no se puede acceder a él mediante notación de puntos.
En el caso de matrices
Los elementos de 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 entre corchetes para acceder a ellas. 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 se escribe array.lengthporque es más fácil de escribir que array["length"].
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 activa el temido "identificador esperado" (al menos en IE8 en Windows XP, no he probado otros entornos). La solución sencilla es cambiar a la notación entre corchetes:
app.users['new'] = {
// some code
}
Ambos foo.baracceden foo["bar"]a una propiedad en foo pero no necesariamente a la misma propiedad. La diferencia está en cómo barse interpreta. Cuando se utiliza un punto, la palabra después del punto es el nombre literal de la propiedad. Cuando se utilizan corchetes, la expresión entre corchetes se evalúa para obtener el nombre de la propiedad. Mientras que foo.barrecupera la propiedad del valor llamado “bar” , foo["bar"]intenta evaluar la expresión "bar"y usa el resultado, convertido en una cadena, como nombre de la propiedad.
Limitación de la notación de puntos
si tomamos este objeto:
const obj = {
123: 'digit',
123name: 'start with digit',
name123: 'does not start with digit',
$name: '$ sign',
name-123: 'hyphen',
NAME: 'upper case',
name: 'lower case'
};
acceder a su propiedad usando notación de puntos
obj.123; // ❌ SyntaxError
obj.123name; // ❌ SyntaxError
obj.name123; // ✅ 'does not start with digit'
obj.$name; // ✅ '$ sign'
obj.name-123; // ❌ SyntaxError
obj.'name-123';// ❌ SyntaxError
obj.NAME; // ✅ 'upper case'
obj.name; // ✅ 'lower case'
Pero nada de esto es un problema para la notación entre corchetes:
obj['123']; // ✅ 'digit'
obj['123name']; // ✅ 'start with digit'
obj['name123']; // ✅ 'does not start with digit'
obj['$name']; // ✅ '$ sign'
obj['name-123']; // ✅ 'does not start with digit'
obj['NAME']; // ✅ 'upper case'
obj['name']; // ✅ 'lower case'
accediendo a la variable usando variable:
const variable = 'name';
const obj = {
name: 'value'
};
// Bracket Notation
obj[variable]; // ✅ 'value'
// Dot Notation
obj.variable; // undefined
