Apa yang dilakukan ':' (titik dua) dalam JavaScript?

178

Saya belajar JavaScript dan saat browsing melalui perpustakaan jQuery saya melihat :(titik dua) banyak digunakan. Untuk apa ini digunakan dalam JavaScript?

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

Jawaban:

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

secara fungsional setara dengan

var o = new Object();
o.r = 'some value';
o.t = 'some other value';
yfeldblum
sumber
14
Sangat mirip dengan sintaks initializer objek C #. Terima kasih!
Micah
Bagaimana jika tidak ada objek penutup?
theonlygusti
@ FranciscI.B jika saya harus menebak, saya pikir itu adalah TypeScript, yang merupakan superset dari JavaScript. Ini mendeklarasikan kelas, dengan var bernama xMin, yang tipenya adalah float. Cukup sur itulah artinya itu.
Sal_Vader_808
96

Dan juga, titik dua dapat digunakan untuk melabeli pernyataan. sebagai contoh

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

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

}
Breton
sumber
1
LABEL A ((PERNYATAAN))
Muhammad Umer
4
Selamat datang di Kode Spagetti :)
Leo The Four
Goto tidak bisa disamarkan: Anda cukup merusak goto; dan kamu telah menemukannya! ;)
Andrew
1
Halaman Referensi MDN untuk JS Label: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Peter
ya, itu sebabnya a => {b: 2} tidak akan melempar dan kembali tidak terdefinisi
Pavlo D
70

Kalian lupa bahwa titik dua juga digunakan dalam operator ternary (meskipun saya tidak tahu apakah jquery menggunakannya untuk tujuan ini).

operator ternary adalah bentuk ekspresi (ekspresi mengembalikan nilai) dari pernyataan if / then. digunakan seperti ini:

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

Seorang operator ternary juga dapat digunakan untuk menghasilkan efek samping seperti jika itu, tetapi ini adalah praktik yang sangat buruk.

Breton
sumber
2
AKA "operator ternary". Perhatikan bahwa OP secara ketat bertanya tentang objek literal objek. Jika kita melampaui apa yang diminta OP, tanda titik dua juga digunakan dalam label.
Ates Goral
14
ya saya memang bermaksud begitu. Saya hanya harus menjauh dari internet, sungguh, jika saya akan pergi sekitar konsep pemrograman yang salah mengidentifikasi seperti itu.
Breton
Akan luar biasa melihatnya digunakan untuk label dan apa pun sehingga penggunaannya tidak pernah membingungkan @AtesGoral karena saya sekarang masih googling dengan yang sekarang.
Shane
Mungkin akan lebih mudah untuk membuat daftar hal-hal yang: tidak digunakan dalam Javascript.
kingfrito_5005
45

Pada dasarnya ':' adalah pembatas untuk pasangan nilai kunci. Dalam contoh Anda itu adalah notasi Literal Objek Javascript.

Dalam javascript, Objek didefinisikan dengan titik dua yang membatasi pengidentifikasi untuk properti, dan nilainya sehingga Anda dapat memiliki yang berikut ini:

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

dan kemudian gunakan seperti:

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

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

Subset dari ini juga dikenal sebagai JSON (Javascript Object Notation) yang berguna dalam panggilan AJAX karena ringkas dan cepat untuk diuraikan dalam bahasa sisi-server dan Javascript dapat dengan mudah mendisialisasi serialisasi string JSON menjadi objek.

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

Anda juga dapat memasukkan kunci di dalam tanda kutip jika itu berisi semacam karakter atau spasi khusus, tetapi saya tidak akan merekomendasikan itu karena itu hanya membuat segalanya lebih sulit untuk dikerjakan.

Perlu diingat bahwa Notasi Literal Objek JavaScript dalam bahasa JavaScript berbeda dari standar JSON untuk pengiriman pesan. Perbedaan utama antara 2 adalah bahwa fungsi dan konstruktor bukan bagian dari standar JSON , tetapi diizinkan dalam objek JS literal.

Dan Herbert
sumber
2
Ketika saya membaca jawaban Anda, saya pikir saya akan memilihnya, tetapi kemudian Anda mengatakan bahwa "Ini juga dikenal sebagai JSON". Objek literal dan JSON jelas bukan hal yang sama, memang contoh Anda sebelum Anda menyebutkan JSON bukan JSON yang valid.
nnnnnn
@nnnnnn Perbedaan antara keduanya sangat halus, tetapi tetap penting. Saya telah memperbarui jawaban saya untuk lebih spesifik dalam hal itu.
Dan Herbert
1
Saya melihat pembaruan. Bagus. Perhatikan bahwa JSON mengharuskan nama kunci dalam tanda kutip.
nnnnnn
Mengapa Anda harus menyebutkan semua itu dua kali? Ketika Anda mengatakan "dan kemudian gunakan seperti"
Harsha
17

Ini adalah bagian dari sintaks literal objek. Format dasar adalah:

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

Kemudian Anda dapat mengakses nilai-nilai ini dengan:

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

Anda bahkan dapat memiliki fungsi sebagai nilai, pada dasarnya memberi Anda metode objek:

obj['func'] = function(a) { return 5 + a;};
obj.func(4);  // -> 9
bandi
sumber
1
Hebat karena memberi saya istilah untuk mencari dan menemukan informasi lebih lanjut.
johnny
13

Ini dapat digunakan untuk membuat daftar objek dalam suatu variabel. Juga, digunakan sedikit dalam singkatan kalimat if:

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

Dan menyebutnya seperti ini

alert(something.man);

Juga kalimat if:

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

Jangan lupa pergantian pernyataan, di mana titik dua digunakan setelah setiap "kasus".

Teppo Vuori
sumber
10

Ini umumnya adalah skenario di mana titik dua ':' digunakan dalam JavaScript

1- Mendeklarasikan dan Menginisialisasi Objek

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

2- Mengatur Label (Tidak dianjurkan karena menghasilkan struktur kontrol yang rumit dan kode Spaghetti)

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

3- Dalam Pernyataan 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- Di Operator Ternary

document.getElementById("demo").innerHTML = age>18? "True" : "False";
Leo The Four
sumber
1
Satu usus besar juga dapat digunakan untuk evaluasi hubungan pendek sebagai pengganti ||. Contoh: var a = false, b = a || 'Default value';setara denganvar a = false, b = a : 'Default value';
Shaun Cockerill
7

Itu JSON, atau Notasi Objek JavaScript. Ini adalah cara cepat untuk menggambarkan objek, atau peta hash. Hal di depan titik dua adalah nama properti, dan hal yang setelah titik dua adalah nilainya. Jadi dalam contoh ini, ada properti "r", yang nilainya adalah apa pun yang ada di variabel r. Sama untuk t.

JW.
sumber
3
JSON hanya sebagian dari sintaks inisialisasi objek JavaScript. '{a: k ()}' di mana k adalah suatu fungsi bukan JSON, tetapi itu adalah sintaks inisialisasi objek JavaScript yang baik-baik saja.
yfeldblum
12
Menjadi bertele-tele, tidak, itu bukan "JSON". Ini terlihat seperti JSON. Ini sintaks literal objek yang asli untuk JavaScript dan yang dapat muncul langsung di dalam kode. JSON di sisi lain adalah format serialisasi data / interchange. JSON adalah JSON hanya ketika "udara", yaitu dalam perjalanan atau ketika belum diurai menjadi objek nyata.
Ates Goral
3
+1 untuk Ates Goral, tetapi perhatikan bahwa contoh yang diberikan bahkan tidak terlihat seperti JSON: nama harus berada dalam tanda kutip ganda agar itu menjadi sintaks JSON yang valid.
NickFitz
3

Satu kesalahan bodoh yang saya lakukan beberapa waktu lalu yang mungkin membantu beberapa orang.

Ingatlah bahwa jika Anda menggunakan ":" dalam acara seperti ini, nilainya tidak akan berubah

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

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

            ...
        });

Jadi "nub0x" akan menginisialisasi dengan peristiwa pertama yang terjadi dan tidak akan pernah mengubah nilainya. Tapi "nub0y" akan berubah selama acara berikutnya.

Younes Nj
sumber
Saya menemukan ini, dan sebenarnya apa yang terjadi di sini adalah Anda menggunakan label sebelum pernyataan Anda. Tidak ada penugasan yang dibuat, tetapi pernyataan event.target.offsetLeft + event.target.clientWidth/2;tersebut berjalan setiap kali metode ondrag Anda dipanggil, tetapi tidak pernah menetapkan nilai kenub0x
kketch
Sebenarnya ini digunakan sebagai evaluasi, dan :diperlakukan seolah-olah itu adalah ||. Karena itu, event.target.offsetLeft + event.target.clientWidth/2;hanya akan memicu setiap kali disediakan nub0xsama dengan false.
Shaun Cockerill
1

Penggunaan lain titik dua dalam JavaScript adalah mengubah nama variabel, yaitu:

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

Ini berguna jika Anda menggunakan perpustakaan pihak ketiga yang mengembalikan nilai yang memiliki nama variabel canggung / panjang yang ingin Anda beri nama baru dalam kode Anda.

schlingel
sumber