json.stringify()的妙用，json.stringify()與json.parse()的區別

工作當中經常使用到json.stringify，json.parse，現將這兩個的使用方法進行一個整理：

JSON.parse() 方法用來解析JSON字符串，構造由字符串描述的JavaScript值或對象。提供可選的 reviver 函數用以在返回之前對所得到的對象執行變換(操作)。

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

操作test的網站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

JSON.parse(text[, reviver])

參數說明如下；

text，

要被解析成 JavaScript 值的字符串，關於JSON的語法格式,請參考：JSON。

reviver 可選

轉換器, 如果傳入該參數(函數)，可以用來修改解析生成的原始值，調用時機在 parse 函數返回之前。

使用 reviver 函數

如果指定了 reviver 函數，則解析出的 JavaScript 值（解析值）會經過一次轉換後纔將被最終返回（返回值）。更具體點講就是：解析值本身以及它所包含的所有屬性，會按照一定的順序（從最最裏層的屬性開始，一級級往外，最終到達頂層，也就是解析值本身）分別的去調用 reviver 函數，在調用過程中，當前屬性所屬的對象會作爲 this 值，當前屬性名和屬性值會分別作爲第一個和第二個參數傳入 reviver 中。如果 reviver 返回 undefined，則當前屬性會從所屬對象中刪除，如果返回了其他值，則返回的值會成爲當前屬性新的屬性值。

當遍歷到最頂層的值（解析值）時，傳入 reviver 函數的參數會是空字符串 ""（因爲此時已經沒有真正的屬性）和當前的解析值（有可能已經被修改過了），當前的 this 值會是 {"": 修改過的解析值}，在編寫 reviver 函數時，要注意到這個特例。（這個函數的遍歷順序依照：從最內層開始，按照層級順序，依次向外遍歷）

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最頂層，則直接返回屬性值，
    return v * 2;              // 否則將屬性值變爲原來的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 輸出當前的屬性名，從而得知遍歷順序是從內向外的，
                    // 最後一個屬性名會是個空字符串。
    return v;       // 返回原始屬性值，相當於沒有傳遞 reviver 參數。
});

 JSON.parse() 不允許用逗號作爲結尾

// both will throw a SyntaxError
JSON.parse("[1, 2, 3, 4, ]");
JSON.parse('{"foo" : 1, }');

 與JSON.parse相反：

JSON.stringify() 方法將一個 JavaScript 值（對象或者數組）轉換爲一個 JSON 字符串，如果指定了 replacer 是一個函數，則可以選擇性地替換值，或者如果指定了 replacer 是一個數組，則可選擇性地僅包含數組指定的屬性。

語法：

JSON.stringify(value[, replacer [, space]])

傳遞參數說明如下；

value

將要序列化成 一個 JSON 字符串的值。

replacer 可選

如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理；如果該參數是一個數組，則只有包含在這個數組中的屬性名纔會被序列化到最終的 JSON 字符串中；如果該參數爲 null 或者未提供，則對象所有的屬性都會被序列化；關於該參數更詳細的解釋和示例，請參考使用原生的 JSON 對象一文。

space 可選

指定縮進用的空白字符串，用於美化輸出（pretty-print）；如果參數是個數字，它代表有多少的空格；上限爲10。該值若小於1，則意味着沒有空格；如果該參數爲字符串（當字符串長度超過10個字母，取其前10個字母），該字符串將被作爲空格；如果該參數沒有提供（或者爲 null），將沒有空格。

使用replacer的方法：

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);

 

如果 replacer 是一個數組，數組的值代表將被序列化成 JSON 字符串的屬性名。

JSON.stringify(foo, ['week', 'month']);  
// '{"week":45,"month":7}', 只保留 “week” 和 “month” 屬性值。

 

JSON序列化結果爲 {"week":45,"month":7}.

space 參數用來控制結果字符串裏面的間距。如果是一個數字, 則在字符串化時每一級別會比上一級別縮進多這個數字值的空格（最多10個空格）；如果是一個字符串，則每一級別會比上一級別多縮進該字符串（或該字符串的前10個字符）。

JSON.stringify({ a: 2 }, null, " ");   // '{\n "a": 2\n}'

使用製表符（\t）來縮進：

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
// '{            \
//     "uno": 1, \
//     "dos": 2  \
// }' 

 詳細的說明參考網站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

使用 JSON.stringify 結合 localStorage 的例子

一些時候，你想存儲用戶創建的一個對象，並且，即使在瀏覽器被關閉後仍能恢復該對象。下面的例子是 JSON.stringify 適用於這種情形的一個樣板：

// 創建一個示例數據
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA", "width":450, "height":250});
session.screens.push({"name":"screenB", "width":650, "height":350});
session.screens.push({"name":"screenC", "width":750, "height":120});
session.screens.push({"name":"screenD", "width":250, "height":60});
session.screens.push({"name":"screenE", "width":390, "height":120});
session.screens.push({"name":"screenF", "width":1240, "height":650});

// 使用 JSON.stringify 轉換爲 JSON 字符串
// 然後使用 localStorage 保存在 session 名稱裏
localStorage.setItem('session', JSON.stringify(session));

// 然後是如何轉換通過 JSON.stringify 生成的字符串，該字符串以 JSON 格式保存在 localStorage 裏
var restoredSession = JSON.parse(localStorage.getItem('session'));

// 現在 restoredSession 包含了保存在 localStorage 裏的對象
console.log(restoredSession);

 JSON.stringify()的幾種妙用：

用法一

//判斷數組是否包含某對象
let data = [
    {name:'echo'},
    {name:'聽風是風'},
    {name:'天子笑'},
    ],
    val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

//判斷兩數組/對象是否相等
let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

用法二

localStorage/sessionStorage默認只能存儲字符串，而實際開發中，我們往往需要存儲的數據多爲對象類型，那麼這裏我們就可以在存儲時利用json.stringify()將對象轉爲字符串，而在取緩存時，只需配合json.parse()轉回對象即可。

//存
function setLocalStorage(key,val){
    window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};
//測試
setLocalStorage('demo',[1,2,3]);
let  a = getLocalStorage('demo');//[1,2,3]

對象的深拷貝：

//深拷貝
function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};
//測試
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3]  [1,2,3]

JSON.stringify()與toString()，都可以將數組轉換成字符串

這兩者雖然都可以將目標值轉爲字符串，但本質上還是有區別的，比如

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3

其次，JSON.stringify()的受衆更多是對象，而toString()雖然可以將數組轉爲字符串，但並不能對{name:'天子笑'}這類對象實現你想要的操作，它的受衆更多是數字。