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

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

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++

}

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.


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.


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

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();
}

10

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


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

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.


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


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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.