¿Qué hace ':' (dos puntos) en JavaScript?

178

Estoy aprendiendo JavaScript y mientras navego por la biblioteca jQuery veo que :(dos puntos) se usa mucho. ¿Para qué se usa esto en JavaScript?

// Return an array of filtered elements (r)
// and the modified expression string (t)
   return { r: r, t: t };
Micah
fuente

Respuestas:

247
var o = {
    r: 'some value',
    t: 'some other value'
};

es funcionalmente equivalente a

var o = new Object();
o.r = 'some value';
o.t = 'some other value';
Yfeldblum
fuente
14
Tan similar a la sintaxis del inicializador del objeto C #. ¡Gracias!
Micah
¿Qué pasa si no hay un objeto cerrado?
theonlygusti
@ FranciscI.B si tuviera que adivinar, creo que es TypeScript, que es un superconjunto de JavaScript. Está declarando una clase, con una var llamada xMin, cuyo tipo es flotante. Pretty sur eso es lo que eso significa.
Sal_Vader_808
96

Y también, se pueden usar dos puntos para etiquetar una declaración. por ejemplo

var i = 100, j = 100;
outerloop:
while(i>0) {
  while(j>0) {
   j++

   if(j>50) {
     break outerloop;
   }
  }
i++

}
Bretón
fuente
1
ETIQUETA A ((DECLARACIÓN))
Muhammad Umer
44
Bienvenido a Spagetti Code :)
Leo The Four
Un goto no puede ser disfrazado: simplemente rompes el goto; y lo has encontrado! ;)
Andrew
1
Página de referencia de MDN para JS Label: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Peter
sí, es por eso que a => {b: 2} no lanzará y regresará indefinido
Pavlo D
70

Ustedes están olvidando que el colon también se usa en el operador ternario (aunque no sé si jquery lo usa para este propósito).

el operador ternario es una forma de expresión (las expresiones devuelven un valor) de una instrucción if / then. se usa así:

var result = (condition) ? (value1) : (value2) ;

Un operador ternario también podría usarse para producir efectos secundarios como si / entonces, pero esta es una práctica muy mala.

Bretón
fuente
2
AKA "operador ternario". Tenga en cuenta que el OP pregunta estrictamente sobre el caso literal del objeto. Si vamos a ir más allá de lo que pide el OP, los dos puntos también se usan en las etiquetas.
Ates Goral
14
Sí, lo dije en serio. Debería mantenerme fuera de Internet, de verdad, si voy a dar vueltas por conceptos de programación que identifican erróneamente de manera flagrante.
Breton
Sería increíble verlo utilizado para etiquetas y cualquier otra cosa, por lo que el uso nunca se confunde @AtesGoral porque ahora todavía estoy buscando en Google.
Shane
Tal vez sería más fácil enumerar las cosas que: no se usa en Javascript.
kingfrito_5005
45

El ':' es un delimitador para pares de valores clave básicamente. En su ejemplo, es una notación literal de objetos Javascript.

En javascript, los objetos se definen con dos puntos delimitando el identificador de la propiedad y su valor para que pueda tener lo siguiente:

return { 
    Property1 : 125,
    Property2 : "something",
    Method1 : function() { /* do nothing */ },
    array: [5, 3, 6, 7]
};

y luego úsalo como:

var o =  { 
    property1 : 125,
    property2 : "something",
    method1 : function() { /* do nothing */ },
    array: [5, 3, 6, 7]
};

alert(o.property1); // Will display "125"

Un subconjunto de esto también se conoce como JSON (Javascript Object Notation), que es útil en llamadas AJAX porque es compacto y rápido de analizar en idiomas del lado del servidor y Javascript puede deserializar fácilmente una cadena JSON en un objeto.

// The parenthesis '(' & ')' around the object are important here
var o = eval('(' + "{key: \"value\"}" + ')');

También puede poner la clave entre comillas si contiene algún tipo de carácter o espacios especiales, pero no lo recomendaría porque solo hace que las cosas sean más difíciles de trabajar.

Tenga en cuenta que la notación literal de objetos JavaScript en el lenguaje JavaScript es diferente del estándar JSON para el paso de mensajes. La principal diferencia entre los 2 es que las funciones y los constructores no son parte del estándar JSON , pero están permitidos en los literales de objetos JS.

Dan Herbert
fuente
2
Mientras leía su respuesta, pensé en votarla, pero luego dijo que "también se conoce como JSON". Los literales de objeto y JSON definitivamente no son lo mismo, de hecho, sus ejemplos antes de mencionar JSON no son JSON válidos.
nnnnnn
@nnnnnn La diferencia entre los 2 es muy sutil, pero importante de todos modos. He actualizado mi respuesta para ser más específico con respecto a eso.
Dan Herbert
1
Veo la actualización. Agradable. Tenga en cuenta que JSON requiere que los nombres clave estén entre comillas.
nnnnnn
¿Por qué tienes que mencionar todo eso dos veces? Cuando dijiste "y luego úsalo como"
Harsha
17

Es parte de la sintaxis literal del objeto. El formato básico es:

var obj = { field_name: "field value", other_field: 42 };

Luego puede acceder a estos valores con:

obj.field_name; // -> "field value"
obj["field_name"]; // -> "field value"

Incluso puede tener funciones como valores, básicamente proporcionándole los métodos del objeto:

obj['func'] = function(a) { return 5 + a;};
obj.func(4);  // -> 9
Bandi
fuente
1
Genial porque me dio el término para buscar y obtener más información.
Johnny
13

Se puede usar para enumerar objetos en una variable. Además, se usa un poco en la forma abreviada de una oración if:

var something = {face: 'hello',man: 'hey',go: 'sup'};

Y llamándolo así

alert(something.man);

También la oración if:

function something() {  
  (some) ? doathing() : dostuff(); // if some = true doathing();, else dostuff();
}
usuario1431627
fuente
10

No olvidemos la declaración de cambio, donde se utilizan dos puntos después de cada "caso".

Teppo Vuori
fuente
10

En general, estos son los escenarios en los que se usa dos puntos ':' en JavaScript

1- Declarando e inicializando un objeto

var Car = {model:"2015", color:"blue"}; //car object with model and color properties

2- Configuración de una etiqueta (no recomendado ya que da como resultado una estructura de control complicada y un código Spaghetti)

List: 
while(counter < 50)
{
     userInput += userInput;
     counter++;
     if(userInput > 10000)
     {
          break List;
     }
}

3- En la declaración de cambio

switch (new Date().getDay()) {
    case 6:
        text = "Today is Saturday";
        break; 
    case 0:
        text = "Today is Sunday";
        break; 
    default: 
        text = "Looking forward to the Weekend";
}

4- En operador ternario

document.getElementById("demo").innerHTML = age>18? "True" : "False";
Leo los cuatro
fuente
1
Un solo colon también se puede utilizar para la evaluación de cortocircuito en lugar de ||. Ejemplo: var a = false, b = a || 'Default value';es equivalente avar a = false, b = a : 'Default value';
Shaun Cockerill el
7

Eso es JSON, o JavaScript Object Notation. Es una forma rápida de describir un objeto o un mapa hash. Lo que está antes de los dos puntos es el nombre de la propiedad, y lo que está después de los dos puntos es su valor. Entonces, en este ejemplo, hay una propiedad "r", cuyo valor es lo que esté en la variable r. Lo mismo para t.

JW
fuente
3
JSON es solo un subconjunto de sintaxis de inicialización de objetos JavaScript. '{a: k ()}' donde k es una función no es JSON, pero está perfectamente bien la sintaxis de inicialización de objetos JavaScript.
yfeldblum
12
Para ser pedante, no, no es "JSON". Se parece a JSON. Es la sintaxis literal del objeto que es nativa de JavaScript y que puede aparecer directamente dentro del código. JSON, por otro lado, es un formato de serialización / intercambio de datos. JSON es JSON solo cuando está "en el aire", es decir, en tránsito o cuando aún no se ha analizado en un objeto real.
Ates Goral
3
+1 para Ates Goral, pero tenga en cuenta que el ejemplo dado ni siquiera se parece a JSON: los nombres tendrían que estar entre comillas dobles para que sea una sintaxis JSON válida.
NickFitz
3

Un error estúpido que cometí hace un tiempo que podría ayudar a algunas personas.

Tenga en cuenta que si está usando ":" en un evento como este, el valor no cambiará

var ondrag = (function(event, ui) {
            ...

            nub0x: event.target.offsetLeft + event.target.clientWidth/2;
            nub0y = event.target.offsetTop + event.target.clientHeight/2;

            ...
        });

Entonces "nub0x" se inicializará con el primer evento que ocurra y nunca cambiará su valor. Pero "nub0y" cambiará durante los próximos eventos.

Younes Nj
fuente
Encontré esto, y para tu información, lo que está sucediendo aquí es que estás usando una etiqueta antes de tu declaración. No se realiza ninguna asignación, pero la declaración event.target.offsetLeft + event.target.clientWidth/2;se ejecuta cada vez que se llama a su método ondrag, pero nunca asigne el valor anub0x
kketch
En realidad, esto se está utilizando como una evaluación, y :se está tratando como si fuera un ||. Por lo tanto, event.target.offsetLeft + event.target.clientWidth/2;solo se activará cada vez que se proporcione nub0xequivale a falso.
Shaun Cockerill el
1

Otro uso de dos puntos en JavaScript es cambiar el nombre de una variable, es decir:

const person = { 
    nickNameThatIUseOnStackOverflow: "schlingel",
    age: 30,
    firstName: "John"
};
const { nickNameThatIUseOnStackOverflow: nick } = person; // I take nickNameThatIUseOnStackOverflow but want to refer it as "nick" from now on.
nick = "schling";

Esto es útil si utiliza una biblioteca de terceros que devuelve valores que tienen nombres de variables largos / incómodos que desea cambiar de nombre en su código.

Schlingel
fuente