JSON對(duì)象與Javascript對(duì)象的區(qū)別是什么

本篇內(nèi)容主要講解“JSON對(duì)象與Javascript對(duì)象的區(qū)別是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JSON對(duì)象與Javascript對(duì)象的區(qū)別是什么”吧!

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),獨(dú)山企業(yè)網(wǎng)站建設(shè),獨(dú)山品牌網(wǎng)站建設(shè),網(wǎng)站定制,獨(dú)山網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,獨(dú)山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1、JSON對(duì)象

任務(wù)描述

本關(guān)任務(wù)：練習(xí)在JavaScript中定義JSON對(duì)象。

具體要求如下：

1. 定義一個(gè)JSON對(duì)象JSONObject，它有三個(gè)屬性：key1、key2和key3，它們的值分別是參數(shù)a、b和c；

2. 刪除其中名字為key3的屬性；

3. 刪除完成后，遍歷其余的所有屬性，返回各屬性的值連接成的字符串，中間用,隔開

JSON既然是用來(lái)傳遞數(shù)據(jù)的，必然要先存儲(chǔ)數(shù)據(jù)，存儲(chǔ)數(shù)據(jù)需要采用一定的數(shù)據(jù)格式，JSON常用的數(shù)據(jù)格式有JSON對(duì)象、JSON數(shù)組和JSON字符串。

什么是JSON對(duì)象

JSON對(duì)象（通常叫JSON）是一種文本數(shù)據(jù)的交換格式，用于存儲(chǔ)和傳輸數(shù)據(jù)。示例如下：

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

這就是一個(gè)簡(jiǎn)單的json對(duì)象，它的規(guī)則是：

• 數(shù)據(jù)以鍵/值對(duì)的形式存在；

• 數(shù)據(jù)之間用逗號(hào)間隔；

• 大括號(hào)表示保存對(duì)象；

• 方括號(hào)表示保存數(shù)組。

JSON對(duì)象與Javascript對(duì)象的區(qū)別

JSON是基于JavaScript語(yǔ)法的，所以JSON中也有對(duì)象的概念，但是和JavaScript中的對(duì)象有一些小的區(qū)別。

1. 定義一個(gè)JavaScript對(duì)象：

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

2. 定義一個(gè)JSON對(duì)象：

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

3. 三點(diǎn)區(qū)別：

---

（1）JSON對(duì)象的屬性名（key）必須被包含在雙引號(hào)之中，而JavaScript對(duì)象除了有空格的屬性名、中間有連字符-的屬性名必須在雙引號(hào)之中外，其它隨意；
（2）不能在JSON對(duì)象中定義方法，而在JavaScript對(duì)象中可以；
（3）JSON對(duì)象可以被很多語(yǔ)言操作，而JavaScript對(duì)象只有JS自己可以識(shí)別。

---

4. 定義JSON對(duì)象的方法如下

用一個(gè){}包含在內(nèi)，內(nèi)部是若干個(gè)屬性名和屬性值構(gòu)成的鍵值對(duì)，鍵值對(duì)之間用,隔開，屬性名和屬性值之間用:隔開，屬性值可以是以下任意一種數(shù)據(jù)類型的數(shù)據(jù)：數(shù)字、字符串、JSON數(shù)組、JSON對(duì)象、null。如：

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

屬性值是JSON數(shù)組或者JSON對(duì)象的情況稍復(fù)雜，后面的關(guān)卡將介紹。

在JavaScript中使用JSON對(duì)象

支持JSON的語(yǔ)言都能夠使用JSON對(duì)象，這里僅介紹在JavaScript中如何使用JSON對(duì)象。

• 在JavaScript中定義一個(gè)JSON對(duì)象：

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循環(huán)：

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

代碼文件

function mainJs(a,b,c) {
	//請(qǐng)?jiān)诖颂幘帉懘a
	/********** Begin **********/
    var JSONObject = {"key1":a,"key2":b,"key3":c};
    delete JSONObject.key3;
    return a+","+b;
	/********** End **********/}

2、JSON數(shù)組

任務(wù)描述

本關(guān)任務(wù)：定義并操作JSON鍵值對(duì)中的值。

具體要求如下：

• 已知myJson的第三個(gè)屬性的值是一個(gè)數(shù)組，參數(shù)a是一個(gè)數(shù)字，要求將數(shù)組中前a個(gè)元素（這些元素都是字符串類型）拼接起來(lái)，元素之間用,隔開，返回拼接后的字符串；

• 比如a為2的時(shí)候，你需要返回js,java。

JSON屬性對(duì)應(yīng)的值(value)是一個(gè)數(shù)組

• JSON鍵值對(duì)中的值(value)可以是一個(gè)數(shù)組

比如：

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

屬性bigCity的值有多個(gè)，放在一個(gè)數(shù)組里面。

上面例子里面，數(shù)組的每一個(gè)元素都是字符串。其實(shí)，數(shù)組的每一個(gè)元素還可以是另外一個(gè)json對(duì)象。比如：

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

上面的score屬性的值是一個(gè)數(shù)組，這個(gè)數(shù)組的每一個(gè)元素是一個(gè)json對(duì)象。

數(shù)組的一些操作

1. 讀寫元素：

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

2. 遍歷：

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}

代碼文件

【第一種方法是后來(lái)寫的，剛開始用的是下面的第二種辦法，因?yàn)楫?dāng)時(shí)做不出來(lái)，就想著直接輸出】

var myJson = {
    "category":"computer",
    "detail":"programming",
    "language":[
    "js","java","php","python","c"
    ]}function mainJs(a) {
    a = parseInt(a);
	//請(qǐng)?jiān)诖颂幘帉懘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);
	//請(qǐng)?jiān)诖颂幘帉懘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字符串

任務(wù)描述

本關(guān)任務(wù)：練習(xí)JSON字符串和JavaScript對(duì)象的相互轉(zhuǎn)換。

具體要求如下：

1. 先將JSON字符串JSONString轉(zhuǎn)換為JavaScript對(duì)象JSONObject；

2. 然后將JSONObject的key1屬性的值設(shè)置為mainJs()函數(shù)的參數(shù)a；

3. 最后將JSONObject轉(zhuǎn)換為JSON字符串，并返回該字符串

在前端和后臺(tái)之間傳遞數(shù)據(jù)可以使用JSON，但是實(shí)際上傳遞的是JSON字符串，而JSON對(duì)象是不可以直接進(jìn)行傳遞的。

JSON字符串

JSON字符串就是在JSON對(duì)象兩邊套上'形成的字符串，如：

var JSONObject  = {"k1":"v1","k2":"v2"};
//JSON對(duì)象var JSONString1 = '{"k1":"v1","k2":"v2"}';
//JSON字符串

上面的JSONSring1就是JSON字符串，可以直接從前端傳到后臺(tái)或者后臺(tái)傳到前端。

當(dāng)JavaScript收到從后臺(tái)傳來(lái)的JSON字符串后，怎么把它變成JSON對(duì)象方便處理呢？

JSON字符串到JavaScript對(duì)象

JSON.parse(a,b)方法將JSON字符串a(chǎn)轉(zhuǎn)換為JavaScript對(duì)象。b是一個(gè)可選的函數(shù)參數(shù)。

var JSONString1 = '{"k1":"v1","k2":"v2"}';console.log(JSON.parse(JSONString1));
//輸出Object {k1: "v1", k2: "v2"}

函數(shù)參數(shù)b按從里到外的順序作用在對(duì)象的所有屬性上，最后一個(gè)作用的是對(duì)象本身：

//對(duì)象的每一個(gè)屬性的值加1var text = '{ "key1":1, "key2":2, "key3":2.2}';var obj = JSON.parse(text, function (key, value) {
    if(key === '')//當(dāng)遇到對(duì)象本身時(shí)，不進(jìn)行加1操作
        return value;
    return value+1;//對(duì)屬性值加1});console.log(obj);
    //輸出Object {key1: 2, key2: 3, key3: 3.2}

如上面所示，函數(shù)的參數(shù)有兩個(gè)，其中key表示屬性的名字，value表示屬性的值，當(dāng)遇到對(duì)象本身時(shí)，key的值為''，即空字符串。

JSON對(duì)象轉(zhuǎn)換為JSON字符串

JSON.stringify(a,b,c)，a是待轉(zhuǎn)換的JSON對(duì)象，b和c為可選參數(shù)。

var JSONObject = {"k1":"v1","k2":"v2"};
JSON.stringify(JSONObject);
//JSON對(duì)象轉(zhuǎn)換為JSON字符串

參數(shù)b為函數(shù)時(shí)，該函數(shù)按照從里到外的順序處理JSON對(duì)象的每一個(gè)屬性，最后一個(gè)處理的是JSON對(duì)象本身，處理完后再轉(zhuǎn)為JSON字符串：

//對(duì)象的所有屬性值加1，再轉(zhuǎn)為字符串var JSONObject = {"k1":1,"k2":2.2};var JSONString = JSON.stringify(JSONObject,function(k,v){
    if(k === '')//處理到了JSON對(duì)象本身
        return v;
    return v+1;//所有的屬性的值加1});console.log(JSONString);
    //輸出{"k1":2,"k2":3.2}

參數(shù)b還可以是數(shù)組，數(shù)組存儲(chǔ)的是屬性的名字，用來(lái)指定只轉(zhuǎn)換哪些屬性：

//轉(zhuǎn)換對(duì)象中特定的屬性
var JSONObject = {"k1":1,"k2":2.2,"k3":3};var JSONString = JSON.stringify(JSONObject,["k1","k2"]);console.log(JSONString);
//輸出{"k1":1,"k2":2.2}

這里簡(jiǎn)單介紹一下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
//}

---

參數(shù)c：文本添加縮進(jìn)、空格和換行符，如果 c 是一個(gè)數(shù)字，則返回值文本在每個(gè)級(jí)別縮進(jìn)指定數(shù)目的空格，如果 c 大于 10，則文本縮進(jìn) 10 個(gè)空格。

代碼文件

var JSONString = '{"key1":"value1","key2":"value2"}';function mainJs(a) {
	//請(qǐng)?jiān)诖颂幘帉懘a
	/********** Begin **********/
    var JSONObject = JSON.parse(JSONString);
    JSONObject["key1"] = a;
    JSONObject.key1 = a;
    return JSON.stringify(JSONObject);
	/********** End **********/}

到此，相信大家對(duì)“JSON對(duì)象與Javascript對(duì)象的區(qū)別是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章名稱：JSON對(duì)象與Javascript對(duì)象的區(qū)別是什么
網(wǎng)站URL：http://muchs.cn/article22/gcidjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、外貿(mào)建站、網(wǎng)站收錄、微信小程序、品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)