VUE3.0 をすぐに始める方法: 学習に入る
関連する推奨事項: JavaScript チュートリアル
このレベルのタスク: JavaScript で JSON オブジェクトを定義する練習をします。
具体的な要件は次のとおりです。key1
、key2、key3 という 3 つの属性を持つ JSON オブジェクト JSONObject を定義します。これらの値はそれぞれパラメーター a、b、c です。
削除が完了したら、
key3 という名前の属性を削除します。
残りのすべての属性は、各属性の値を途中で区切って連結した文字列を返します。
データの送信には JSON が使用されるため、データの保存には一般的に使用される特定のデータ形式が必要です。 JSON のデータ形式には、JSON オブジェクト、JSON 配列、JSON 文字列が含まれます。
JSON オブジェクト (一般的に JSON と呼ばれます) は、データの保存と送信に使用される文本数据
交換形式です。例は次のとおりです。
{"name":"Jerry", "age":15}
これは単純な JSON オブジェクトです。そのルールは次のとおりです。
键/值对
の形式で存在し、JSON は JavaScript 構文に基づいているため、JSON にもオブジェクトの概念がありますが、JavaScript のオブジェクトとはいくつかの小さな違いがあります。
var myObject = { ID:1、 名前:「ピーター・ブルース」、 "名":"ブルース", 表示:関数() { console.log(この名前); }}
{"id":1,"name":"Peter Bruce","first name":"Bruce"}
(1) JSON
オブジェクトの属性名 (キー)は二重引用符で囲む必要がありますが、JavaScript オブジェクトは任意ですが、スペースを含む属性名と中間にハイフンが含まれる属性名は二重引用符で囲む必要があります。
(2)メソッドは JSON オブジェクトでは定義できませんが、 JavaScript对象
では定義できます。
(3) JSON オブジェクトは多くの言語で操作できますが、JavaScript オブジェクトは JS 自体でのみ認識できます。
その中に複数の属性名と属性値で構成されるキーと値のペアがあり、属性名と属性値は で区切られます{}
値は、数値、文字列、JSON 配列:
JSON オブジェクト、null のいずれかのデータ型にすることができます。例:
{"a":1,"b":2.12,"c":true,"d":"string","e":null};
属性値が JSON 配列または JSON オブジェクトの場合レベルは少し複雑になります。
JSON をサポートする言語であればどれでも JSON オブジェクトを使用できます。ここでは、JavaScript で JSON オブジェクトを使用する方法のみを紹介します。
var jsonObject = {"name":"js","number":2};
.
または[]
:console.log(jsonObject.name);を使用します。
//属性を読み取って出力 jsconsole.log(jsonObject["name"]); //プロパティを読み取って出力 jsjsonObject.name = "javascript"; // 属性を書き込み、name 属性に値を割り当て、JavaScript を使用して
var jsonObject = {"name":"js","number":2}; jsonObject.name を削除します。 // name 属性を削除し
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 ************/}
このレベルのタスク: 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<a;i++){ b = b+myJson.言語[i]+","; } b.slice(0,-1) を返します。 /********** 終了 **********/}
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 ************/}
タスク: JSON 文字列と JavaScript オブジェクトを相互に変換する練習をします。
具体的な要件は次のとおりです。
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.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.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 サイトのその他の関連記事にご注意ください。