1. 程式人生 > >JSON.stringify() 詳解

JSON.stringify() 詳解

該函式的作用是:系列化物件 系列化物件說白了就是把物件的型別轉換為字串型別

語法

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

  • value  將要序列化成 一個JSON 字串的值。
  • replacer 可選  可以為陣列函式 
    1. 如果為陣列:則只有包含在這個陣列中的屬性名才會被序列化到最終的 JSON 字串中,replacer作key值(這個在講例項的時候就知道這個key是幹嘛的了,先記住就好)
    2. 如果為函式:則把系列化後的每一個物件(記住是每一個)傳進方法裡面進行處理
  • space 可選  指定縮排用的空白字串 
    1. 如果省略的話,那麼顯示出來的值就沒有分隔符。直接輸出來
    2. 如果是一個數字的話,那麼它就定義縮排幾個字元,範圍是:0到10(數字小於1,則預設為0,大於10,則預設為10)
    3. 如果是一些轉義字元,比如“\t”,表示回車,那麼它每行一個回車。
    4. 如果僅僅是字串,就在每行輸出值的時候把這些字串附加上去就OK。當然,最大長度也是10個字元

例項說明

注意:以下的輸出結果都是string型別的,為了容易看就沒有用單引號‘’表明是字串型別

只有一個引數

引數為物件

var students = new Array();
students[0] = "pika";
students[1] = "hello";
students[2] = "hey";
var json = JSON.stringify(students);
alert(json);
輸出結果:["pika","hello","hey"]

如果不用JSON.stringify()函式,直接alert(students),那麼

輸出結果:pika,hello,hey

從這裡到對比可以比較直觀的看出JSON.stringify()函式的作用啦

看一下其他例子:

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({x: 5, y: 6});              
//輸出結果:{"x":5,"y":6}

JSON.stringify([new Number(1), new String("false"), new Boolean(false)]); 
//輸出結果:[1,"false",false]               

從這些例子中可以看出:布林值、數字、字串的包裝物件在序列化過程中會自動轉換成對應的原始值

再看一下其他例子:

JSON.stringify({x: undefined, y: Object, z: Symbol("")}); 
// 輸出結果:{}

JSON.stringify([undefined, Object, Symbol("")]);          
// 輸出結果:[null,null,null]'

JSON.stringify({[Symbol("foo")]: "foo"});                 
// 輸出結果:{}

JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// 輸出結果:{}

JSON.stringify(
    {[Symbol.for("foo")]: "foo"}, 
    function (k, v) {
        if (typeof k === "symbol"){
            return "a symbol";
        }
    }
);
//輸出結果:undefined 

從這些例子中可以看出:undefined、任意的函式以及 symbol 值,在序列化過程中會被忽略(出現在非陣列物件的屬性值中時)或者被轉換成 null(出現在陣列中時)

再看最後一個例子

JSON.stringify( 
    Object.create(
        null, 
        { 
            x: { value: 'x', enumerable: false }, 
            y: { value: 'y', enumerable: true } 
        }
    )
);

從例子中可以看出:不可列舉的屬性會被忽略

有兩個引數,第二個引數為函式

函式例子:

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

可以看出有一個key值,一個value值,還記得一開始說的第二個引數作key值嗎?

例項:

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);
//輸出結果:{"week":45,"month":7}

就是把第一個值傳去函式進行相關的處理

有兩個引數,第二個引數為陣列

第一個引數為陣列

var students = new Array();
students[0] = "pika";
students[1] = "hello";
students[2] = "hey";
var stu= new Array();
stu[0] = "how";
stu[1] = "are";
stu[2] = "u";
var json = JSON.stringify(students,stu);
alert(json);
//輸出結果:["pika","hello","hey"]

結果是隻有第一個值序列化了,第二個被忽略了

第一個引數為物件

var students = new Object();
students.name = "pika";
students.age = 19;
students.qq = "12345678";
var stu= new Array();
stu[0] = "name";
stu[1] = "qq";
var json = JSON.stringify(students,stu);
alert(json);
//輸出結果:{"name":"pika","qq":"12345678"}

陣列的值代表將被序列化成JSON字串的屬性名  stu陣列沒有“age”,所以students物件的“age”屬性沒有顯示

有三個引數

前面說到第三個引數就是用來縮排或者直接新增字串在序列化物件的前面,所以直接看例子就行啦,注意最多隻能10個縮排或字元

JSON.stringify({ a: 2 }, null, " ");   
// 輸出結果:{\n "a": 2\n}

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
/* 輸出結果:
{
    "uno": 1,
    "dos": 2
}
*/

var students = new Object();
students.name = "pika";
students.age = 19;
students.qq = "12345678";
var stu= new Array();
stu[0] = "name";
stu[1] = "qq";
var json = JSON.stringify(students,stu,"test")
alert(json);
/* 輸出結果:
{
test"name": "pika",
test"qq": "12345678"
}
*/

如果我們還想要精確控制如何序列化小明,可以給物件定義一個toJSON()的方法,直接返回JSON應該序列化的資料:

var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只輸出name和age,並且改變了key:
            'Name': this.name,
            'Age': this.age
        };
    }
};

JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

總結

最後來總結一下,JSON.stringify()函式是用來序列化物件的,無論輸入什麼,輸出的都是字串型別,可以按自己的需求來定製如何序列化,輸出結果是怎樣的格式