Что делает «:» (двоеточие) в 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 нельзя замаскировать: вы просто нарушаете 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();
}

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. То же самое для т.


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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.