O que ':' (dois pontos) faz no JavaScript?

178

Estou aprendendo JavaScript e, enquanto navego pela biblioteca jQuery, vejo :(dois pontos) sendo muito usados. Para que isso é usado no JavaScript?

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

Respostas:

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

é funcionalmente equivalente a

var o = new Object();
o.r = 'some value';
o.t = 'some other value';
yfeldblum
fonte
14
Tão semelhante à sintaxe do inicializador de objeto C #. Obrigado!
Micah
E se não houver nenhum objeto fechado?
26814 theonlygusti
@ FranciscI.B Se eu tivesse que adivinhar, acho que é o TypeScript, que é um superconjunto de JavaScript. Ele está declarando uma classe, com um var chamado xMin, cujo tipo é um float. Pretty sur é o que isso significa.
Sal_Vader_808 14/05
96

E também, dois pontos podem ser usados ​​para rotular uma declaração. por exemplo

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

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

}
Bretão
fonte
1
ETIQUETA A ((DECLARAÇÃO))
Muhammad Umer
4
Bem-vindo ao Código Spagetti :)
Leo The Four
Um goto não pode ser disfarçado: você simplesmente quebra o goto; e você encontrou! ;)
Andrew
1
Página de referência do MDN para JS Rótulo: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/…
Peter
sim, é por isso que a => {b: 2} não lança e retorna indefinido
Pavlo D
70

Vocês estão esquecendo que o cólon também é usado no operador ternário (embora eu não saiba se o jquery o usa para esse fim).

o operador ternário é uma forma de expressão (expressões retornam um valor) de uma instrução if / then. é usado assim:

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

Um operador ternário também pode ser usado para produzir efeitos colaterais como se / então, mas essa é uma prática profundamente ruim.

Bretão
fonte
2
AKA "operador ternário". Observe que o OP está perguntando estritamente sobre o caso literal do objeto. Se formos além do que o OP está pedindo, o cólon também é usado nos rótulos.
Ates Goral 29/10/09
14
sim, eu quis dizer isso. Eu deveria ficar fora da internet, realmente, se eu vou dar uma volta flagrantemente identificando conceitos de programação como esse.
Breton
Seria incrível vê-lo usado para rótulos e tudo o mais, para que o uso nunca seja confuso @AtesGoral, porque agora eu ainda estou pesquisando no Google.
Shane
Talvez seja mais fácil listar as coisas que: não são usadas em Javascript.
kingfrito_5005
45

O ':' é um delimitador para pares de valores-chave basicamente. No seu exemplo, é uma notação literal de objeto Javascript.

Em javascript, os Objetos são definidos com dois pontos delimitando o identificador da propriedade e seu valor para que você possa ter o seguinte:

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

e depois use-o como:

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

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

Um subconjunto disso também é conhecido como JSON (Javascript Object Notation), que é útil em chamadas AJAX, pois é compacto e rápido para analisar em idiomas do servidor e o Javascript pode facilmente desserializar uma string JSON em um objeto.

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

Você também pode colocar a chave dentro de aspas, se ela contiver algum tipo de caractere ou espaços especiais, mas eu não recomendaria isso porque isso dificulta as coisas de se trabalhar.

Lembre-se de que a Notação literal de objeto JavaScript na linguagem JavaScript é diferente do padrão JSON para a passagem de mensagens. A principal diferença entre os 2 é que funções e construtores não fazem parte do padrão JSON , mas são permitidos nos literais de objetos JS.

Dan Herbert
fonte
2
Enquanto eu lia sua resposta, pensei em votar, mas você disse que "Também é conhecido como JSON". Literais de objeto e JSON definitivamente não são a mesma coisa; de fato, seus exemplos antes de mencionar JSON não são JSON válidos.
Nnnnnn
@nnnnnn A diferença entre os 2 é muito sutil, mas importante, no entanto. Atualizei minha resposta para ser mais específico em relação a isso.
Dan Herbert
1
Eu vejo a atualização. Agradável. Observe que o JSON requer que os nomes das chaves estejam entre aspas.
Nnnnnn 30/06
Por que você tem que mencionar tudo isso duas vezes? Quando você disse "e, em seguida, usá-lo como"
Harsha
17

Faz parte da sintaxe literal do objeto. O formato básico é:

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

Então você pode acessar esses valores com:

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

Você pode até ter funções como valores, basicamente fornecendo os métodos do objeto:

obj['func'] = function(a) { return 5 + a;};
obj.func(4);  // -> 9
bandi
fonte
1
Ótimo porque me deu o termo para procurar e descobrir mais informações.
9139 johnny
13

Pode ser usado para listar objetos em uma variável. Além disso, é usado um pouco na abreviação de uma frase if:

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

E chamando assim

alert(something.man);

Também a sentença if:

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

Não vamos esquecer a instrução switch, em que dois pontos são usados ​​após cada "caso".

Teppo Vuori
fonte
10

Estes são geralmente os cenários em que dois pontos ':' são usados ​​em JavaScript

1- Declarando e Inicializando um Objeto

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

2- Configuração de um rótulo (não recomendado, pois resulta em estrutura de controle complicada e código espaguete)

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

3- Instrução In Switch

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- Operador ternário

document.getElementById("demo").innerHTML = age>18? "True" : "False";
Leo os quatro
fonte
1
Um único cólon também pode ser usado para avaliação de curto-circuito em vez de ||. Exemplo: var a = false, b = a || 'Default value';é equivalente avar a = false, b = a : 'Default value';
Shaun Cockerill
7

Isso é JSON, ou JavaScript Object Notation. É uma maneira rápida de descrever um objeto ou um mapa de hash. A coisa antes dos dois pontos é o nome da propriedade e a coisa depois dos dois pontos é o seu valor. Portanto, neste exemplo, há uma propriedade "r", cujo valor é o que estiver na variável r. O mesmo para t.

JW.
fonte
3
JSON é apenas um subconjunto da sintaxe de inicialização do objeto JavaScript. '{a: k ()}' onde k é uma função não é JSON, mas é perfeitamente bem sintaxe de inicialização de objeto JavaScript.
yfeldblum
12
Para ser pedante, não, não é "JSON". Ele olha como JSON. É a sintaxe literal do objeto que é nativa do JavaScript e que pode aparecer diretamente dentro do código. JSON, por outro lado, é um formato de serialização / intercâmbio de dados. JSON é JSON apenas quando está "no ar", ou seja, em trânsito ou quando ainda não foi analisado em um objeto real.
Ates Goral 29/10/09
3
+1 para Ates Goral, mas observe que o exemplo dado nem se parece com JSON: os nomes teriam que estar entre aspas duplas para que fosse uma sintaxe JSON válida.
31410 NickFitz
3

Um erro estúpido que cometi há algum tempo atrás que pode ajudar algumas pessoas.

Lembre-se de que se você estiver usando ":" em um evento como este, o valor não será alterado

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

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

            ...
        });

Portanto, "nub0x" será inicializado com o primeiro evento que acontecer e nunca mudará seu valor. Mas "nub0y" mudará durante os próximos eventos.

Younes Nj
fonte
Eu me deparei com isso e, na verdade, o que está acontecendo aqui é que você está usando um rótulo antes da sua declaração. Nenhuma atribuição é feita, mas a declaração event.target.offsetLeft + event.target.clientWidth/2;é executado cada vez que o seu método ondrag é chamado, mas nunca atribuir o valor paranub0x
kketch
Na verdade, isso está sendo usado como uma avaliação e :está sendo tratado como se fosse um ||. Portanto, event.target.offsetLeft + event.target.clientWidth/2;será acionado apenas cada vez que for nub0xigual a falso.
precisa saber é o seguinte
1

Outro uso de dois pontos no JavaScript é renomear uma variável, ou seja:

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";

Isso é útil se você usar uma biblioteca de terceiros que retorne valores com nomes de variáveis ​​estranhos / longos que você deseja renomear em seu código.

schlingel
fonte