JavaScript の学習と理解のための JSON (概要の共有)

著者：Eve Cole 更新時間：2022-08-30 09:31:45

この記事では、JavaScript に関する知識を提供します。主に、JSON オブジェクト、JSON 配列、JSON 文字列など、JSON に関連する問題を紹介します。皆様のお役に立てれば幸いです。

VUE3.0 をすぐに始める方法: 学習に入る

関連する推奨事項: JavaScript チュートリアル

1. JSON オブジェクト

タスクの説明

このレベルのタスク: JavaScript で JSON オブジェクトを定義する練習をします。

具体的な要件は次のとおりです。key1

、key2、key3 という 3 つの属性を持つ JSON オブジェクト JSONObject を定義します。これらの値はそれぞれパラメーター a、b、c です。
削除が完了したら、
key3 という名前の属性を削除します。
残りのすべての属性は、各属性の値を途中で区切って連結した文字列を返します。

データの送信には JSON が使用されるため、データの保存には一般的に使用される特定のデータ形式が必要です。 JSON のデータ形式には、JSON オブジェクト、JSON 配列、JSON 文字列が含まれます。

JSON オブジェクトとは何ですか?

JSON オブジェクト (一般的に JSON と呼ばれます) は、データの保存と送信に使用される文本数据交換形式です。例は次のとおりです。

{"name":"Jerry", "age":15}

これは単純な JSON オブジェクトです。そのルールは次のとおりです。

データは键/值对の形式で存在し、
括弧
で区切られます。
オブジェクトの保存を示し、
角括弧は配列の保存を示します。

JSON オブジェクトと JavaScript オブジェクトの違い

JSON は JavaScript 構文に基づいているため、JSON にもオブジェクトの概念がありますが、JavaScript のオブジェクトとはいくつかの小さな違いがあります。

JavaScript オブジェクトを定義します:

var myObject = {
    ID:1、
    名前：「ピーター・ブルース」、
    "名":"ブルース",
    表示:関数() {
                console.log(この名前);
            }}

JSON オブジェクトを定義します:

{"id":1,"name":"Peter Bruce","first name":"Bruce"}

3 つの違い:

(1) JSONオブジェクトの属性名 (キー)は二重引用符で囲む必要がありますが、JavaScript オブジェクトは任意ですが、スペースを含む属性名と中間にハイフンが含まれる属性名は二重引用符で囲む必要があります。
(2)メソッドは JSON オブジェクトでは定義できませんが、 JavaScript对象では定義できます。
(3) JSON オブジェクトは多くの言語で操作できますが、JavaScript オブジェクトは JS 自体でのみ認識できます。

JSON オブジェクトの定義方法は次のようになり、

その中に複数の属性名と属性値で構成されるキーと値のペアがあり、属性名と属性値はで区切られます{}値は、数値、文字列、JSON 配列: JSON オブジェクト、null のいずれかのデータ型にすることができます。例:

{"a":1,"b":2.12,"c":true,"d":"string","e":null};

属性値が JSON 配列または JSON オブジェクトの場合レベルは少し複雑になります。

JavaScript での JSON オブジェクトの使用

JSON をサポートする言語であればどれでも JSON オブジェクトを使用できます。ここでは、JavaScript で JSON オブジェクトを使用する方法のみを紹介します。

JavaScript で JSON オブジェクトを定義します。

var jsonObject = {"name":"js","number":2};

属性を操作するには、 .または[] :

console.log(jsonObject.name);

を使用します。

//属性を読み取って出力 jsconsole.log(jsonObject["name"]);
//プロパティを読み取って出力 jsjsonObject.name = "javascript";
// 属性を書き込み、name 属性に値を割り当て、JavaScript を使用して

属性を削除します。delete を使用します。

var jsonObject = {"name":"js","number":2};
jsonObject.name を削除します。
// name 属性を削除し

、for-in ループを使用して属性をトラバースします:

var jsonObject = {"name":"js","number":2};for(att in jsonObject) {
  console.log(jsonObject[att]);
  //出力 js, 2}

シーケンス内の

コードファイル

function mainJs(a,b,c) {
	// ここにコードを書いてください /********** 開始 **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    JSONObject.key3 を削除します。
    a+","+b を返します。
	/********** End ************/}

2. JSON 配列

タスクの説明

このレベルのタスク: JSON キーと値のペアの値を定義および操作します。

具体的な要件は次のとおりです。

myJson の 3 番目の属性の値は配列であり、パラメーター a は数値であることがわかっています。配列内の最初の a 要素を結合する必要があります (これらの要素はすべて文字列型です)。 ) で要素を区切ると、連結された文字列が返されます。
たとえば、a が 2 の場合は、js、java を返す必要があります。

JSON 属性に対応する値 (値) は配列です。JSON

キーと値のペアの値 (値) は、

たとえば、

{"country":"China","population":"13billion"

です。

","bigCity":[ "Peking", "Shanghai", "ShenZhen", "HongKong"]}

属性 bigCity には複数の値があり、それらは配列に配置されます。

上の例では、配列の各要素は文字列です。実際、配列の各要素は別の json オブジェクトにすることもできます。例:

{"class":"Grade 3 Class 1","studentNumber":70,"score":[
    {"名前":"リーミン","スコア":128},
    {"名前":"張華","スコア":134},
    {"name":"ShenLu","score":112}]}

上記のスコア属性の値は配列であり、この配列の各要素は json オブジェクトです。

配列の

読み取りおよび書き込み要素に対するいくつかの操作:

var myJson = {"country":"China","population":"13billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong" "] }console.log(myJson.bigCity[1]);
//ShanghaimyJson.bigCity[0] = "広州"を出力します。
//最初の要素には値広州

横断が割り当てられます:

var myJson = {"country":"China","population":"13billion","bigCity":["Peking","Shanghai","ShenZhen", "香港"]}for(var i = 0;i < myJson.bigCity.length;i++) {
    console.log(myJson.bigCity[i]);//北京、上海、深セン、香港}

コードファイルを

順番に出力

[最初のメソッドは後で作成され、以下の 2 番目のメソッドは最初に使用されました。当時はそれができない場合は、直接出力したいだけです]

var myJson = {
    "カテゴリ":"コンピュータ",
    "詳細":"プログラミング",
    "言語"：[
    「js」、「java」、「php」、「python」、「c」
    ]}関数 mainJs(a) {
    a = parseInt(a);
	// ここにコードを書いてください /********** 開始 **********/
    var b = "";
    for(var i=0;i var myJson = {
    "カテゴリ":"コンピュータ",
    "詳細":"プログラミング",
    "言語"：[
    「js」、「java」、「php」、「python」、「c」
    ]}関数 mainJs(a) {
    a = parseInt(a);
	// ここにコードを書いてください /********** 開始 **********/
    if(a==1){
        myJson.言語[0]を返します;
    }
    if(a==2){
        myJson.言語[0]+","+myJson.言語[1]を返します;
    }
    if(a==3){
        myJson.言語[0]+","+myJson.言語[1]+","+myJson.言語[2]を返します;
    }
    if(a==4){
        myJson.言語[0]+","+myJson.言語[1]+","+myJson.言語[2]+","+myJson.言語[3]を返します;
    }
    if(a==5){
        return myJson.言語[0]+","+myJson.言語[1]+","+myJson.言語[2]+","+myJson.言語[3]+","+myJson.言語[4] ];
    }
	/********** End ************/}
 3. JSON 文字列
タスクの説明
タスク: JSON 文字列と JavaScript オブジェクトを相互に変換する練習をします。
具体的な要件は次のとおりです。
まず、JSON 文字列 JSONString を JavaScript オブジェクト JSONObject に変換し、
次に JSONObject の key1 属性の値を mainJs() 関数のパラメーター a に設定し、
最後に JSONObject を JSON 文字列に変換します。
フロントエンドに文字列を返す
JSON を使用してバックグラウンドとの間でデータを転送できますが、実際に転送されるのは JSON 文字列であり、JSON オブジェクトを直接転送することはできません。
 JSON 文字列
JSON 文字列は、次のように JSON オブジェクトの両側に'を付けて形成される文字列です。
 var JSONObject = {"k1":"v1","k2":"v2"};
//JSON オブジェクト var JSONString1 = '{"k1":"v1","k2":"v2"}';
//
 JSON 文字列の上の JSONSring1 は JSON 文字列で、フロントエンドからバックエンド、またはバックエンドからフロントエンドに直接渡すことができます。
 JavaScript がバックグラウンドから送信された JSON 文字列を受信したとき、処理を容易にするためにそれを JSON オブジェクトに変換するにはどうすればよいでしょうか?
 JSON 文字列から JavaScript オブジェクトへ
JSON.parse(a,b)メソッドは、JSON 文字列 a を JavaScript オブジェクトに変換します。 b はオプションの関数パラメータです。
 var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//出力オブジェクト {k1: "v1", k2: "v2"}
関数パラメータ b はオブジェクトのすべてのプロパティに从里到外順番に作用し、最後のプロパティはオブジェクト自体に作用します。
 //各プロパティのobject 値に 1 を加算します var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//オブジェクト自体に遭遇した場合、1を加算せずに値を返します。
    return value+1;//属性値に1を加算します});console.log(obj);
    //Output Object {key1: 2, key2: 3, key3: 3.2}
上で示したように、この関数には 2 つのパラメーターがあり、key は属性の名前を表し、value はオブジェクト自体の属性の値を表します。 key 値は''で、空の文字列です。
 JSON オブジェクトを JSON 文字列 JSON.stringify(a,b,c) に変換します
JSON.stringify(a,b,c) a は変換対象の JSON オブジェクトで、 b と c はオプションのパラメーターです。
 var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
// JSON オブジェクトを JSON 文字列に変換します
。パラメータ b が関数の場合、関数は JSON オブジェクトの各属性を内側から外側に向かって順番に処理し、最後に処理されたものが JSON オブジェクト自体になります。 JSON文字列に変換します。 ：
 //オブジェクトのすべての属性値に1を加えて文字列に変換します var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify( JSONObject,function(k,v){
    if(k === '')//JSON オブジェクト自体が処理されます return v;
    return v+1;//すべての属性の値に 1 を加算します});console.log(JSONString);
    //出力 {"k1":2,"k2":3.2}
パラメータ b は配列にすることもできます。配列に
は属性の名前が格納され、どの属性のみが変換されるかを指定するために使用されます。
オブジェクト var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1","k2"]);console.log(JSONString) ;
//Output {"k1":1,"k2":2.2}
ここで c について簡単に説明します:
 var str = ["name":"Tom","age":16];var obj1 = JSON.stringify( str) ;
var obj2 = JSON.stringify(str,null,4);console.log(obj1);  
//出力 {"name":"Tom","age":16}console.log(obj2); 
//出力//{
// "名前": "トム",
// "年齢": 16
//}
パラメータ c:テキストにインデント、スペース、改行を追加します。c が数値の場合、戻り値のテキストは各レベルで指定された数のスペースでインデントされます。c が 10 より大きい場合、テキストは 10 個のスペースでインデントされます。
コードファイル
var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	// ここにコードを書いてください /********** 開始 **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    JSON.stringify(JSONObject) を返します。
	/********** 終了 ************/}
関連推奨事項: JavaScript 学習チュートリアル
上記は、JavaScript の学習と理解のための JSON (要約共有) の詳細な内容です。詳細については、php 中国語 Web サイトのその他の関連記事にご注意ください。

JavaScript の学習と理解のための JSON (概要の共有)

1. JSON オブジェクト

タスクの説明

JSON オブジェクトとは何ですか?

JSON オブジェクトと JavaScript オブジェクトの違い

JavaScript での JSON オブジェクトの使用

コード ファイル

2. JSON 配列

タスクの説明

JSON 属性に対応する値 (値) は配列です。JSON

配列の

コード ファイルを

3. JSON 文字列

タスクの説明

JSON 文字列

JSON 文字列から JavaScript オブジェクトへ

JSON オブジェクトを JSON 文字列 JSON.stringify(a,b,c) に変換します

コードファイル

コードファイル

コードファイルを