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

回答:


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)に送信できます。オブジェクトのJSON表現に基づいて、JavaScriptオブジェクトを独自のオブジェクトに再作成できます。

    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はオブジェクトを文字列にパックするための方法にすぎないため、どこかに転送し、後でオブジェクトにアンパックすることができます。
Alnitak

1
@Mattの貧弱な類似IMHO-JSONは、メソッドを持つオブジェクトのシリアル化には使用しないでください-純粋なデータオブジェクトに対してのみです。
Alnitak

1
したがって、JSオブジェクトにメソッドがある場合、JSON文字列への変換はそれを完全に無視します...上記の場合のように、getInとgetOutは完全に無視されます...それはどのように機能しますか?
testndtv

3
@Growlerは:通常、私が「事」必要がある場合されるJSONを使用して生成されたサーバー上で、そして「もの」がちょうどされている場合のjsファイルを使用務めて-です。他の大きな違いは、JSONはそれらを表すことができないため、関数や日付を含める必要があるかどうかです。そのため、JSファイルを提供する必要があります。それでもわからない場合は、Stack Overflowで別の質問として自由に質問し(ダイアログを表すために提供する必要があるコンテンツの例を示してください)、リンクをご提示ください。もう少し詳しく見ていきましょう!
マット

4
@マットあなたはサー、キング天才です!あなたの説明は的確で、明確、簡潔、そして理解しやすいものです。あなたが私の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

もう1つの違いに注意してください。JSONでは、すべてのキーを引用符で囲む必要があります。これは、Q1での説明のように通常引用符を省略できるオブジェクトリテラルとは対照的です。

Q3。を使用してJSON文字列を解析できます。JSON.parseこれは通常、ブラウザーまたはフレームワークが提供する場合、これを行うための最良の方法です。evalJSONは有効なJavaScriptコードなので、そのまま使用することもできますが、前者の方法が推奨される理由はいくつかあります(evalには多くの厄介な問題があります)。


9

JSONによって解決される問題

2台のコンピューター間で通常のJavaScriptオブジェクトを交換したいとし、2つのルールを設定するとします。

  • 送信されるデータは通常の文字列でなければなりません。
  • 交換できるのは属性のみで、メソッドは送信されません。

次に、最初のホストに2つのオブジェクトを作成します。

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

これらのオブジェクトを2番目のホストに送信するために文字列に変換するにはどうすればよいですか?

  • 最初のオブジェクトの場合、リテラル定義'{ one: 1,"two":2,"three":3 }'から取得したこの文字列を送信できますが、実際にはドキュメントのスクリプト部分のリテラルを読み取ることはできません(少なくとも簡単にはできません)。したがってobj1obj2実際には同じ方法で処理する必要があります。
  • すべての属性とその値を列挙し、オブジェクトリテラルと同様の文字列を作成する必要があります。

JSONは、先ほど説明したニーズに対するソリューションとして作成されました。これは、すべての属性と値をリストしてオブジェクトと同等の文字列を作成する一連のルールです(メソッドは無視されます)。

JSONは、属性名と値の二重引用符の使用を正規化します。

JSONは単なるルールのセット(標準)であることに注意してください。

JSONオブジェクトはいくつ作成されますか?

1つだけ、それはJSエンジンによって自動的に作成されます。

ブラウザにある最新のJavaScriptエンジンには、JSONという名前のネイティブオブジェクトがあります。このJSONオブジェクトは次のことができます。

  • JSON.parse(string)を使用して、JSON標準を使用して構築された文字列をデコードします。結果は、JSON文字列で見つかった属性と値を持つ通常のJSオブジェクトです。

  • JSON.stringify()を使用して、通常のJSオブジェクトの属性/値をエンコードします。結果は、ルールのJSONセットに準拠した文字列です。

(単一の)JSONオブジェクトはコーデックに似ており、その機能はエンコードとデコードです。

ご了承ください:

  • JSON.parse()はJSONオブジェクトを作成せず、通常のJSオブジェクトを作成します。オブジェクトリテラルを使用して作成されたオブジェクトと、JSON準拠の文字列からJSON.parse()によって作成されたオブジェクトに違いはありません。

  • すべての変換に使用されるJSONオブジェクトは1つだけです。

質問に戻る

  • Q1:オブジェクトリテラルでは、二重引用符を1つ使用できます。引用符はオプションで属性名に使用され、文字列値には必須であることに注意してください。オブジェクトリテラル自体は引用符で囲まれていません。

  • Q2:リテラルから作成され、JSON.parse()を使用して作成されたオブジェクトは、まったく同じです。これら2つのオブジェクトは、作成後は等価です。

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

  • Q3:最近のブラウザでJSON.parse()は、JSON準拠の文字列からJSオブジェクトを作成するために使用されます。(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"
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.