Co robi ':' (dwukropek) w JavaScript?

178

Uczę się JavaScript i podczas przeglądania biblioteki jQuery widzę, że :(dwukropek) jest często używany. Do czego służy to JavaScript?

// Return an array of filtered elements (r)
// and the modified expression string (t)
   return { r: r, t: t };
Micheasza
źródło

Odpowiedzi:

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

jest funkcjonalnie równoważny z

var o = new Object();
o.r = 'some value';
o.t = 'some other value';
yfeldblum
źródło
14
Tak podobny do składni inicjatora obiektu C #. Dzięki!
Micah
A jeśli nie ma otaczającego obiektu?
theonlygusti
@ FranciscI.B Gdybym miał zgadywać, myślę, że to TypeScript, który jest nadzbiorem JavaScript. Deklaruje klasę za pomocą zmiennej o nazwie xMin, której typ to zmiennoprzecinkowy. Całkiem nie, co to oznacza.
Sal_Vader_808
96

Do oznaczenia stwierdzenia można również użyć dwukropka. na przykład

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

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

}
Breton
źródło
1
LABEL A ((STATEMENT))
Muhammad Umer,
4
Witamy w Spagetti Code :)
Leo The Four
Goto nie może być zamaskowane: po prostu łamiesz goto; i znalazłeś to! ;)
Andrew
1
Strona referencyjna MDN dotycząca etykiety JS: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ ...
Peter
tak, dlatego a => {b: 2} nie rzuca i nie zwraca undefined
Pavlo D
70

Zapominacie, że dwukropek jest również używany w operatorze trójskładnikowym (chociaż nie wiem, czy jquery używa go do tego celu).

operator trójskładnikowy jest formą wyrażenia (wyrażenia zwracają wartość) instrukcji jeśli / to. jest używany w ten sposób:

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

Operator trójskładnikowy może być również użyty do wywołania efektów ubocznych, tak jak gdyby / wtedy, ale jest to głęboko zła praktyka.

Breton
źródło
2
AKA „operator trójskładnikowy”. Zauważ, że OP stawia wyłącznie pytanie o literał obiektu. Jeśli mamy wyjść nawet poza to, o co prosi OP, dwukropek jest również używany w etykietach.
Ates Goral
14
tak, miałem to na myśli. Powinienem po prostu trzymać się z dala od Internetu, jeśli mam zamiar omijać rażąco błędne identyfikowanie takich pojęć programistycznych.
Breton
Byłoby wspaniale zobaczyć, jak jest używany do etykiet i czegokolwiek innego, więc użycie @AtesGoral nigdy nie jest mylone, ponieważ teraz nadal je w Google.
Shane,
Może byłoby łatwiej wymienić rzeczy, które: nie są używane w Javascript.
kingfrito_5005
45

Zasadniczo znak „:” jest ogranicznikiem dla par klucz-wartość. W twoim przykładzie jest to notacja JavaScript Object Literal.

W javascript obiekty są definiowane za pomocą dwukropka ograniczającego identyfikator właściwości i jej wartość, dzięki czemu można mieć:

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

a następnie użyj go jak:

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

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

Podzbiór tego jest również znany jako JSON (JavaScript Object Notation), który jest przydatny w wywołaniach AJAX, ponieważ jest kompaktowy i szybki do przeanalizowania w językach po stronie serwera, a JavaScript może łatwo zdeserializować ciąg JSON do obiektu.

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

Możesz również umieścić klucz w cudzysłowie, jeśli zawiera jakiś specjalny znak lub spacje, ale nie polecałbym tego, ponieważ po prostu utrudnia to pracę.

Należy pamiętać, że JavaScript Object Literal Notation w języku JavaScript różni się od standardu JSON do przekazywania wiadomości. Główna różnica między tymi 2 polega na tym, że funkcje i konstruktory nie są częścią standardu JSON , ale są dozwolone w literałach obiektów JS.

Dan Herbert
źródło
2
Kiedy czytałem twoją odpowiedź, pomyślałem, że zagłosuję za nią, ale potem powiedziałeś, że „Jest również znany jako JSON”. Literały obiektowe i JSON zdecydowanie nie są tym samym. Rzeczywiście, twoje przykłady, zanim wspomnisz o JSON, nie są poprawnymi JSON.
nnnnnn
@nnnnnn Różnica między tymi dwoma jest bardzo subtelna, ale mimo to ważna. Zaktualizowałem moją odpowiedź, aby była bardziej szczegółowa w tym zakresie.
Dan Herbert
1
Widzę aktualizację. Miły. Zauważ, że JSON wymaga, aby nazwy kluczy były w cudzysłowach.
nnnnnn
Dlaczego musisz o tym wszystkim dwukrotnie wspominać? Kiedy powiedziałeś „a potem używaj go jak”
Harsha
17

Jest częścią składni literału obiektowego. Podstawowy format to:

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

Następnie możesz uzyskać dostęp do tych wartości za pomocą:

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

Możesz nawet mieć funkcje jako wartości, w zasadzie podając metody obiektu:

obj['func'] = function(a) { return 5 + a;};
obj.func(4);  // -> 9
bandi
źródło
1
Świetnie, ponieważ dało mi to termin do wyszukania i uzyskania dodatkowych informacji.
johnny
13

Może służyć do wyświetlania listy obiektów w zmiennej. Jest również używany w skrócie w zdaniu if:

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

I tak to nazywam

alert(something.man);

Również zdanie if:

function something() {  
  (some) ? doathing() : dostuff(); // if some = true doathing();, else dostuff();
}
user1431627
źródło
10

Nie zapominajmy o instrukcji switch, w której dwukropek jest używany po każdym „przypadku”.

Teppo Vuori
źródło
10

Są to zazwyczaj scenariusze, w których dwukropek „:” jest używany w JavaScript

1- Deklarowanie i inicjowanie obiektu

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

2- Ustawianie etykiety (niezalecane, ponieważ powoduje skomplikowaną strukturę kontroli i kod Spaghetti)

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

3- In Switch Statement

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- Operator trójskładnikowy

document.getElementById("demo").innerHTML = age>18? "True" : "False";
Leo The Four
źródło
1
Zamiast tego można użyć pojedynczego dwukropka do oceny zwarcia ||. Przykład: var a = false, b = a || 'Default value';odpowiadavar a = false, b = a : 'Default value';
Shaun Cockerill
7

To jest JSON lub JavaScript Object Notation. Jest to szybki sposób opisu obiektu lub mapy skrótów. Rzecz przed dwukropkiem to nazwa właściwości, a rzecz po dwukropku to jej wartość. W tym przykładzie istnieje właściwość „r”, której wartość jest dowolną wartością zmiennej r. To samo dotyczy t.

JW.
źródło
3
JSON to tylko podzbiór składni inicjowania obiektu JavaScript. '{a: k ()}', gdzie k jest funkcją, nie jest JSON, ale jest to doskonale poprawna składnia inicjowania obiektu JavaScript.
yfeldblum
12
Mówiąc pedantycznie, nie, to nie jest „JSON”. To wygląda jak JSON. Jest to składnia literału obiektu, która jest natywna dla JavaScript i może pojawić się bezpośrednio w kodzie. Z drugiej strony JSON to format serializacji / wymiany danych. JSON to JSON tylko wtedy, gdy jest „w powietrzu”, tj. Podczas przesyłania lub gdy nie został jeszcze przetworzony na rzeczywisty obiekt.
Ates Goral
3
+1 dla Ates Goral, ale zauważ, że podany przykład nawet nie wygląda jak JSON: nazwy musiałyby być w cudzysłowach, aby była poprawna składnia JSON.
NickFitz
3

Jeden głupi błąd, który popełniłem jakiś czas temu, który może pomóc niektórym ludziom.

Pamiętaj, że jeśli używasz „:” w takim wydarzeniu, wartość nie zmieni się

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

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

            ...
        });

Zatem „nub0x” zainicjuje się przy pierwszym zdarzeniu, które ma miejsce i nigdy nie zmieni swojej wartości. Ale „nub0y” zmieni się podczas następnych wydarzeń.

Younes Nj
źródło
Natknąłem się na to, a fyi właściwie to, co się tutaj dzieje, to fakt, że używasz etykiety przed swoim oświadczeniem. Żadne przypisanie nie jest wykonywane, ale instrukcja event.target.offsetLeft + event.target.clientWidth/2;jest uruchamiana za każdym razem, gdy wywoływana jest metoda ondrag, ale nigdy nie przypisuj wartości donub0x
kketch
W rzeczywistości jest to używane jako ocena i :jest traktowane tak, jakby to było ||. W związku z tym event.target.offsetLeft + event.target.clientWidth/2;będzie wyzwalany tylko za każdym razem, gdy podane nub0xjest równe fałszowi.
Shaun Cockerill
1

Innym zastosowaniem dwukropka w JavaScript jest zmiana nazwy zmiennej, czyli:

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

Jest to przydatne, jeśli używasz biblioteki innej firmy, która zwraca wartości o niewygodnych / długich nazwach zmiennych, których nazwę chcesz zmienić w kodzie.

schlingel
źródło