JSON程序的stringify()

SON 通常用于與服務端交換數據。

在向服務器發送數據時一般是字符串。

我們可以使用 JSON.stringify() 方法將 JavaScript 對象轉換為字符串。

語法

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

參數說明：

value:
必需，一個有效的 JSON 字符串。
replacer:
可選。用于轉換結果的函數或數組。
如果 replacer 為函數，則 JSON.stringify 將調用該函數，并傳入每個成員的鍵和值。使用返回值而不是原始值。如果此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。
如果 replacer 是一個數組，則僅轉換該數組中具有鍵值的成員。成員的轉換順序與鍵在數組中的順序一樣。當 value 參數也為數組時，將忽略 replacer 數組。
space:
可選，文本添加縮進、空格和換行符，如果 space 是一個數字，則返回值文本在每個級別縮進指定數目的空格，如果 space 大于 10，則文本縮進 10 個空格。space 有可以使用非數字，如：\t。

JavaScript 對象轉換

例如我們向服務器發送以下數據：

varobj={"name":"runoob", "alexa":10000, "site":"www.runoob.com"};

我們使用 JSON.stringify() 方法處理以上數據，將其轉換為字符串：

varmyJSON=JSON.stringify(obj);

myJSON 為字符串。

我們可以將 myJSON 發送到服務器：

實例

varobj={"name":"runoob", "alexa":10000, "site":"www.runoob.com"};varmyJSON=JSON.stringify(obj);document.getElementById("demo").innerHTML=myJSON;

JavaScript 數組轉換

我們也可以將 JavaScript 數組轉換為 JSON 字符串：

實例

vararr=["Google", "Runoob", "Taobao", "Facebook"];varmyJSON=JSON.stringify(arr);

myJSON 為字符串。

我們可以將 myJSON 發送到服務器：

實例

vararr=["Google", "Runoob", "Taobao", "Facebook"];varmyJSON=JSON.stringify(arr);document.getElementById("demo").innerHTML=myJSON;

嘗試一下 ?

異常

解析數據

JSON 不能存儲 Date 對象。

JSON.stringify() 會將所有日期轉換為字符串。

實例

varobj={"name":"Runoob", "initDate":newDate(), "site":"www.runoob.com"};varmyJSON=JSON.stringify(obj);document.getElementById("demo").innerHTML=myJSON;

嘗試一下 ?

之后你可以再將字符串轉換為 Date 對象。

解析函數

JSON 不允許包含函數，JSON.stringify() 會刪除 JavaScript 對象的函數，包括 key 和 value。

實例

varobj={"name":"Runoob", "alexa":function(){return10000;}, "site":"www.runoob.com"};varmyJSON=JSON.stringify(obj); document.getElementById("demo").innerHTML=myJSON;

嘗試一下 ?

我們可以在執行 JSON.stringify() 函數前將函數轉換為字符串來避免以上問題的發生：

實例

varobj={"name":"Runoob", "alexa":function(){return10000;}, "site":"www.runoob.com"};obj.alexa=obj.alexa.toString();varmyJSON=JSON.stringify(obj); document.getElementById("demo").innerHTML=myJSON;

嘗試一下 ?

不建議在 JSON 中使用函數。

瀏覽器支持

主流瀏覽器都支持 JSON.stringify() 函數：

Firefox 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4

者：一川來源：前端萬有引力

1寫在前面

前幾天看到前端胖頭魚的一篇文章《就因為JSON.stringify，我的年終獎差點打水漂了》，講的就是JSON.stringify在工程開發中的應用，線上用戶不能提交表單。因為字段中經過JSON.stringify后的字符串對象缺少value key，導致后端parse之后無法正確讀取value值，進而報接口系統異常，用戶無法進行下一步動作。本篇文章就將詳細談談JSON.stringify，并將帶著你進行自己手寫一個JSON.stringify，站在全局考察自己對于各種數據類型理解的深度，和各種極端的邊界情況的處理能力。

2JSON.stringify()

JSON.stringify是日常開發中經常用到的JSON對象中的一個方法，用于將一個 JavaScript 對象或值轉換為 JSON 字符串，如果指定了一個 replacer 函數，則可以選擇性地替換值，或者指定的 replacer 是數組，則可選擇性地僅包含數組指定的屬性。

簡而言之，就是用于將對象轉換成JSON字符串。

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

value：必填參數，需要序列化的JSON對象。
replacer：可選參數。

函數類型：則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理;
數組類型：則只有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中;
null或未提供：則對象所有的屬性都會被序列化。

space：可選參數，用來控制字符串之間的間距。
指定縮進用的空白字符串，用于美化輸出(pretty-print);
數字類型，它代表有多少的空格;上限為10。小于1，意味著沒有空格;
字符串類型，當字符串長度超過10個字母，取其前10個字母，該字符串將被作為空格;
null或未提供，將沒有空格。

注意：

循環引用的對象(對象之間相互引用，形成無限循環)執行此方法，會拋出錯誤。
布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值。
undefined、任意的函數以及symbol值，在序列化過程中會被忽略(出現在非數組對象的屬性值中時)或者被轉換成 null(出現在數組中時)。函數、undefined被單獨轉換時，會返回 undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined)。這就是為什么對象中有這些類型的屬性，不能使用JSON.parse(JSON.stringify())來進行深拷貝。
Date 日期調用了 toJSON() 將其轉換為了 string 字符串(同Date.toISOString())，因此會被當做字符串處理。
NaN 和 Infinity 格式的數值及 null 都會被當做 null。
其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性。

const user={name:"yichuan",age:18,university:"SCU"}; 
//1.序列化對象 
console.log(JSON.stringify(user));//'{"name":"yichuan","age":18,"university":"SCU"}' 
 
//2.序列化基礎數據類型 
console.log(JSON.stringify("平"));//"平" 
console.log(JSON.stringify(18));//"18" 
console.log(JSON.stringify(true));//"true" 
console.log(JSON.stringify(null));//"null" 
console.log(JSON.stringify(undefined));//undefined 
 
//3.使用replacer函數 
console.log(JSON.stringify(user,function(key,value){ 
   return typeof value==="number" ? 666 : "sixsixsix"; 
}));//'{name:"sixsixsix",age:666,university:"sixsixsix"}' 
 
//4.指定數組 
console.log(JSON.stringify(user,["name"]));//'{"name":"yichuan"}' 
 
//5.指定字符串間的間距 
console.log(JSON.stringify(user,null,2)); 
/* 
{ 
  "name": "yichuan", 
  "age": 18, 
  "university": "SCU" 
} 
*/ 
 
//6.指定字符串的間距”*“ 
console.log(JSON.stringify(user,null,"*****")); 
/* 
{ 
*****"name": "yichuan", 
*****"age": 18, 
*****"university": "SCU" 
} 
*/

整理歸納：

JSON.stringify	輸入	輸出
基礎數據類型	string	string
	number	字符串類型的字符串
	boolean	"true"/"false"
	undefined	undefined
	null	"null"
	NaN和Infinity	"null"
	symbol	undefined
	BigInt	報錯
引用數據類型	function	undefined
	Array數組中出現了function、undefined、symbol	string/"null"

| | | regExp | "{}" | | | Date | Date的toJSON()字符串 | | | 普通object |

如果有toJSON()方法，那么序列化toJSON()的返回值
如果屬性值中出現了function、undefined、symbol則忽略
所有以symbol為屬性鍵的屬性都會被完全忽略掉 |

3手撕JSON.stringify()

其實現場手撕代碼還是有點麻煩的，需要考慮到對各種類型的數據進行處理，考慮各種邊界情況。

function stringify(data){ 
 const type=typeof data; 
  //可能為基礎數據類型的處理 
  if(type !=="object"){ 
   //判斷是否為NaN或Infinity或者null 
    if(Number.isNaN(data)||data===Infinity){ 
     return "null"; 
    } 
    //判斷可能為function、undefined、symbol類型 
    if(type==="function" || type==="undefined" || type==="symbol" ){ 
     return undefined 
    } 
    //判斷字符串或數值的處理 
    if(type==="string" || type==="number"){ 
     return `"${data}"` 
    } 
    if (typeof data==='bigint') { 
      throw new TypeError('Do not know how to serialize a BigInt') 
    } 
    if (isCyclic(data)) { 
      throw new TypeError('Converting circular structure to JSON') 
    } 
    return String(data); 
  }else{ 
   //null 
    if(type==="null"){ 
     return "null" 
    }else if(data.toJSON && typeof data.toJSON==="function"){ 
      //遞歸 
     return stringify(data.toJSON); 
    }else if(Array.isArray(data)){ 
     const arr=[]; 
      //對于數組類型有很多種情況 
      data.forEach((item,index)=>{ 
       //判斷可能為function、undefined、symbol類型 
        if(type==="function" || type==="undefined" || type==="symbol" ){ 
          arr[index]="null" 
        }else{ 
          arr[index]=stringify(item); 
        } 
      }); 
      result=`"${arr}"`; 
      return arr.result.replace(/'/g,""); 
    }else{ 
     //普通對象 
      const arr=[]; 
      //遍歷對象 
      Object.keys(data).forEach((key)=>{ 
       //key如果是symbol類型，忽略 
        if(data[key]!=="symbol"){ 
          if(typeof data[key]!=="undefined" && typeof data[key]!=="function" && typeof data[key]!=="symbol"){ 
            arr.push(`"${key}":stringify(data[key])`); 
          } 
        } 
         
      }) 
      return `{${arr}}`.replace(/'/g, '"') 
    } 
  } 
}

4參考文章

《MDN：JSON.stringify()》

《就因為JSON.stringify，我的年終獎差點打水漂了》

5寫在最后

我們平時開發中將JSON.stringify應用最多的可能就是淺層的對象進行深拷貝，也就是進行序列化處理。但是當我們進行手撕代碼的時候，需要考慮各種邊界情況，這對于我們來說就比較麻煩，作為面試也是對數據類型的全面考察。

SON

JSON的key具有唯一性

JSON.stringify()

概念

MDN 文檔對它的解釋如下：

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

翻譯過來大概是：

JSON.stringify() 方法將 JavaScript 對象或值轉換為 JSON 字符串，如果指定了替換函數，則可選地替換值，或者如果指定了替換器數組，則可選地僅包括指定的屬性。

基礎語法

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

// 句法
JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

第一個參數 value (必需的)

要轉換為 JSON 字符串的值。

特性一

value 可以是一個Object、Array、null、Number、String、Boolean，并將值轉換為 JSON 字符串。

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

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




JSON.stringify({});                    // '{}'
JSON.stringify(true);                  // 'true'
JSON.stringify('foo');                 // '"foo"'
JSON.stringify([1, 'false', false]);   // '[1,"false",false]'
JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
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}'
JSON.stringify([new Number(3), new String('false'), new Boolean(false)]);
// '[3,"false",false]'

// String-keyed array elements are not enumerable and make no sense in JSON
let a=['foo', 'bar'];
a['baz']='quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
JSON.stringify(a);
// '["foo","bar"]'

JSON.stringify({ x: [10, undefined, function() {}, Symbol('')] });
// '{"x":[10,null,null,null]}'

// Standard data structures
JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
// '[{},{},{},{}]'

// TypedArray
JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
// '[{"0":1},{"0":1},{"0":1}]'
JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
// '[{"0":1},{"0":1}]'

// toJSON()
JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
// '11'

// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
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

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

// BigInt values throw
JSON.stringify({x: 2n});
// TypeError: BigInt value can't be serialized in JSON




JSON.stringify({"name":"kevin"});  // '{"name":"kevin"}'

JSON.stringify('{"name":"kevin"}'); // '"{\\"name\\":\\"kevin\\"}"'

JSON.stringify([{"name":"kevin"}]);  // '[{"name":"kevin"}]'

JSON.stringify('[{"name":"kevin"}]'); // '"[{\\"name\\":\\"kevin\\"}]"'

JSON.stringify('kevin'); // '"kevin"'

JSON.stringify('1');  // '"1"'

JSON.stringify(1); // '1'

JSON.stringify(0); // '0'

JSON.stringify('true'); // '"true"'

JSON.stringify(true); // 'true'

JSON.stringify('null'); // '"null"'

JSON.stringify("null"); // '"null"'

JSON.stringify(null); // 'null'

JSON.stringify(NaN); // 'null'

JSON.stringify(Infinity); // 'null'

JSON.stringify(undefined); // undefined

特性二

undefined 、任意的函數以及 symbol 分別作為對象屬性的值時，JSON.stringify() 將跳過（忽略）對它們進行序列化。

const data={a: 'aa', b: undefined, c: Symbol('dd'), fn: function(){return true;}};
console.log(JSON.stringify(data)); // {"a":"aa"}

undefined 、任意的函數以及 symbol 分別作為數組元素的值時，JSON.stringify() 會將它們序列化為 null。

const data=['aa', undefined, Symbol('dd'), function(){return true;}];
console.log(JSON.stringify(data)); // ["aa",null,null,null]

undefined 、任意的函數以及 symbol 分別作為單獨的值時，JSON.stringify() 會將它們序列化為 undefined。

JSON.stringify(function a (){console.log('a')})
// undefined
JSON.stringify(undefined)
// undefined
JSON.stringify(Symbol('dd'))
// undefined

特性三

因為 JSON.stringify() 序列化是會忽略一些特殊的值，所以非數組對象的屬性不能保證序列化后的字符串還是以特定的順序出現（數組除外）。

const data={a: 'aa', b: undefined, c: Symbol('dd'), fn: function(){return true;}};
console.log(JSON.stringify(data)); // {"a":"aa"}

const data=['aa', undefined, Symbol('dd'), function(){return true;}];
console.log(JSON.stringify(data)); // ["aa",null,null,null]

特性四

如果轉換的值中有 toJSON() 函數，該函數返回什么值，序列化結果就是什么值，并且忽略其它屬性的值。

const data=JSON.stringify({
  say: "hello JSON.stringify",
  toJSON: function() {
    return 'today i learn';
  }
})
console.log(data); // "\"today i learn\""

特性五

NaN、null、以及 Infinity 都會被當做 null。

console.log(JSON.stringify(null));       // 'null'
console.log(JSON.stringify(NaN));        // 'null'
console.log(JSON.stringify(Infinity));   // 'null'

console.log(JSON.stringify([null]));     // '[null]'
console.log(JSON.stringify([NaN]));      // '[null]'
console.log(JSON.stringify([Infinity])); // '[null]'

console.log(JSON.stringify({
  name: null,
  age: Infinity,
  walk: NaN
}));
// {"name":null,"age":null,"walk":null}

特性六

布爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值。

const data=JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
console.log(data); // '[1,"false",false]'

特性七

其他類型的對象，包括 Map/Set/WeakMap/WeakSet，僅會序列化可枚舉的屬性。

// 不可枚舉的屬性默認會被忽略：
const data=JSON.stringify(
  Object.create(
    null,
    {
      x: { value: 'json', enumerable: false },
      y: { value: 'stringify', enumerable: true }
    }
  )
);
console.log(data); // "{"y":"stringify"}"

特性八

JSON.parse(JSON.stringify()) 可實現簡單的深拷貝。

const a={name: 'kevin', age: 20};
const b=a;
console.log(a===b); // true

const a={name: 'kevin', age: 20};
const b=JSON.parse(JSON.stringify(a));
console.log(a===b); // false
console.log(a==b);  // false

特性九

所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含了它們。

const data=JSON.stringify({ [Symbol.for("json")]: "stringify" }, function(k, v) {
  if (typeof k==="symbol") {
    return v;
  }
})
console.log(data); // undefined

特性十

JSON.stringify() 將會正常序列化 Date 的值。

JSON.stringify({ now: new Date() });
// '{"now":"2022-03-16T14:54:26.459Z"}'

特性十一

JSON.stringify() 會因為循環引用問題而報錯，比如使用 JSON.parse(JSON.stringify()) 進行深拷貝時。

// 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤。
const obj={
  name: "loopObj"
};
const loopObj={
  obj
};
// 對象之間形成循環引用，形成閉環
obj.loopObj=loopObj;
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
deepClone(obj)
/*
VM782:9 Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'loopObj' -> object with constructor 'Object'
    --- property 'obj' closes the circle
    at JSON.stringify (<anonymous>)
    at deepClone (<anonymous>:9:15)
    at <anonymous>:11:1
*/


const circularReference={};
circularReference.myself=circularReference;
// Serializing circular references throws "TypeError: cyclic object value"
JSON.stringify(circularReference);
/*
Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    --- property 'myself' closes the circle
    at JSON.stringify (<anonymous>)
    at <anonymous>:3:6
*/

特性十二

JSON.stringify 序列化 BigInt 時會報錯。

console.log(JSON.stringify(BigInt(1234567890123456)))
// TypeError: Do not know how to serialize a BigInt

第二個參數 replacer (可選的)

一個改變字符串化過程行為的函數，或者一個字符串數組或數字命名屬性的值，應該包含在輸出中。如果 replacer 為 null 或未提供，則對象的所有屬性都包含在生成的 JSON 字符串中。

特性一

replacer 作為函數時，我們可以打破第一參數的很多特性的限制。

const data={
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function() {
    return true;
  }
};
// 不用 replacer 參數時
JSON.stringify(data);
/*
  輸出：
  "{"a":"aaa"}"
*/

// 使用 replacer 參數作為函數時
JSON.stringify(data, (key, value)=> {
  switch (true) {
    case typeof value==="undefined":
      return "undefined";
    case typeof value==="symbol":
      return value.toString();
    case typeof value==="function":
      return value.toString();
    default:
      break;
  }
  return value;
});
/*
  輸出：
  "{"a":"aaa","b":"undefined","c":"Symbol(dd)","fn":"function() {\n    return true;\n  }"}"
*/

特性二

replacer 作為數組時，數組里的值如果是對象有的屬性名，就會被序列化成 JSON 字符串的屬性名。否則會被序列化成空的 JSON 字符串。

const jsonObj={
  name: "Kevin",
  params: "obj,replacer,space"
};
// 只保留 params 屬性的值
JSON.stringify(jsonObj, ["params"]);
// "{"params":"obj,replacer,space"}"

// 序列化成空的 JSON 字符串
JSON.stringify(jsonObj, ["stringify"]);
// "{}"

特性三

replacer 為 null 或未提供或非特性一和非特性二時，則對象的所有屬性都包含在生成的 JSON 字符串中。

const jsonObj={
  name: "Kevin",
  params: "obj,replacer,space"
};
// 只保留 params 屬性的值
JSON.stringify(jsonObj, undefined);
// "{"name":"Kevin","params":"obj,replacer,space"}"

第三個參數 space (可選的)

一個字符串或數字對象，用于在輸出 JSON 字符串中插入空格（包括縮進、換行符等）以提高可讀性。如果未提供此參數（或為空），則不使用空格。

特性一

如果這是一個數字，它表示用于縮進的空格字符的數量；此數字上限為 10（如果更大，則該值僅為 10）。小于 1 的值表示不應使用空格。

const data={
  name: "Kevin",
  describe: "今天在學 JSON.stringify()"
};
JSON.stringify(data, null, 10)
/* 這里為易看，使用-代替空格演示
"{
----------"name": "Kevin",
----------"describe": "今天在學 JSON.stringify()"
}"
*/

特性二

如果這是一個字符串，則該字符串（或字符串的前 10 個字符，如果它比那個長）用作空格。

const data={
  name: "Kevin",
  describe: "今天在學 JSON.stringify()"
};
JSON.stringify(data, null, "");
/*
{
"name": "Kevin",
"describe": "今天在學 JSON.stringify()"
}
*/

特性三

我們用 \t、 \n 等縮進能讓輸出更加格式化，更適于觀看。

const data={
  name: "Kevin",
  describe: "今天在學 JSON.stringify()"
};
JSON.stringify(data, null, "\t\t");
/*
"{
		"name": "Kevin",
		"describe": "今天在學 JSON.stringify()"
}"
*/

JSON.stringify(data, null, "\n\n");
/*
"{


"name": "Kevin",


"describe": "今天在學 JSON.stringify()"
}"
*/

返回值

表示給定值或未定義的 JSON 字符串。

在線咨詢

上一篇：小程序嵌入HTML5后，電商還能怎么玩？
下一篇：Angular 表單與驗證：處理用戶輸入與數據校驗

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JSON程序的stringify()

1寫在前面

2JSON.stringify()

3手撕JSON.stringify()

4參考文章

5寫在最后

SON

JSON.stringify()

概念

基礎語法

第一個參數 value (必需的)

特性一

特性二

特性三

特性四

特性五

特性六

特性七

特性八

特性九

特性十

特性十一

特性十二

第二個參數 replacer (可選的)

特性一

特性二

特性三

第三個參數 space (可選的)

特性一

特性二

特性三

返回值

您的項目需求