Что делает «:» (двоеточие) в 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';
yfeldblum
источник
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 нельзя замаскировать: вы просто нарушаете goto; и вы нашли это! ;)
Андрей
1
Справочная страница MDN для JS Label: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Питер
да, именно поэтому a => {b: 2} не будет бросать и возвращать неопределенное
Pavlo D
70

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

троичный оператор является формой выражения (выражения возвращают значение) оператора if / then. он используется так:

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

Тройной оператор также может быть использован для создания побочных эффектов, как если бы / то, но это очень плохая практика.

бретонский
источник
2
Ака "троичный оператор". Обратите внимание, что OP строго спрашивает об объектном литерале. Если мы хотим выйти за рамки того, что запрашивает OP, двоеточие также используется в метках.
Атес Горал
14
да, я имел в виду это. Я должен просто оставаться в стороне от интернета, на самом деле, если я собираюсь обойти вопиюще неверное определение таких концепций программирования.
Бретон
Было бы замечательно видеть, что это используется для меток и чего-либо еще, поэтому использование никогда не смущает @AtesGoral, потому что я сейчас все еще гуглю их.
Шейн
Возможно, было бы проще перечислить вещи, которые: не используются в Javascript.
kingfrito_5005
45

':' - это в основном разделитель для пар ключ-значение. В вашем примере это нотация Javascript Object Literal.

В 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), которая полезна в вызовах AJAX, потому что она компактна и быстра для анализа на серверных языках, и Javascript может легко десериализовать строку JSON в объект.

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

Вы также можете поместить ключ в кавычки, если он содержит какие-то специальные символы или пробелы, но я бы не советовал, потому что это только усложняет работу с ним.

Помните, что буквенная нотация JavaScript Object на языке 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
Отлично, потому что он дал мне термин для поиска и получения дополнительной информации.
Джонни
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();
}
user1431627
источник
10

Давайте не будем забывать оператор switch, где двоеточие используется после каждого «регистра».

Теппо Вуори
источник
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';
Шон Кокерилл
7

Это JSON, или JavaScript Object Notation. Это быстрый способ описания объекта или хэш-карты. Вещи перед двоеточием - это имя свойства, а вещи после двоеточия - это его значение. Так что в этом примере есть свойство «r», значение которого равно значению переменной r. То же самое для т.

JW.
источник
3
JSON является только подмножеством синтаксиса инициализации объекта JavaScript. '{a: k ()}', где k - функция, не является JSON, но это совершенно прекрасный синтаксис инициализации объекта JavaScript.
yfeldblum
12
Быть педантичным, нет, это не "JSON". Это выглядит как JSON. Это синтаксис литерала объекта, который является родным для JavaScript и может появляться непосредственно внутри кода. С другой стороны, JSON - это формат сериализации / обмена данными. JSON - это JSON, только когда он находится в воздухе, то есть в пути или когда он еще не проанализирован в реальном объекте.
Атес Горал
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.
Шон Кокерилл
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";

Это полезно, если вы используете стороннюю библиотеку, которая возвращает значения с неудобными / длинными именами переменных, которые вы хотите переименовать в своем коде.

schlingel
источник