Acceso a propiedades JavaScript: notación de puntos vs. soportes?

Aparte del hecho obvio de que la primera forma podría utilizar una variable y no sólo una cadena literal, ¿hay alguna razón para usar una sobre la otra, y si es así bajo qué casos?

En código:

// 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.

Pregunta hecha hace 13 años, 0 meses, 14 días - Por codergeek24


11 Respuestas:

  • (Fuente de Aquí.)

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

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

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

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

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

    Redondeo:

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

    Otro ejemplo de caracteres que no se pueden utilizar con notación de puntos es nombres de propiedades que ellos mismos 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
    

    Respondida el Feb 11, 2011 a las 11:27 - por quantumcoderd26d

    Votos positivos: 0 | Votos negativos: 0

  • La notación de soporte permite acceder a propiedades por nombre almacenadas en una variable:

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

    obj.x no trabajaría en este caso.

    Respondida el Feb 11, 2011 a las 11:33 - por nasean

    Votos positivos: 0 | Votos negativos: 0

  • Las dos formas más comunes de acceder a propiedades en JavaScript son con un punto y con soportes cuadrados. Ambos value.x y value[x] acceder a una propiedad en valor, pero no necesariamente a la misma propiedad. La diferencia es en cómo se interpreta x. Al utilizar un punto, la parte después del punto debe ser un nombre variable válido, y que nombre directamente la propiedad. Al utilizar corchetes, se evalúa la expresión entre los corchetes para obtener el nombre de la propiedad. Considerando que el valor.x induce la propiedad del valor llamado “x”, valor[x] intenta evaluar la expresión x y utiliza el resultado como nombre de la propiedad.

    Así que si usted sabe que la propiedad que usted está interesado se llama "length", usted dice value.length. Si desea extraer la propiedad nombrada por el valor mantenido en la variable i, tú dices value[i]. Y porque los nombres de propiedades pueden ser cualquier cadena, si quieres acceder a una propiedad llamada “2” o “John Doe”, debe utilizar soportes cuadrados: value[2] o value["John Doe"]. Este es el caso a pesar de que usted sabe el nombre preciso de la propiedad por adelantado, porque ninguno “2” ni “John Doe” es un nombre variable válido y por lo tanto no se puede acceder a través de notación de puntos.

    En caso de Arrays

    Los elementos de un array 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 utilizar la sintaxis del soporte para acceder a ellas. La propiedad longitud de un array nos dice cuántos elementos contiene. Este nombre de propiedad es un nombre variable válido, y sabemos su nombre de antemano, así que para encontrar la longitud de un array, usted escribe típicamente array.length porque es más fácil escribir que array["length"].

    Respondida el Feb 11, 2011 a las 11:41 - por codecrafty

    Votos positivos: 0 | Votos negativos: 0

  • La notación de puntos no funciona con algunas palabras clave (como new y class) en Internet explorador 8.

    Tenía este código:

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

    Y esto desencadena el temido "indentificador previsto" (al menos en IE8 en ventanas xp, no he probado otros ambientes). La solución simple para eso es cambiar a la notación de soporte:

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

    Respondida el Feb 11, 2011 a las 11:51 - por techtrailblazer8d2c

    Votos positivos: 0 | Votos negativos: 0

  • Ambos foo.bar y foo["bar"] acceder a una propiedad en foo pero no necesariamente la misma propiedad. La diferencia es en cómo bar se interpreta. Al usar un punto, la palabra después del punto es el nombre literal de la propiedad. Al utilizar corchetes, se evalúa la expresión entre los corchetes para obtener el nombre de la propiedad. Mientras tanto foo.bar las hembras propiedad de valor nombrado “bar” , foo["bar"] intenta evaluar la expresión "bar" y utiliza el resultado, convertido a una cadena, como nombre de la propiedad

    Limitación de la notación de puntos

    si tomamos este ojeo:

    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'
    };
    

    acceso a su propiedad mediante 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 de Bracket:

    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'
    

    variable de acceso mediante variable :

    const variable = 'name';
    const obj = {
      name: 'value'
    };
    // Bracket Notation
    obj[variable]; // ✅ 'value'
    // Dot Notation
    obj.variable; // undefined
    

    Respondida el Feb 11, 2011 a las 11:57 - por geekglitcher

    Votos positivos: 0 | Votos negativos: 0

  • Por lo general, hacen el mismo trabajo.
    Sin embargo, la notación entre 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.

    Respondida el Feb 11, 2011 a las 12:03 - por codemasterx

    Votos positivos: 0 | Votos negativos: 0

  • Necesitas usar corchetes si el nombre de la propiedad tiene caracteres especiales:

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

    Aparte de eso, supongo que es sólo una cuestión de gusto. IMHO, la notación de puntos es más corta y hace más obvio que es una propiedad en lugar de un elemento array (aunque por supuesto JavaScript no tiene arrays asociativos de todos modos).

    Respondida el Feb 11, 2011 a las 12:11 - por codealchemy

    Votos positivos: 0 | Votos negativos: 0

  • Tenga cuidado al utilizar estas notaciones: Por ejemplo, si queremos acceder a una función presente en el padre de una ventana. En IE :

    window['parent']['func']
    

    no equivale a

    window.['parent.func']
    

    Podemos usar:

    window['parent']['func'] 
    

    o

    window.parent.func 
    

    para acceder a ella

    Respondida el Feb 11, 2011 a las 12:19 - por codemaestro

    Votos positivos: 0 | Votos negativos: 0

  • Usted tiene que utilizar la notación de soporte cuadrado 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 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 propiedad por esta variable.

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

    Respondida el Feb 11, 2011 a las 12:26 - por codesculptor3f6e

    Votos positivos: 0 | Votos negativos: 0

  • Ambas formas de acceder a las propiedades de un objeto en JavaScript son válidas y comunes, pero existen algunas diferencias sutiles entre ellas:

    • Notación de puntos (`foo.bar`):
    • Es más común y utilizada en la mayoría de los casos.
      • Es más concisa y generalmente más legible.
      • No permite el uso de nombres de propiedades que no son identificadores válidos (por ejemplo, propiedades con espacios o guiones).
      • Es más fácil de trabajar con en editores de código con funciones de autocompletado.
    • Notación de corchetes (`foo['bar']`):
    • Es útil cuando se necesita acceder a una propiedad dinámicamente, es decir, cuando el nombre de la propiedad está almacenado en una variable.
      • Permite acceder a propiedades con nombres que no son identificadores válidos.
      • Es útil cuando se está manipulando objetos cuyas propiedades contienen caracteres especiales o espacios en sus nombres.
      En cuanto a cuál forma es preferible en tu caso particular de generación de código, depende de cómo estés utilizando las propiedades y si neces

    Respondida el Feb 12, 2011 a las 11:29 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Notación de puntos (foo.bar)

    Ventajas: Más conciso y legible, especialmente para propiedades simples. Más seguro, ya que no se puede sobrescribir accidentalmente una propiedad con un nombre de variable diferente. Soportado en todos los navegadores modernos.

    Notación de corchetes (foo['bar'])

    Ventajas: Permite acceder a propiedades cuyos nombres se almacenan en variables o se calculan dinámicamente. Puede acceder a propiedades que son palabras clave de JavaScript (por ejemplo, foo["for"]). Permite acceder a propiedades de objetos no propios (por ejemplo, foo["toString"]).

    Cuándo usar cada uno:

    Notación de puntos: preferencia para propiedades simples conocidas en tiempo de compilación. Notación de corchetes: para acceder a propiedades dinámicas, palabras clave o propiedades no propias.

    Ejemplo:

    javascript
    // Preferido
    var name = user.name;
    
    // Necesario cuando el nombre de la propiedad se almacena en una variable
    var propName = 'age';
    var age = user[propName];
    

    Mejoras potenciales de tu generador de código:

    Proporciona una opción para elegir entre notación de puntos y corchetes. Detecta dinámicamente el tipo de propiedad (simple, calculada, palabra clave) y genera la notación adecuada. * Permite a los usuarios especificar reglas personalizadas para casos especiales.

    Respondida el Feb 12, 2011 a las 11:37 - por Gemini

    Votos positivos: 0 | Votos negativos: 0