Encontré este ejemplo en un documento de MDN, por ejemplo:

class Search1 {
  constructor(value) {
    this.value = value;
  }
  [Symbol.search](string) {
    return string.indexOf(this.value);
  }
}

Si levanto node y ejecuto solo la línea incluida como parte del literal del objeto, no funciona:

> Symbol.search
Symbol(Symbol.search)  
> [Symbol.search]
[ Symbol(Symbol.search) ]
> [Symbol.search]('somthing')
TypeError: [Symbol.search] is not a function

Creo que también he visto esta sintaxis en algunos otros lugares, como por ejemplo en el documentos de reacción:

handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
}

¿Es esto solo un uso de sintaxis de desestructuración ? No lo parece

0
Brian Peterson 11 may. 2019 a las 06:51

3 respuestas

La mejor respuesta

brackets se usan cuando tiene una variable como key y no una cadena simple.

const obj = {
    "someId": 'abc',
};

const e = {
    target: {
        id: "someId"
    }
};

console.log(obj[e.target.id]);

Además de lo mencionado anteriormente, también se utiliza para acceder a las teclas numeric (al igual que la matriz) y cuando la clave es computed. Ver - https://javascript.info/object#square-brackets

2
random 12 may. 2019 a las 02:32

Gracias por la respuesta de @ randomSoul, por completarla, podría decir que las llaves también hacen que tengas una tecla de cadena con espacios como el siguiente:

const myOBJ = {
  'my key': 'my assigned String Value'
}

Luego puede llamar a ese par de valores clave con esta sintaxis de llaves como:

console.log(myOBJ['my key'])

Esto rara vez se usa en JavaScript, pero el propósito principal de usar llaves para obtener el valor del objeto literal es obtener claves de objeto calculadas dinámicamente . De este modo, tiene un objeto en el que cada clave está representada como ID de usuario, y en función de eso, desea decidir obtener la identificación de usuario específica que obtuvo de sus parámetros de URL o en otro lugar, entonces podría obtener datos de usuario como a continuación :

console.log(lastFiveUserData[myUserId].age)
1
halfer 10 ago. 2019 a las 22:06

Resulta que eso es solo parte de la spec.

ingrese la descripción de la imagen aquí Se parece un poco a la desestructuración de la matriz, pero no lo es.

En el caso de [event.target.id], está asignando el valor que event.target.id señala como clave en el objeto pasado a setState(). Si intentas hacer esto sin los corchetes ([]), no funcionaría, no de la manera que esperas de todos modos.

En el caso de [Symbol.search](string), aquí está utilizando el símbolo Symbol.search (consulte símbolos ) como una clave que se evalúa dinámicamente de inmediato a su valor real y único. La evaluación dinámica está permitida porque este valor se convierte en la clave en una definición literal de objeto. El valor al que apunta la tecla es una función que se define aquí, que toma string como su primer y único parámetro, y opera sobre eso. Este es un enlace para permitir que un objeto defina cómo se comporta cuando se usa como parámetro, en este caso para la función .search(). Consulte aquí.

1
Brian Peterson 11 may. 2019 a las 04:12