簡體   English   中英

JSON.stringify 和 JSON.parse 之間的區別

[英]Difference between JSON.stringify and JSON.parse

我對何時使用這兩種解析方法感到困惑。

在我回顯我的 json_encoded 數據並通過 ajax 取回它之后,我經常對何時應該使用JSON.stringifyJSON.parse 感到困惑

解析時我在console.log中得到[object,object] ,字符串化時得到 JavaScript object。

$.ajax({
url: "demo_test.txt",
success: function(data) {
         console.log(JSON.stringify(data))
                     /* OR */
         console.log(JSON.parse(data))
        //this is what I am unsure about?
    }
});

JSON.stringify將 JavaScript 對象轉換為 JSON 文本並將該 JSON 文本存儲在字符串中,例如:

var my_object = { key_1: "some text", key_2: true, key_3: 5 };

var object_as_string = JSON.stringify(my_object);  
// "{"key_1":"some text","key_2":true,"key_3":5}"  

typeof(object_as_string);  
// "string"  

JSON.parse將一串 JSON 文本轉換為 JavaScript 對象,例如:

var object_as_string_as_object = JSON.parse(object_as_string);  
// {key_1: "some text", key_2: true, key_3: 5} 

typeof(object_as_string_as_object);  
// "object" 

JSON.parse()用於“解析”作為 JSON 接收的內容。
JSON.stringify()是從一個對象/數組中創建一個 JSON 字符串。

它們是彼此的倒數。 JSON.stringify()將 JS 對象序列化為 JSON 字符串,而JSON.parse()將 JSON 字符串反序列化為 JS 對象。

它們是彼此的對立面。

JSON.stringify()

JSON.stringify() 將 JS 對象或值序列化為 JSON 字符串。

JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) 
// '"2006-01-02T15:04:05.000Z"'

JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'

JSON.parse()

JSON.parse() 方法將字符串解析為 JSON,可選擇轉換生成的值。

JSON.parse('{}');              // {}
JSON.parse('true');            // true
JSON.parse('"foo"');           // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null');            // null

首先, JSON.stringify()函數將 JavaScript 值轉換為 JavaScript 對象表示法 (JSON) 字符串。 JSON.parse()函數將 JavaScript 對象表示法 (JSON) 字符串轉換為對象。 有關這兩個功能的更多信息,請參閱以下鏈接。

https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx https://msdn.microsoft.com/library/cc836466(v=vs.94).aspx

其次,下面的示例將有助於您理解這兩個功能。

<form id="form1" runat="server">
    <div>
        <div id="result"></div>
    </div>
</form>

<script>
    $(function () {
        //define a json object
        var employee = { "name": "John Johnson", "street": "Oslo West 16", "phone": "555 1234567" };

        //use JSON.stringify to convert it to json string
        var jsonstring = JSON.stringify(employee);
        $("#result").append('<p>json string: ' + jsonstring + '</p>');

        //convert json string to json object using JSON.parse function
        var jsonobject = JSON.parse(jsonstring);
        var info = '<ul><li>Name:' + jsonobject.name + '</li><li>Street:' + jsonobject.street + '</li><li>Phone:' + jsonobject.phone + '</li></ul>';

        $("#result").append('<p>json object:</p>');
        $("#result").append(info);
    });
</script>
var log = { "page": window.location.href, 
        "item": "item", 
        "action": "action" };

log = JSON.stringify(log);
console.log(log);
console.log(JSON.parse(log));

//輸出將是:

//對於第一個控制台是一個類似的字符串:

'{ "page": window.location.href,"item": "item","action": "action" }'

//對於第二個控制台是一個對象,如:

Object {
page   : window.location.href,  
item   : "item",
action : "action" }

JSON.stringify()將對象轉換為字符串。

JSON.parse()將 JSON 字符串轉換為對象。

這里真正的混淆不是關於 parse 與 stringify,而是關於成功回調的data參數的數據類型。

根據文檔, data可以是原始響應,即字符串,也可以是 JavaScript 對象:

成功

類型:Function(anything data, String textStatus, jqXHR jqXHR) 請求成功時調用的函數。 該函數傳遞三個參數: 從服務器返回的數據,根據 dataType 參數或 dataFilter 回調函數(如果指定)進行格式化;<..>

並且 dataType 默認設置為“智能猜測”

數據類型(默認:智能猜測(xml、json、腳本或 html))

類型:字符串 您期望從服務器返回的數據類型。 如果沒有指定,jQuery 將嘗試根據響應的 MIME 類型推斷它(XML MIME 類型將產生 XML,在 1.4 中 JSON 將產生一個 JavaScript 對象,在 1.4 中腳本將執行腳本,其他任何東西都會作為字符串返回)。

它們是完全相反的。

JSON.parse()用於解析作為JSON接收的數據; 它將JSON 字符串反序列化為JavaScript 對象

另一方面, JSON.stringify()用於從對象數組中創建JSON 字符串 它將JavaScript 對象序列化為JSON 字符串

我不知道它是否被提及,但 JSON.parse(JSON.stringify(myObject)) 的用途之一是創建原始對象的克隆。

當您想在不影響原始對象的情況下處理一些數據時,這很方便。 可能不是最干凈/最快的方法,但對於不是非常復雜的對象來說肯定是最簡單的。

JavaScript 對象 <-> JSON 字符串


JSON.stringify() <-> JSON.parse()

JSON.stringify(obj) - 接受任何可序列化的對象並將 JSON 表示形式作為字符串返回。

JSON.stringify() -> Object To String.

JSON.parse(string) - 采用格式良好的 JSON 字符串並返回相應的 JavaScript 對象。

JSON.parse() -> String To Object.

解釋: JSON.stringify(obj [, replacer [, space]]);

Replacer/Space - 可選或采用整數值,或者您可以調用整數類型返回函數。

function replacer(key, value) {
    if (typeof value === 'number' && !isFinite(value)) {
        return String(value);
    }
    return value;
}
  • Replacer Just 用於將非有限 no 替換為 null。
  • 按空格縮進 Json 字符串的空間使用

他們互相反對。 JSON.Stringify()將 JSON 轉換為字符串,而JSON.Parse()將字符串解析為 JSON。

JSON.stringify(obj [, replacer [, space]]) - 接受任何可序列化對象並將 JSON 表示作為字符串返回。

JSON.parse(string) - 采用格式良好的 JSON 字符串並返回相應的 JavaScript 對象。

JSON :主要用於與服務器交換數據。 在將 JSON 對象發送到服務器之前,它必須是一個字符串。

JSON.stringify() //Converts the JSON object into the string representation.
var jsonData={"Name":"ABC","Dept":"Software"};// It is a JSON object
var jsonString=JSON.stringify(jsonData);// It is a string representation of the object
// jsonString === '{"Name":"ABC","Dept":"Software"}'; is true

它還將Javascript數組轉換為字符串

var arrayObject=["ABC","Software"];// It is array object
var arrString=JSON.stringify(array);// It is string representation of the array (object)
// arrString === '["ABC","Software"]'; is true 

當我們從服務器接收到 JSON 數據時,數據將是字符串格式。因此我們將字符串轉換為 JSON 對象。

JSON.parse() //To convert the string into JSON object.
var data='{ "name":"ABC", "Dept":"Software"}'// it is a string (even though it looks like an object)
var JsonData= JSON.parse(data);// It is a JSON Object representation of the string.
// JsonData === { "name":"ABC", "Dept":"Software"}; is true

JSON.parse()用於將 String 轉換為 Object。
JSON.stringify()用於將 Object 轉換為 String。

你也可以參考這個...

<script type="text/javascript">

function ajax_get_json(){

    var hr = new XMLHttpRequest();
    hr.open("GET", "JSON/mylist.json", true);
    hr.setRequestHeader("Content-type", "application/json",true);
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
           /*  var return_data = hr.responseText; */

           var data=JSON.parse(hr.responseText);
           var status=document.getElementById("status");
           status.innerHTML = "";
           /* status.innerHTML=data.u1.country;  */
           for(var obj in data)
               {
               status.innerHTML+=data[obj].uname+" is in "+data[obj].country+"<br/>";
               }

        }
    }
    hr.send(null);
    status.innerHTML = "requesting...";
}
</script>

JSON.parse()接受 JSON 字符串並將其轉換為 JavaScript 對象。

JSON.stringify()接受一個 JavaScript 對象並將其轉換為 JSON 字符串。

const myObj = {
      name: 'bipon',
      age: 25,
      favoriteFood: 'fish curry'
};

 const myObjStr = JSON.stringify(myObj);

console.log(myObjStr);
// "{"name":"bipon","age":26,"favoriteFood":"fish curry"}"

console.log(JSON.parse(myObjStr));
 // Object {name:"bipon",age:26,favoriteFood:"fish curry"}
雖然這些方法通常用於對象,但它們也可以用於數組:
 const myArr = ['simon', 'gomez', 'john']; const myArrStr = JSON.stringify(myArr); console.log(myArrStr); // "["simon","gomez","john"]" console.log(JSON.parse(myArrStr)); // ["simon","gomez","john"]

JSON.stringify() 接受一個 JavaScript 對象,然后將其轉換為 JSON 字符串。 JSON.parse() 接受 JSON 字符串,然后將其轉換為 JavaScript 對象。

const myObject = { 狗:“🐕”,貓:“🐈”,考拉:“🐨”,計數:3 };

console.log(JSON.stringify(myObject)); // 結果: {"dog":"🐕","cat":"🐈","koala":"🐨","count":3}

console.log(JSON.parse(JSON.stringify(myObject))); // 結果:對象 {dog: "🐕", cat: "🐈", koala: "🐨", count: 3}

解析一個字符串(以 JSON 格式編寫)並返回一個 JavaScript 對象

var obj = JSON.parse('{"firstName":"John", "lastName":"Doe"}');

字符串化一個 JavaScript 對象:

var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);

當客戶端(例如瀏覽器向其發送數據或從中獲取數據)時,它需要發送一個字符串。 您不能將數據作為 JavaScript 對象發送。

當 JavaSript 數據作為字符串到達​​客戶端時,我們需要將字符串轉換回對象,以便我們可以在客戶端以方便的方式進行處理。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM