Що робить ':' (двокрапка) у JavaScript?


178

Я вивчаю JavaScript, і під час перегляду бібліотеки jQuery я бачу :(двокрапка) багато використовується. Для чого це використовується в JavaScript?

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

Відповіді:


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

функціонально еквівалентний

var o = new Object();
o.r = 'some value';
o.t = 'some other value';

14
Так схожий на синтаксис ініціалізатора об'єктів C #. Дякую!
Міхей

Що робити, якщо немає об'єкта, що обгороджує?
theonlygusti

@ FranciscI.B, якщо мені доведеться здогадуватися, я думаю, що це TypeScript, який є набором JavaScript. Він оголошує клас із варом на ім'я xMin, тип якого - float. Досить сюр, що це означає.
Sal_Vader_808

96

А також двокрапка може використовуватися для позначення виписки. наприклад

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

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

}

1
ЕТИКЕТ А ((ЗАЯВЛЕННЯ)
Мухаммед Умер

4
Ласкаво просимо до Spagetti Code :)
Лев Четверте

Гото не можна замаскувати: ви просто перериваєте goto; і ти знайшов його! ;)
Андрій

1
Довідкова сторінка MDN для мітки JS: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Пітер,

так, тому a => {b: 2} не кине і не повернеться невизначеним
Павло Д

70

Ви, хлопці, забуваєте, що двокрапка також використовується в потрійному операторі (хоча я не знаю, чи використовує jquery для цієї мети).

потрійний оператор - це форма виразу (вирази повертають значення) оператора if / then. використовується так:

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

Потрійний оператор також може бути використаний для отримання побічних ефектів так само, як і тоді, але це є дуже поганою практикою.


2
AKA "потрійний оператор". Зауважте, що ОП суворо запитує про об'єктний буквальний випадок. Якщо ми хочемо вийти навіть за межі того, що просить ОП, двокрапка також використовується в мітках.
Ates Goral

14
так, я це мав на увазі. Справді, я повинен просто залишатися поза Інтернетом, якщо я збираюся обійти грубі помилкові ідентифікації таких програмних понять.
Бретон

Було б дивовижно бачити, що він використовується для етикетки та іншого, тому використання ніколи не плутається @AtesGoral, тому що я зараз все ще гуглю.
Шейн

Можливо, було б простіше перерахувати те, що: не використовується в Javascript.
kingfrito_5005

45

Значення ':' є в основному роздільником для ключових пар значень. У вашому прикладі це літеральна примітка Javascript Object.

У javascript об'єкти визначаються двокрапкою, що розмежовує ідентифікатор властивості, та його значення, щоб ви могли мати наступне:

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

а потім використовувати його так:

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

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

Підмножина цього типу також відома як JSON (Javascript Object Notation), яка корисна при викликах AJAX, оскільки вона компактна і швидка для розбору на серверних мовах, а Javascript може легко де-серіалізувати рядок JSON в об’єкт.

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

Ви також можете помістити ключ всередину лапок, якщо він містить якийсь спеціальний символ або пробіли, але я б не рекомендував цього, оскільки це просто ускладнює роботу.

Майте на увазі, що літературне позначення об’єкта JavaScript на мові JavaScript відрізняється від стандарту JSON для передачі повідомлення. Основна відмінність двох полягає в тому, що функції та конструктори не є частиною стандарту JSON , а дозволені в об'єктних літералах JS.


2
Коли я читав вашу відповідь, я думав, що проголосую за неї, але тоді ви сказали, що "Це також відоме як JSON". Об'єктні літерали та JSON, безумовно, не одне й те саме, адже ваші приклади, перш ніж згадати JSON, не є дійсними JSON.
nnnnnn

@nnnnnn Різниця між двома дуже тонка, але все ж важлива. Я оновив свою відповідь, щоб бути більш конкретним щодо цього.
Ден Герберт

1
Я бачу оновлення. Приємно. Зауважте, що JSON вимагає, щоб імена ключів були в лапках.
nnnnnn

Чому ви повинні згадати про все це двічі? Коли ви сказали ", а потім використовуйте його як"
Харша

17

Це частина буквеного синтаксису об'єкта. Основний формат:

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

Тоді ви можете отримати доступ до цих значень за допомогою:

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

Ви навіть можете мати функції як значення, в основному даючи вам методи об’єкта:

obj['func'] = function(a) { return 5 + a;};
obj.func(4);  // -> 9

1
Чудово, тому що дав мені термін шукати та дізнаватися більше інформації.
Johnny

13

З його допомогою можна перераховувати об'єкти змінної. Крім того, він використовується трохи у скороченні речення if:

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

І називати це так

alert(something.man);

Також пропозиція if:

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

10

Не будемо забувати оператор перемикання, де двокрапка використовується після кожного "випадку".


10

Це, як правило, сценарії, де двокрапка ':' використовується в JavaScript

1- Декларація та ініціалізація об'єкта

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

2- Встановлення мітки (не рекомендується, оскільки це призводить до складної структури управління та коду спагетті)

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

3- у вимикачі

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- У термінальному операторі

document.getElementById("demo").innerHTML = age>18? "True" : "False";

1
Одну товсту кишку можна використовувати також для оцінки короткого замикання замість ||. Приклад: var a = false, b = a || 'Default value';еквівалентноvar a = false, b = a : 'Default value';
Shaun Cockerill

7

Це JSON або JavaScript Object Notation. Це швидкий спосіб опису об'єкта або хеш-карти. Реч перед двокрапкою - це властивість, а річ після двокрапки - її значення. Отже, у цьому прикладі є властивість "r", значення якої є будь-якою у змінної r. Те саме для т. Зв.


3
JSON - це лише підмножина синтаксису ініціалізації об'єктів JavaScript. '{a: k ()}', де k - функція, це не JSON, але це прекрасний синтаксис ініціалізації об'єктів JavaScript.
yfeldblum

12
Щоб бути педантичним, ні, це не "JSON". Це схоже на JSON. Синтаксис об'єктного буквального тексту, який є власним JavaScript, і може відображатися безпосередньо всередині коду. З іншого боку, JSON - це серіалізація / обмін даними. JSON - це JSON лише тоді, коли він знаходиться "у повітрі", тобто в дорозі або коли він ще не розібраний у реальний об'єкт.
Ates Goral

3
+1 для Атеш Goral, але зверніть увагу , що наведений приклад не навіть виглядати як JSON: імена повинні бути в подвійних лапках для того , щоб бути допустимим синтаксисом JSON.
NickFitz

3

Одна дурна помилка, яку я зробив деякий час тому, яка могла б допомогти деяким людям.

Майте на увазі, що якщо ви використовуєте ":" у такому випадку, значення не зміниться

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

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

            ...
        });

Тож "nub0x" ініціалізується з першою подією, яка трапиться, і ніколи не змінить свого значення. Але "nub0y" зміниться протягом наступних подій.


Я зіткнувся з цим, і насправді, що тут відбувається, це те, що ви використовуєте мітку перед вашим твердженням. Призначення не робиться, але оператор event.target.offsetLeft + event.target.clientWidth/2;запускається кожного разу, коли викликається метод ondrag, але ніколи не призначайте значенняnub0x
kketch

Насправді це використовується як оцінка, а :обробка трактується так, ніби це було ||. Тому event.target.offsetLeft + event.target.clientWidth/2;буде запускатись лише кожен раз, коли надається nub0xприрівнюється до false.
Shaun Cockerill

1

Інше використання двокрапки в JavaScript - це перейменування змінної, тобто:

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

Це корисно, якщо ви використовуєте сторонню бібліотеку, яка повертає значення, що мають незручні / довгі імена змінних, які ви хочете перейменувати у своєму коді.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.