JavaScript の学習と理解のための JSON (概要の共有)-jsチュートリアル-php.cn

この記事では、javascript に関する関連知識を提供します。主に、JSON オブジェクト、JSON 配列、JSON 文字列など、JSON に関連する問題を紹介します。役に立つすべての人の役に立つことを願っています。

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

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 にもオブジェクトの概念がありますが、JSON オブジェクトとはいくつかの小さな違いがあります。 JavaScript。

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

var myObject = {
    id:1,
    name:"Peter Bruce",
    "first name":"Bruce",
    display:function() {
                console.log(this.name);
            }}

ログイン後にコピー

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

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

ログイン後にコピー

3 つの違い:

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

JSON オブジェクトの定義方法は次のとおりです。

{} でインクルードされ、属性名と属性値で構成される内部 A キーと値のペアがいくつかあります。キーと値のペアはで区切られ、属性名と属性値は : で区切られます。属性値は、次のデータ型のいずれかになります。: 数値、文字列、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};
delete 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) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    delete JSONObject.key3;
    return a+","+b;
	/********** End **********/}

ログイン後にコピー

2、JSON 配列

タスクの説明

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

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

たとえば、a が 2 の場合、js、javaを返す必要があります。

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

例:

{"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}

ログイン後にコピー

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

上記の例では、配列の各要素は文字列です。実際、

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

{"class":"高三一班","studentNumber":70,"score":[
    {"name":"LiMing","score":128},
    {"name":"ZhangHua","score":134},
    {"name":"ShenLu","score":112}]}

ログイン後にコピー

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

配列に対するいくつかの操作

要素の読み取りと書き込み:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}console.log(myJson.bigCity[1]);
//打印出ShanghaimyJson.bigCity[0] = "GuangZhou";
//第一个元素被赋值为GuangZhou

ログイン後にコピー

トラバース:

var myJson = {"country":"China","population":"1.3billion","bigCity":["Peking","Shanghai","ShenZhen","HongKong"]}for(var i = 0;i < myJson.bigCity.length;i++) {
    console.log(myJson.bigCity[i]);//依次输出Peking,Shanghai,ShenZhen,HongKong}

ログイン後にコピー

コードファイル

[最初の方法は後から書いたもので、最初は下記の2番目の方法を使っていました。当時はできなかったので、出力]

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    var b = "";
    for(var i=0;i<a;i++){
        b = b+myJson.language[i]+",";
    }
    return b.slice(0,-1);
	/********** End **********/}

ログイン後にコピー

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//请在此处编写代码
	/********** Begin **********/
    if(a==1){
        return myJson.language[0];
    }
    if(a==2){
        return myJson.language[0]+","+myJson.language[1];
    }
    if(a==3){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2];
    }
    if(a==4){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3];
    }
    if(a==5){
        return myJson.language[0]+","+myJson.language[1]+","+myJson.language[2]+","+myJson.language[3]+","+myJson.language[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));
//输出Object {k1: "v1", k2: "v2"}

ログイン後にコピー

函数参数b按从里到外的顺序作用在对象的所有属性上，最后一个作用的是对象本身：

//对象的每一个属性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//当遇到对象本身时，不进行加1操作
        return value;
    return value+1;//对属性值加1});console.log(obj);
    //输出Object {key1: 2, key2: 3, key3: 3.2}

ログイン後にコピー

如上面所示，函数的参数有两个，其中key表示属性的名字，value表示属性的值，当遇到对象本身时，key的值为''，即空字符串。

JSON对象转换为JSON字符串

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);
//输出{"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); 
//输出
//{
//    "name": "Tom",
//    "age": 16
//}

ログイン後にコピー

参数c：文本添加缩进、空格和换行符，如果 c 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 c 大于 10，则文本缩进 10 个空格。

代码文件

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	//请在此处编写代码
	/********** Begin **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    return JSON.stringify(JSONObject);
	/********** End **********/}

ログイン後にコピー