Javascript объект против JSON

208

Я хочу четко понять основные различия между объектом Javascript и строкой JSON.

Допустим, я создаю следующую переменную JS:

var testObject = {one: 1,"two":2,"three":3};

Q1. Допустимо ли имя ключа / свойства как с кавычками, так и без них? (например "one" : 1)

Если да, в чем разница?

Q2: Если я преобразую вышеуказанный объект, используя JSON.stringify(testObject), в чем разница между исходным объектом JS и JSON?

Я чувствую, что они почти одинаковы. Пожалуйста, уточните это.

Q3: Для разбора строки JSON, рекомендуется ли метод ниже?

var javascriptObj = JSON.parse(jSonString);
testndtv
источник

Ответы:

239
  1. Допустимо ли имя ключа / свойства как с кавычками, так и без них?

    Единственный раз, когда вам нужно заключить ключ в кавычки при использовании нотации Object Literal, это когда ключ содержит специальный символ ( if, :и -т. Д.). Стоит отметить, что ключ в JSON должен быть заключен в двойные кавычки.

  2. Если я преобразую вышеуказанный объект в JSON, используя var jSonString = JSON.stringify(testObject);разницу между 2 (JS obj и JSON)?

    JSON - это формат обмена данными. Это стандарт, который описывает, как упорядоченные списки и неупорядоченные карты, логические строки и числа могут быть представлены в строке. Так же, как XML и YAML - это способ передачи структурированной информации между языками, JSON - то же самое. С другой стороны, объект JavaScript - это физический тип. Как и массив PHP, класс / структура C ++, объект JavaScript является типом, внутренним для JavaScript.

    Вот история. Представим, что вы купили мебель в магазине и хотите, чтобы она была доставлена. Однако на складе остается только модель дисплея, но вы соглашаетесь ее купить.

    В магазине купленный комод - это живой объект:

    var chestOfDrawers = {
        color: "red",
        numberOfDrawers: 4
    }
    

    Тем не менее, вы не можете отправить комод в сообщении, поэтому вы разбираете его (читай, строчите). Теперь это бесполезно с точки зрения мебели. Теперь это JSON. Это в форме плоской упаковки.

    {"color":"red","numberOfDrawers":4}

    Получив его, вы затем воссоздаете комод (читай, разбирай). Теперь он снова в форме объекта.

    Причина использования JSON / XML и YAML состоит в том, чтобы обеспечить возможность передачи данных между языками программирования в формате, понятном для обоих участвующих языков; вы не можете дать PHP или C ++ свой объект JavaScript напрямую; потому что каждый язык представляет объект по-разному под капотом. Однако, поскольку мы преобразовали объект в нотацию JSON; то есть стандартизированный способ представления данных, мы можем передать представление объекта в формате JSON другому языку (C ++, PHP), они могут воссоздать объект JavaScript, который у нас был, в свой собственный объект на основе представления объекта в формате JSON.

    Важно отметить, что JSON не может представлять функции или даты. Если вы попытаетесь структурировать объект с помощью члена-функции, функция будет исключена из представления JSON. Дата будет преобразована в строку;

    JSON.stringify({
        foo: new Date(),
        blah: function () { 
            alert('hello');
        }
    }); // returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"
    
  3. Для анализа строки JSON рекомендуется ли метод ниже? var javascriptObj = JSON.parse(jSonString);

    Да, но старые браузеры изначально не поддерживают JSON (IE <8) . Чтобы поддержать это, вы должны включить json2.js.

    Если вы используете jQuery, вы можете позвонить jQuery.parseJSON(), который будет использовать JSON.parse()скрытно, если он поддерживается, и в противном случае откроется пользовательская реализация для разбора ввода.

Matt
источник
4
@testndtv Вы упускаете суть - хотя на бумаге (или на экране) строка JSON и отображение объекта JS могут выглядеть одинаково, это не одно и то же. JSON - это просто способ упаковать объект в строку, поэтому его можно перенести куда-нибудь, а затем распаковать обратно в объект.
Альнитак
1
@Matt плохая аналогия ИМХО - JSON не следует использовать для сериализации объекта, у которого есть методы - только для чистых объектов данных.
Альнитак
1
Поэтому, если у объекта JS есть методы, преобразование в строку JSON полностью игнорирует его ... как в приведенном выше случае, getIn и getOut будут полностью проигнорированы ... Так ли это работает?
testndtv
3
@Growler: обычно я использую JSON , если «вещь» потребность быть генерироваться на сервере, и использовать файл JS , если «вещь» просто служила как есть. Другим важным отличием является необходимость включения функций и / или дат, поскольку JSON не может их представлять, поэтому вы должны прибегнуть к обслуживанию файла JS. Если вы все еще не уверены, не стесняйтесь задавать его в качестве отдельного вопроса о переполнении стека (покажите пример содержимого, которое вы должны предоставить для представления своего диалога), и дайте мне ссылку; Я буду счастлив поближе!
Мэтт
4
@Matt Вы, сэр, af # король гений! Ваше объяснение точное, четкое, краткое и простое для понимания. Я хотел бы, чтобы вы были моим учителем JavaScript / программирования.
FrankDraws
30

Q1: при определении литералов объекта в javascript ключи могут включать кавычки или нет. Нет никакой разницы, за исключением того, что в кавычках можно указывать определенные ключи, которые могут привести к тому, что интерпретатор не сможет выполнить синтаксический анализ, если вы попробуете их голыми. Например, если вы хотите получить ключ, который был просто восклицательным знаком, вам понадобятся кавычки:

a = { "!": 1234 } // Valid
a = { !: 1234 } //  Syntax error

В большинстве случаев вы можете опустить кавычки вокруг ключей литералов объекта.

Q2: JSON буквально является строковым представлением. Это просто строка. Итак, рассмотрим это:

var testObject = { hello: "world" }
var jSonString = JSON.stringify(testObject);

Поскольку testObjectэто реальный объект, вы можете вызывать свойства для него и делать все, что вы можете делать с объектами:

testObject.hello => "world"

С другой стороны, jsonStringэто просто строка:

jsonString.hello => undefined

Обратите внимание на еще одно отличие: в JSON все ключи должны быть заключены в кавычки. Это контрастирует с литералами объекта, где кавычки обычно могут быть опущены согласно моему объяснению в Q1.

Q3. Вы можете проанализировать строку JSON с помощью JSON.parse, и, как правило, это лучший способ сделать это (если браузер или фреймворк предоставляет это). Вы также можете просто использовать, evalпоскольку JSON является допустимым кодом JavaScript, но первый метод рекомендуется по ряду причин (с eval связано много неприятных проблем).

Бен Ли
источник
9

Проблемы, решаемые с помощью JSON

Допустим, вы хотите обмениваться обычными объектами JavaScript между двумя компьютерами, и вы установили два правила:

  • Переданные данные должны быть обычной строкой.
  • Можно обмениваться только атрибутами, методы не передаются.

Теперь вы создаете два объекта на первом хосте:

var obj1 = { one: 1,"two":2,"three":3 }; // your example
var obj2 = { one: obj1.one, two: 2, three: obj1.one + obj1.two };

Как вы можете преобразовать эти объекты в строки для передачи на второй хост?

  • Для первого объекта вы можете отправить эту полученную строку из литерального определения '{ one: 1,"two":2,"three":3 }', но на самом деле вы не можете прочитать литерал в части документа в скрипте (по крайней мере, не так просто). Так obj1и obj2должно на самом деле обрабатываться одинаково.
  • Вам нужно перечислить все атрибуты и их значения и построить строку, аналогичную литералу объекта.

JSON был создан как решение только что обсужденных потребностей: это набор правил для создания строки, эквивалентной объекту, путем перечисления всех атрибутов и значений (методы игнорируются).

JSON нормализует использование двойных кавычек для имен и значений атрибутов.

Помните, что JSON - это только набор правил (стандарт).

Сколько объектов JSON создано?

Только один, он автоматически создается движком JS.

Современные механизмы JavaScript, найденные в браузерах, имеют собственный объект, также называемый JSON. Этот объект JSON может:

  • Декодируйте строку, построенную с использованием стандарта JSON, используя JSON.parse (string). Результатом является обычный объект JS с атрибутами и значениями, найденными в строке JSON.

  • Кодировать атрибуты / значения обычного объекта JS с помощью JSON.stringify (). В результате получается строка, соответствующая набору правил JSON.

(Единственный) объект JSON похож на кодек, его функция заключается в кодировании и декодировании.

Обратите внимание, что:

  • JSON.parse () не создает объект JSON, он создает обычный объект JS, нет разницы между объектом, созданным с использованием литерала объекта, и объектом, созданным с помощью JSON.parse () из строки, совместимой с JSON.

  • Существует только один объект JSON, который используется для всех преобразований.

Возвращаясь к вопросам :

  • Q1: использование одинарных двойных кавычек разрешено для литералов объекта. Обратите внимание, что кавычки используются необязательно для имен атрибутов и являются обязательными для строковых значений. Сам литерал объекта не заключен в кавычки.

  • Q2: Объекты, созданные из литералов и использующие JSON.parse (), строго совпадают. Эти два объекта эквивалентны после создания:

    var obj1 = { one: 1, "two": 2, "three": 3 };
    var obj2 = JSON.parse('{ "one": "1", "two": "2", "three": "3" }');

  • В3: В современных браузерах JSON.parse()используется для создания объекта JS из JSON-совместимой строки. (jQuery также имеет эквивалентный метод, который можно использовать для всех браузеров).

мин
источник
7

Q1 - в JS вам нужно использовать кавычки, только если ключ является зарезервированным словом или если в противном случае он был бы недопустимым токеном. В JSON вы ДОЛЖНЫ всегда использовать двойные кавычки в именах ключей.

Q2 - jsonStringэто сериализованная версия входного объекта ...

Q3 - который может быть десериализован до идентичного объекта с использованиемJSON.parse()

Альнитак
источник
1

На вопрос уже выложены хорошие ответы, ниже я добавляю небольшой пример, который облегчит понимание объяснений, приведенных в предыдущих ответах. Скопируйте вставленный ниже фрагмент в вашу IDE для лучшего понимания и закомментируйте строку, содержащую invalid_javascript_object_no_quotesобъявление объекта, чтобы избежать ошибки времени компиляции.

// Valid JSON strings(Observe quotes)
valid_json = '{"key":"value"}'
valid_json_2 = '{"key 1":"value 1"}' // Observe the space(special character) in key - still valid


//Valid Javascript object
valid_javascript_object_no_quotes = {
    key: "value"  //No special character in key, hence it is valid without quotes for key
}


//Valid Javascript object
valid_javascript_object_quotes = {
    key:"value",  //No special character in key, hence it is valid without quotes for key
    "key 1": "value 1" // Space (special character) present in key, therefore key must be contained in double quotes  - Valid
}



console.log(typeof valid_json) // string
console.log(typeof valid_javascript_object_no_quotes) // object
console.log(typeof valid_javascript_object_quotes) // object

//Invalid Javascript object 
invalid_javascript_object_no_quotes = {
   key 1: "value"//Space (special character) present in key, since key is not enclosed with double quotes "Invalid Javascript Object"
}
Шива
источник