Об'єкт Javascript Vs 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);

Відповіді:


239
  1. Чи ім'я ключа / властивості дійсне як з / без лапок?

    Єдиний раз , коли вам потрібно докласти ключ в лапках при використанні литерала об'єкта позначення, де ключ містить спеціальний символ ( 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()під кришкою, якщо він підтримується, і в іншому випадку буде відновлюватися до спеціальної реалізації для розбору вхідних даних.


4
@testndtv вам не вистачає точки - хоча на папері (або на екрані) рядок JSON і відображення JS-об'єкта можуть виглядати однаково, вони не те саме. JSON - це лише спосіб упакувати об'єкт у рядок, тому його можна десь перенести та пізніше розпакувати назад в об’єкт.
Альнітак

1
@Matt погана аналогія IMHO - JSON не слід використовувати для серіалізації об'єкта, який має методи - лише для чистих об'єктів даних.
Альнітак

1
Отже, якщо об’єкт JS має методи, перетворення в рядок JSON повністю ігнорує його ... як у вищенаведеному випадку getIn та getOut будуть повністю ігноровані .... Це, як це працює?
testndtv

3
@Growler: зазвичай я використовую JSON , якщо «річ» потреба бути генеруватися на сервері, і використовувати файл JS , якщо «річ» просто служила як є. Іншим великим диференціатором є те, чи потрібно включати функції та / або дати, оскільки JSON не може їх представляти, тому ви повинні вдатися до розміщення файлу JS. Якщо ви все ще не впевнені, не соромтеся задавати це як окреме запитання щодо переповнення стека (покажіть приклад вмісту, який потрібно надати, щоб представити діалогове вікно) та надайте мені посилання; Я з радістю ознайомлюсь уважніше!
Мет

4
@Matt Ви, сер, аф # король геній! Ваше пояснення є чітким, чітким, стислим та зрозумілим. Я б хотів, щоб ти був моїм наставником 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 (рядок). Результатом є звичайний об'єкт 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" }');

  • Q3: У сучасних браузерах 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"
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.