Was macht ':' (Doppelpunkt) in JavaScript?

177

Ich lerne JavaScript und sehe beim Durchsuchen der jQuery-Bibliothek, dass :(Doppelpunkt) häufig verwendet wird. Wofür wird dies in JavaScript verwendet?

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

Antworten:

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

ist funktional äquivalent zu

var o = new Object();
o.r = 'some value';
o.t = 'some other value';
Yfeldblum
quelle
14
Also ähnlich der Syntax des C # -Objektinitialisierers. Vielen Dank!
Micah
Was ist, wenn kein umschließendes Objekt vorhanden ist?
Theonlygusti
@ FranciscI.B Wenn ich raten müsste, denke ich, dass das TypeScript ist, eine Obermenge von JavaScript. Es deklariert eine Klasse mit einer Variablen namens xMin, deren Typ ein Float ist. Ziemlich sicher, das ist was das bedeutet.
Sal_Vader_808
96

Außerdem kann ein Doppelpunkt verwendet werden, um eine Anweisung zu kennzeichnen. beispielsweise

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

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

}
Bretonisch
quelle
1
ETIKETT A ((ERKLÄRUNG))
Muhammad Umer
4
Willkommen bei Spagetti Code :)
Leo The Four
Ein Goto kann nicht getarnt werden: Sie brechen einfach Goto; und du hast es gefunden! ;)
Andrew
1
MDN-Referenzseite für JS Label: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Peter
Ja, deshalb wird a => {b: 2} nicht undefiniert werfen und zurückkehren
Pavlo D
70

Ihr vergisst, dass der Doppelpunkt auch im ternären Operator verwendet wird (obwohl ich nicht weiß, ob jquery ihn für diesen Zweck verwendet).

Der ternäre Operator ist eine Ausdrucksform (Ausdrücke geben einen Wert zurück) einer if / then-Anweisung. es wird so verwendet:

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

Ein ternärer Operator könnte auch verwendet werden, um Nebenwirkungen zu erzeugen, genau wie wenn / dann, aber dies ist eine zutiefst schlechte Praxis.

Bretonisch
quelle
2
AKA "ternärer Operator". Beachten Sie, dass das OP streng nach dem Objektliteral fragt. Wenn wir sogar über das hinausgehen wollen, was das OP verlangt, wird der Doppelpunkt auch in Beschriftungen verwendet.
Ates Goral
14
Ja, das habe ich gemeint. Ich sollte mich wirklich vom Internet fernhalten, wenn ich solche offensichtlich falsch identifizierten Programmierkonzepte umgehen will.
Breton
Es wäre fantastisch zu sehen, wie es für Labels und was auch immer verwendet wird, so dass die Verwendung @AtesGoral nie verwechselt wird, weil ich diese jetzt noch google.
Shane
Vielleicht wäre es einfacher, die Dinge aufzulisten, die in Javascript nicht verwendet werden.
kingfrito_5005
44

Das ':' ist im Grunde ein Trennzeichen für Schlüsselwertpaare. In Ihrem Beispiel handelt es sich um eine Javascript Object Literal-Notation.

In Javascript werden Objekte so definiert, dass der Doppelpunkt den Bezeichner für die Eigenschaft und ihren Wert begrenzt, sodass Sie Folgendes haben können:

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

und dann benutze es wie:

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

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

Eine Teilmenge davon ist auch als JSON (Javascript Object Notation) bekannt, was bei AJAX-Aufrufen nützlich ist, da es kompakt und schnell in serverseitigen Sprachen zu analysieren ist und Javascript eine JSON-Zeichenfolge leicht in ein Objekt de-serialisieren kann.

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

Sie können den Schlüssel auch in Anführungszeichen setzen, wenn er Sonderzeichen oder Leerzeichen enthält. Ich würde dies jedoch nicht empfehlen, da dies die Arbeit nur erschwert.

Beachten Sie, dass JavaScript Object Literal Notation in der JavaScript - Sprache für Message Passing aus dem JSON - Standard unterscheidet. Der Hauptunterschied zwischen den beiden besteht darin, dass Funktionen und Konstruktoren nicht Teil des JSON-Standards sind , sondern in JS-Objektliteralen zulässig sind.

Dan Herbert
quelle
2
Als ich Ihre Antwort las, dachte ich, ich würde darüber abstimmen, aber dann sagten Sie: "Es ist auch als JSON bekannt." Objektliterale und JSON sind definitiv nicht dasselbe. In der Tat sind Ihre Beispiele, bevor Sie JSON erwähnen, kein gültiges JSON.
nnnnnn
@nnnnnn Der Unterschied zwischen den beiden ist sehr subtil, aber dennoch wichtig. Ich habe meine Antwort aktualisiert, um diesbezüglich genauer zu sein.
Dan Herbert
1
Ich sehe das Update. Nett. Beachten Sie, dass JSON erfordert, dass Schlüsselnamen in Anführungszeichen stehen.
nnnnnn
Warum müssen Sie das alles zweimal erwähnen? Als du gesagt hast "und dann benutze es wie"
Harsha
17

Es ist Teil der Objektliteral-Syntax. Das Grundformat ist:

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

Dann können Sie auf diese Werte zugreifen mit:

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

Sie können sogar Funktionen als Werte haben, die Ihnen im Grunde die Methoden des Objekts geben:

obj['func'] = function(a) { return 5 + a;};
obj.func(4);  // -> 9
Bandi
quelle
1
Großartig, weil ich den Begriff hatte, nach weiteren Informationen zu suchen und diese herauszufinden.
Johnny
13

Es kann verwendet werden, um Objekte in einer Variablen aufzulisten. Außerdem wird es ein wenig in der Abkürzung eines if-Satzes verwendet:

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

Und es so zu nennen

alert(something.man);

Auch der if-Satz:

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

Vergessen wir nicht die switch-Anweisung, bei der nach jedem "Fall" ein Doppelpunkt verwendet wird.

Teppo Vuori
quelle
10

Dies sind im Allgemeinen die Szenarien, in denen der Doppelpunkt ':' in JavaScript verwendet wird

1- Deklarieren und Initialisieren eines Objekts

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

2- Festlegen eines Etiketts (Nicht empfohlen, da dies zu einer komplizierten Kontrollstruktur und einem Spaghetti-Code führt)

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

3- In Switch-Anweisung

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- Im ternären Operator

document.getElementById("demo").innerHTML = age>18? "True" : "False";
Leo die vier
quelle
1
Anstelle von kann auch ein einzelner Doppelpunkt zur Kurzschlussbewertung verwendet werden ||. Beispiel: var a = false, b = a || 'Default value';entsprichtvar a = false, b = a : 'Default value';
Shaun Cockerill
7

Das ist JSON oder JavaScript Object Notation. Es ist eine schnelle Möglichkeit, ein Objekt oder eine Hash-Map zu beschreiben. Das Ding vor dem Doppelpunkt ist der Eigenschaftsname, und das Ding nach dem Doppelpunkt ist sein Wert. In diesem Beispiel gibt es also eine Eigenschaft "r", deren Wert der Wert in der Variablen r ist. Gleiches gilt für t.

JW.
quelle
3
JSON ist nur eine Teilmenge der JavaScript-Objektinitialisierungssyntax. '{a: k ()}' wobei k eine Funktion ist, ist nicht JSON, aber es ist eine vollkommen gute JavaScript-Objektinitialisierungssyntax.
Yfeldblum
12
Um pedantisch zu sein, nein, es ist nicht "JSON". Es sieht aus wie JSON. Es ist die in JavaScript native Objektliteral-Syntax, die direkt im Code angezeigt werden kann. JSON hingegen ist ein Daten-Serialisierungs- / Austauschformat. JSON ist JSON nur, wenn es "in der Luft" ist, dh während des Transports oder wenn es noch nicht in ein reales Objekt analysiert wurde.
Ates Goral
3
+1 für Ates Goral, aber beachten Sie, dass das angegebene Beispiel nicht einmal wie JSON aussieht : Die Namen müssten in doppelte Anführungszeichen gesetzt werden, damit die JSON-Syntax gültig ist.
NickFitz
3

Ein dummer Fehler, den ich vor einiger Zeit gemacht habe und der einigen Leuten helfen könnte.

Beachten Sie, dass sich der Wert nicht ändert, wenn Sie in einem solchen Ereignis ":" verwenden

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

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

            ...
        });

"Nub0x" wird also mit dem ersten Ereignis initialisiert und ändert niemals seinen Wert. Aber "nub0y" wird sich bei den nächsten Ereignissen ändern.

Younes Nj
quelle
Ich bin darauf gestoßen, und eigentlich passiert hier, dass Sie vor Ihrer Aussage ein Etikett verwenden. Es wird keine Zuweisung vorgenommen, aber die Anweisung event.target.offsetLeft + event.target.clientWidth/2;wird jedes Mal ausgeführt, wenn Ihre ondrag-Methode aufgerufen wird. Weisen Sie den Wert jedoch niemalsnub0x
kketch
Tatsächlich wird dies als Bewertung verwendet, und das :wird so behandelt, als wäre es eine ||. Daher event.target.offsetLeft + event.target.clientWidth/2;wird nur jedes Mal ausgelöst, wenn dies nub0xgleich false ist.
Shaun Cockerill
1

Eine andere Verwendung des Doppelpunkts in JavaScript besteht darin, eine Variable umzubenennen, d. H.

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

Dies ist nützlich, wenn Sie eine Bibliothek eines Drittanbieters verwenden, die Werte mit umständlichen / langen Variablennamen zurückgibt, die Sie in Ihrem Code umbenennen möchten.

schlingel
quelle