首頁 > web前端 > js教程 > 主體

JSON.stringify()用法介紹

巴扎黑
發布: 2017-08-18 10:55:29
原創
2402 人瀏覽過

老司機們,你知道JSON.stringify還有第二個和第三個可選參數嗎?它們是什麼呢?是不是感到不可思議?下面這篇文章就來給大家介紹了一些你可能不知道的JSON.stringify的相關資料,文中透過範例程式碼介紹的非常詳細,需要的朋友可以參考下。

前言

JSON已經逐漸取代XML被全世界的開發者廣泛使用。本文深入講解JavaScript中使用JSON.stringify的一些細節問題。首先簡單回顧一下JSON和JavaScript:

  • 不是所有的合法的JSON都是有效的JavaScript;

  • JSON只是一個文字格式;

  • JSON中的數字是十進位。

1. JSON.stringify


let foo = { a: 2, b: function() {} };
JSON.stringify(foo);
// "{ "a": 2 }"
登入後複製

JSON.stringify函數將一個JavaScript物件轉換成文本化的JSON。不能被文本化的屬性會被忽略。 foo中屬性b的值是函數定義,沒有被轉換而遺失。

還有哪些屬性也不能轉換?

1. 循環引用

如果一個物件的屬性值透過某種間接的方式指回該物件本身,那麼就是一個循環引用。例如:


var bar = {
 a: {
  c: foo
 }
};
var foo = {
 b: bar
};
登入後複製

屬性c指向自己,如果層層解析,將會進入一個無限迴圈。我們嘗試將其印出來看看:


let fooStringified = JSON.stringify(foo);
console.log(fooStringified); // {"b":{"a":{}}}
登入後複製

c的屬性指向foo對象,foo對像中的b屬性又指向bar對象而無法處理,整個被忽略而傳回空對象。

如下定義(原文中的例子)是無法透過編譯的:


let foo = {b : foo};
登入後複製

錯誤訊息:


ReferenceError: foo is not defined
 at repl:1:14
登入後複製

在函數式語言Haskell中,因為有Lazy Evaluation技術,可以使用類似的定義方法。

2. Symbol和undefined


#
let foo = { b: undefined };
JSON.stringify(foo);
// {}
// Symbols
foo.b = Symbol();
JSON.stringify(foo);
// {}
登入後複製

例外

在陣列中,不可被stringify的元素用null填滿。


let foo = [Symbol(), undefined, function() {}, 'works']
JSON.stringify(foo);
// "[null,null,null,'works']"
登入後複製

這樣可以保持陣列本身的“形狀”,也就是每個元素原本的索引。

為什麼有些屬性無法被stringify呢?

因為JSON是一個通用的文字格式,和語言無關。設想如果將函數定義也stringify的話,如何判斷是哪種語言,並且透過合適的方式將其呈現出來將會變得特別複雜。特別是和語言相關的一些特性,例如JavaScript中的Symbol。

ECMASCript 官方也特意強調了這一點:

It does not attempt to impose ECMAScript's internal data representations on other programming languages. Instead, it shares a small subset of ECMAScript's textual . Instead, it sharesent a small subset of ECMAScript's textual repsations programming languages.

2. 重寫物件toJSON函數

一個繞過物件某些屬性無法stringify的方法就是實作物件的toJSON方法來自訂被stringify的物件。因為幾乎每一個AJAX呼叫都會使用JSON.stringify,掌握該技巧將會對處理伺服器互動有很大幫助。

和toString允許你將物件中的元素以字串(string)的形式傳回類似,toJSON提供了一種可以將物件中不能stringify的屬性轉換的方法,使得接下來呼叫的JSON. stringify可以將其轉換成JSON格式。


function Person (first, last) {
 this.firstName = first;
 this.last = last;
}
 
Person.prototype.process = function () {
 return this.firstName + ' ' +
   this.lastName;
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"firstName":"Ade","last":"P"}"
登入後複製

Person實例ade的process函數沒有被stringify。假想如果伺服器只想要ade的全名,而不是分別取得姓和名,我們可以直接定義toJSON來達到目的:


Person.prototype.toJSON = function () {
 return { fullName: this.process(); };
};
 
let ade = new Person('Ade', 'P');
JSON.stringify(ade);
// "{"fullName":"Ade P"}"
登入後複製

定義toJSON的優點是複用性和穩定性,你可以將ade配合任何函式庫使用,傳輸的資料都會是你透過toJSON定義而傳回的fullName。


// jQuery
$.post('endpoint', ade);
 
// Angular 2
this.httpService.post('endpoint', ade)
登入後複製

3. 可選參數

JSON.stringify完整的定義如下:


JSON.stringify(value, replacer?, space?)
登入後複製

replacer和space都是可選參數,接下來我們來分別講解。

Replacer

replacer是一個篩選函數或則一個陣列包含要被stringify的屬性名稱。如果沒有定義,預設所有屬性都被stringify。

1. 陣列

只有在陣列中的屬性被stringify:


let foo = {
 a : 1,
 b : "string",
 c : false
};
JSON.stringify(foo, ['a', 'b']);
//"{"a":1,"b":"string"}"
登入後複製

巢狀屬性也同樣會被過濾:


let bar = {
 a : 1,
 b : { c : 2 }
};
JSON.stringify(bar, ['a', 'b']);
//"{"a":1,"b":{}}"
 
JSON.stringify(bar, ['a', 'b', 'c']);
//"{"a":1,"b":{"c":2}}"
登入後複製

定義過濾數組有時候並不能滿足需求,那麼可以自訂過濾函數。

2. 函數

過濾函數以物件中的每一個屬性和值作為輸入,傳回值有以下幾種情況:

  • #傳回undefined表示忽略該屬性;

  • 傳回字串,布林值或則數字將會被stringify;

  • 傳回物件將會觸發遞歸呼叫知道遇到基本類型的屬性;

  • 返回无法stringify的值将会被忽略;


let baz = {
 a : 1,
 b : { c : 2 }
};
 
// 返回大于1的值
let replacer = function (key, value) {
 if(typeof === 'number') {
  return value > 1 ? value: undefined;
 }
 return value;
};
 
JSON.stringify(baz, replacer);
// "{"b":{"c":2}}"
登入後複製

通过改写上面的函数加入适当的输出,可以看到具体的执行步骤:


let obj = {
 a : 1,
 b : { c : 2 }
};
 
let tracer = function (key, value){
 console.log('Key: ', key);
 console.log('Value: ', value);
 return value;
};
 
JSON.stringify(obj, tracer);
// Key:
// Value: Object {a: 1, b: Object}
// Key: a
// Value: 1
// Key: b
// Value: Object {c: 2}
// Key: c
// Value: 2
登入後複製

space

你是否意识到调用默认的JSON.stringify返回的值只要一行,而且完全没有空格?如果想要更加美观的打印出来,那么就需要使用space这个参数了。

我告诉你一个非常简单的方法:通过tab(‘\t')来分割即可。


let space = {
 a : 1,
 b : { c : 2 }
};
 
// 使用制表符
JSON.stringify(space, undefined, '\t');
// "{
// "a": 1,
// "b": {
// "c": 2
// }
// }"
 
JSON.stringify(space, undefined, '');
// {"a":1,"b":{"c":2}}
 
// 自定义分隔符
JSON.stringify(space, undefined, 'a');
// "{
// a"a": 1,
// a"b": {
// aa"c": 2
// a}
// }"
登入後複製

一道三颗星的思考题:为什么打印结果的倒数第三行有两个a呢?

结论

本文介绍了一些使用toJSON的技巧:

  • 无法stringify的几种类型

  • 使用toJSON来自定义JSON.stringify的属性

  • 可选参数replacer的两种定义方法来过滤属性

  • 可选参数space用来格式化输出结果

  • 数组和对象中如果包含无法stringify的元素的时候的区别

以上是JSON.stringify()用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板