javascript解析json字符串

or...in語句解析

<script>
var json={a: 12, b: 5};
for(var i in json)
{
alert(i+'='+json[i]);
}
</script>

eval() 函數可計算某個字符串, 并執行其中的的 JavaScript 代碼。

服務器端腳本代碼：

<?php
$row=array('username'=>'lisi','password'=>'222222');
echo json_encode($row);
/*$data=array(
array('name'=>'zhangsan','age'=>18),
array('name'=>'lisi','age'=>30)
);
echo json_encode($data);
*/
?>

var json=eval('('+value+')'); 主要是針對關聯數組

返回："{name:'zhangsan',age:18}"

訪問方式:json.username+json.password

var json=eval(value); 主要是針對索引數組

返回："[{name:'zhangsan',age:18},{name:'lisi',age:20}]"

訪問方式:json[0].name+json[0].age

注意：索引數組的解析也可以采用 var json=eval(value);

<script language="javascript" src="public.js"></script>
<script>
var xhr=createxhr(); //創建ajax對象, 代碼見ajax | ajax封裝GET和POST
xhr.open('post','demo05.php');
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var value=xhr.responseText; //返回的是字符串
//1)
var json=eval('('+value+')'); //返回是json對象
alert(json.username+json.password);
//2)
//var json=eval(value); //返回是json數組對象
//alert(json[1].name+json[1].age);
}
};
xhr.send(null);
</script>

返回："{name:’zhangsan’,age:18}"

解析格式：eval('('+value+')');

返回："[{name:'zhangsan',age:18},{name:'lisi',age:20}]"

解析格式：eval(value);

也可以采用eval('('+value+')');

實例1:

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//ajax去服務器獲得json信息
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//alert(xhr.responseText);//字符串{"north":"wolf","helan":"pig","germany":"dog"}
var info=eval('('+xhr.responseText+')');
//也可寫成：eval("var info="+xhr.responseText);
document.write(info.north);
document.write(info.helan);
document.write(info.germany);
}
}
xhr.open('get','03.php');
xhr.send(null);
}
//javascript把一個字符串變為對象
//var a='{"north":"wolf","helan":"pig","germany":"dog"}';
//eval(參數字符串)
//eval("var obj="+a);//eval('var obj={"north":"wolf","helan":"pig","germany":"dog"}');
//document.write(obj);//訪問對象
</script>
</head>
<body>
<h2>靜態網站，javascript對json的接收處理</h2>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
<?php
//對外提供json信息
header("Cache-Control:no-cache,must-revalidate");
$animal=array('north'=>'wolf','helan'=>'pig','germany'=>'dog');
echo json_encode($animal); //{"north":"wolf","helan":"pig","germany":"dog"}
?>

在javascript解析{"north":"wolf","helan":"pig","germany":"dog"}

采用：var info=eval('('+xhr.responseText+')'); 語法

也可寫成：eval("var info="+xhr.responseText);

實例2：

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//ajax去服務器獲得json信息
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
//alert(xhr.responseText);//數組 ["wolf","pig","dog"]
var info=eval(xhr.responseText);
document.write(info[0]+info[1]+info[2]);
}
}
xhr.open('get','03.php');
xhr.send(null);
}
</script>
</head>
<body>
<h2>靜態網站，javascript對json的接收處理</h2>
<input type="button" value="觸發" onclick="f1()" />
</body>
</html>
<?php
//對外提供json信息
header("Cache-Control:no-cache,must-revalidate");
$animal=array('wolf','pig','dog');
echo json_encode($animal); //["wolf","pig","dog"]
?>

在javascript解析["wolf","pig","dog"]時

采用：var info=eval(xhr.responseText);語法

實例3:

<html>
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function f1(){
//ajax去服務器獲得json信息
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var s="";
//alert(xhr.responseText);//數組對象[{"id":1,"name":"xutao","sex":"\u7537","age":30},...]
var info=eval(xhr.responseText);
for(var i=0;i<info.length;i++){
s +=info[i].id + "--" + info[i].name + "--" + info[i].sex + "--" + info[i].age +"<br />";
}
document.getElementById("user").innerHTML=s;
}
}
xhr.open('get','info.php');
xhr.send(null);
}
</script>
</head>
<body>
<h2>靜態網站，javascript對json的接收處理</h2>
<input type="button" value="觸發" onclick="f1()" />
<div id="user"></div>
</body>
</html>
<?php
$info=array(
array("id"=>1,"name"=>"zhangsan","sex"=>"男","age"=>30),
array("id"=>2,"name"=>"lisi","sex"=>"女","age"=>27),
array("id"=>3,"name"=>"wangwu","sex"=>"男","age"=>6)
);
echo json_encode($info);
/* [{"id":1,"name":"zhangsan","sex":"\u7537","age":30},
{"id":2,"name":"lisi","sex":"\u5973","age":27},
{"id":3,"name":"wuwang","sex":"\u7537","age":6}] */
?>

在javascript解析[{"id":1,"name":"zhangsan","sex":"\u7537","age":30},

{"id":2,"name":"lisi","sex":"\u5973","age":27},

{"id":3,"name":"wuwang","sex":"\u7537","age":6}]時

采用：var info=eval(xhr.responseText);語法

從數據庫讀取出來的二維數組，通過json_encode()編碼后, 在javascript進行解析時也是采用上述語法。

日常開發中，我們經常會使用到 JSON.stringify 這個方法，特別是在需要進行序列化（深拷貝）的時候。它可以把我們的對象轉換成一個 JSON 字符串，這個方法確實非常方便，但它也有一些不常被注意到的缺點。

首先，JSON.stringify 的使用場景非常廣泛，比如說當我們需要把對象保存到本地存儲時，或者需要在前后端之間傳輸數據時，都會用到它。它就像是一個神奇的轉換器，讓我們可以輕松地處理復雜的數據結構。

然而，這個看似完美的方法也有它的局限性。比如說，它無法處理函數、undefined、Symbol 等特殊類型的數據，這些數據在轉換成 JSON 字符串時會被忽略掉。此外，如果對象中存在循環引用，JSON.stringify 也會報錯。

對于初學者來說，這些問題可能不太容易發現，因為大多數時候我們處理的數據都是簡單的對象和數組。但在實際開發中，了解這些細節能夠幫助我們更好地利用 JSON.stringify，同時避免一些潛在的坑。

小心這些坑！

在開發過程中，JSON.stringify 是我們常用的工具，但是它也有一些小坑，特別是處理某些特殊情況時。下面，我們通過幾個例子來了解一下這些局限性。

1. 函數問題

如果對象的屬性是函數，這個屬性在序列化時會丟失。

let person={
    name: '小明',
    greet: function () {
        console.log(`你好，我是${ this.name }`)
    }
}

console.log(JSON.stringify(person)); // {"name":"小明"}

解釋：在上面的例子中，greet 函數在轉換成 JSON 字符串后被丟棄了。

2. undefined 問題

如果對象的屬性值是 undefined，這個屬性在轉換后也會消失。

let data={
    age: undefined
}

console.log(JSON.stringify(data)); // {}

解釋：在這個例子中，age 屬性在轉換后完全消失了。

3. 正則表達式問題

如果對象的屬性是正則表達式，轉換后會變成一個空對象。

let settings={
    name: '配置',
    pattern: /^a/,
    display: function () {
        console.log(`${ this.name }`)
    }
}

console.log(JSON.stringify(settings)); // {"name":"配置","pattern":{}}

解釋：這里的 pattern 正則表達式在轉換后變成了一個空對象 {}。

4. 數組對象的問題

上述問題在數組對象中同樣會出現。

let items=[
    {
        price: undefined
    }
]

console.log(JSON.stringify(items)); // [{}]

解釋：在數組對象中，price 屬性的 undefined 值在轉換后也被丟棄了。

JSON.stringify 的獨特特性

1、特殊值的處理

對象屬性中的特殊值

當 undefined、函數和 Symbol 作為對象屬性值時，JSON.stringify 會忽略它們。

const data={
  a: "文字",
  b: undefined,
  c: Symbol("符號"),
  fn: function() {
    return true;
  }
};

console.log(JSON.stringify(data)); // "{"a":"文字"}"

解釋：在上面的例子中，data 對象的 b、c 和 fn 屬性在序列化后都被忽略了，只剩下屬性 a 被保留。

數組元素中的特殊值

當 undefined、函數和 Symbol 作為數組元素時，JSON.stringify 會將它們序列化為 null。

const array=["文字", undefined, function aa() { return true; }, Symbol('符號')];

console.log(JSON.stringify(array)); // "["文字",null,null,null]"

解釋：在這個例子中，數組中的 undefined、函數和 Symbol 都被轉換成了 null，而不是被忽略。

獨立的特殊值

當 undefined、函數和 Symbol 被獨立序列化時，JSON.stringify 會直接返回 undefined。

console.log(JSON.stringify(function a (){console.log('a')})); // undefined
console.log(JSON.stringify(undefined)); // undefined
console.log(JSON.stringify(Symbol('符號'))); // undefined

解釋：在這些情況下，JSON.stringify 并不會返回 JSON 字符串，而是直接返回 undefined，表示這些值無法被序列化。

2、順序

在使用 JSON.stringify 進行序列化時，除了我們之前提到的特殊值處理外，還有一個需要注意的點就是對象屬性的順序問題。讓我們通過具體的例子來了解這些特性。

非數組對象的屬性順序

對于非數組對象來說，屬性的順序在序列化后的 JSON 字符串中并不一定是按照我們定義的順序出現的，尤其是當一些屬性值被忽略時。

const data={
  a: "文字",
  b: undefined,
  c: Symbol("符號"),
  fn: function() {
    return true;
  },
  d: "更多文字"
};

console.log(JSON.stringify(data)); // "{"a":"文字","d":"更多文字"}"

解釋：在這個例子中，data 對象中的 b、c 和 fn 屬性由于特殊值的原因被忽略了，最終的 JSON 字符串中只剩下 a 和 d 屬性，而且順序并沒有保證。

數組元素的順序

對于數組來說，元素的順序在序列化后是可以保證的，即使數組中包含 undefined、函數和 Symbol 這些特殊值，它們會被轉換成 null，但順序不會改變。

const array=["文字", undefined, function aa() { return true; }, Symbol('符號'), "更多文字"];

console.log(JSON.stringify(array)); // "["文字",null,null,null,"更多文字"]"

解釋：在這個例子中，數組中的 undefined、函數和 Symbol 被轉換成 null，但數組中元素的順序保持不變。

3、利用 toJSON 方法自定義序列化結果

在使用 JSON.stringify 進行對象序列化時，有一個非常有趣且強大的特性——如果被轉換的值中包含 toJSON() 方法，那么序列化的結果將由 toJSON() 方法返回的值決定，而忽略對象的其他屬性。這為我們提供了很大的靈活性，可以自定義序列化結果。讓我們通過具體的例子來了解這個特性。

自定義序列化結果

當一個對象包含 toJSON() 方法時，JSON.stringify 會調用這個方法，并使用其返回值作為最終的序列化結果。

const data={
  say: "你好，JSON.stringify",
  toJSON: function() {
    return "今天我學到了";
  }
};

console.log(JSON.stringify(data)); // "今天我學到了"

解釋：在這個例子中，雖然 data 對象包含了 say 屬性，但因為它定義了 toJSON() 方法，序列化時會調用這個方法，并使用它的返回值 "今天我學到了" 作為最終結果。

實際應用場景

這個特性可以在多種場景中應用，比如在對象序列化時需要隱藏某些敏感信息，或者只返回對象中的關鍵信息。

const user={
  name: "小明",
  password: "123456",
  toJSON: function() {
    return {
      name: this.name
    };
  }
};

console.log(JSON.stringify(user)); // "{"name":"小明"}"

解釋：在這個例子中，user 對象通過 toJSON() 方法自定義了序列化結果，只返回 name 屬性，隱藏了敏感的 password 信息。

4、Date 對象的序列化技巧

在使用 JSON.stringify 時，處理日期對象是一個常見的需求。幸運的是，JSON.stringify 可以很好地處理 Date 對象，因為 Date 對象本身實現了 toJSON() 方法。讓我們通過具體例子來了解這一特性，并探討如何在實際開發中靈活運用。

日期對象的序列化

當我們將 Date 對象傳給 JSON.stringify 時，它會調用 Date 對象的 toJSON() 方法，該方法等同于 Date.toISOString()，返回一個標準的 ISO 字符串格式。

const data={
  now: new Date()
};

console.log(JSON.stringify(data)); // "{"now":"2024-06-16T12:43:13.577Z"}"

解釋：在這個例子中，data 對象中的 now 屬性是一個 Date 對象，序列化后變成了 ISO 8601 格式的字符串，表示日期和時間。

Date 對象的 toJSON() 方法

Date 對象的 toJSON() 方法實際上返回的是 Date.toISOString() 的結果，這使得日期在序列化后以字符串形式表示，并且格式統一，方便數據傳輸和存儲。

const now=new Date();

console.log(now.toJSON()); // "2024-06-16T12:43:13.577Z"
console.log(now.toISOString()); // "2024-06-16T12:43:13.577Z"

解釋：無論是直接調用 toJSON() 還是 toISOString()，得到的結果都是同樣的 ISO 字符串格式。

實際應用場景

在實際開發中，我們經常需要將日期對象轉換為 JSON 字符串，以便在前后端之間傳輸數據或存儲到數據庫中。統一的 ISO 格式不僅簡潔，還可以方便地在不同系統和語言之間解析和使用。

const event={
  name: "會議",
  date: new Date("2024-08-11T10:00:00Z")
};

console.log(JSON.stringify(event)); // "{"name":"會議","date":"2024-08-11T10:00:00.000Z"}"

解釋：在這個例子中，我們創建了一個包含日期的事件對象，序列化后，日期屬性被轉換成 ISO 字符串，方便在網絡上傳輸。

5、的特殊數值處理：NaN、Infinity 和 null 的處理方式

在使用 JSON.stringify 時，處理特殊數值也是一個需要注意的問題。NaN、Infinity 和 null 在序列化時都會被處理為 null。讓我們通過一些具體的例子來詳細了解這一特性。

數值 NaN 和 Infinity 的序列化

當我們將 NaN 或 Infinity 傳給 JSON.stringify 時，它們會被轉換成 null。

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

解釋：在這個例子中，無論是 NaN 還是 Infinity，都被序列化為 "null"，這是因為 JSON 不支持這兩種特殊數值，所以將其轉換為 null 來表示。

null 的序列化

當我們將 null 傳給 JSON.stringify 時，它會被直接轉換為字符串 "null"。

console.log(JSON.stringify(null)); // "null"

解釋：null 是 JSON 支持的一個特殊值，所以它在序列化時會被保留為 "null" 字符串。

對象和數組中的特殊數值

當 NaN、Infinity 和 null 作為對象屬性值或數組元素時，它們會被轉換為 null。

const data={
  num1: NaN,
  num2: Infinity,
  num3: null
};

console.log(JSON.stringify(data)); // "{"num1":null,"num2":null,"num3":null}"

const array=[NaN, Infinity, null];
console.log(JSON.stringify(array)); // "[null,null,null]"

解釋：在這個例子中，data 對象中的 num1 和 num2 屬性值，及數組中的 NaN 和 Infinity 元素，都被轉換為 null。

實際應用場景

理解這些特性有助于我們在實際開發中正確處理數據，特別是在數據傳輸和存儲時，避免因為特殊數值導致的數據不一致問題。

const stats={
  average: NaN,
  max: Infinity,
  min: null,
  values: [1, 2, NaN, 4, Infinity]
};

console.log(JSON.stringify(stats)); 
// "{"average":null,"max":null,"min":null,"values":[1,2,null,4,null]}"

解釋：在這個統計數據對象中，所有的 NaN 和 Infinity 值在序列化后都被轉換為 null，保證了 JSON 數據的一致性。

6、包裝對象處理：自動轉換為原始值

在使用 JSON.stringify 時，有一個很重要的特性是，布爾值、數字和字符串的包裝對象在序列化時會自動轉換為它們對應的原始值。這一特性有助于確保序列化后的 JSON 數據更簡潔和易于使用。讓我們通過具體的例子來深入了解這一特性。

包裝對象的序列化

當我們將 Number、String 和 Boolean 包裝對象傳給 JSON.stringify 時，它們會被自動轉換為對應的原始值。

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

解釋：在這個例子中，new Number(1) 被轉換為 1，new String("false") 被轉換為 "false"，new Boolean(false) 被轉換為 false。這些包裝對象在序列化時都被簡化為原始值，確保 JSON 數據的簡潔性。

7、枚舉屬性與非枚舉屬性

在使用 JSON.stringify 進行對象序列化時，有一個關鍵的特性是：它只會序列化對象的可枚舉屬性（enumerable properties）。這意味著非枚舉屬性會被忽略，從而確保序列化結果的簡潔和預期。讓我們通過具體的例子來詳細了解這一特性。

枚舉屬性與非枚舉屬性的區別

在 JavaScript 中，對象的屬性可以被標記為枚舉屬性或非枚舉屬性。JSON.stringify 只會序列化枚舉屬性，而忽略非枚舉屬性。

const data=Object.create(
    null,
    { 
        x: { value: 'json', enumerable: false }, 
        y: { value: 'stringify', enumerable: true } 
    }
);

console.log(JSON.stringify(data)); // "{"y":"stringify"}"

解釋：在這個例子中，data 對象的 x 屬性被標記為非枚舉屬性，y 屬性被標記為枚舉屬性。JSON.stringify 在序列化時忽略了 x 屬性，只保留了 y 屬性。

處理 Map、Set 等對象

類似地，對于 Map、Set 等對象，JSON.stringify 也只會序列化它們的可枚舉屬性，而這些對象的特殊數據結構本身不會被直接序列化。

const map=new Map();
map.set('a', 1);
map.set('b', 2);

const set=new Set();
set.add(1);
set.add(2);

console.log(JSON.stringify(map)); // "{}"
console.log(JSON.stringify(set)); // "{}"

解釋：在這個例子中，map 和 set 對象的內部數據結構沒有被序列化，而是返回了空對象。這是因為 Map 和 Set 的數據存儲并不是作為對象的屬性存在的。

實際應用場景

了解這個特性對于處理復雜對象結構非常重要，特別是在需要控制序列化結果的情況下。例如，可以通過定義非枚舉屬性來隱藏一些不需要序列化的內部數據。

const user={
    name: '小明',
    age: 25
};

Object.defineProperty(user, 'password', {
    value: '123456',
    enumerable: false
});

console.log(JSON.stringify(user)); // "{"name":"小明","age":25}"

解釋：在這個例子中，我們通過 Object.defineProperty 將 password 屬性標記為非枚舉屬性，從而在序列化時將其隱藏。

8、JSON.parse(JSON.stringify()) 的局限性

我們都知道，使用 JSON.parse(JSON.stringify()) 是實現深克隆的最簡單和直接的方法。然而，由于序列化的各種特性，這種方法在實際應用中會帶來許多問題，尤其是當對象存在循環引用時，會導致錯誤。讓我們通過一個具體的例子來詳細了解這些局限性。

循環引用的問題

當對象存在循環引用時，JSON.stringify() 會拋出錯誤，因為 JSON 不支持循環結構。

const obj={
  name: "loopObj"
};
const loopObj={
  obj
};
// 對象形成循環引用，創建了一個閉環
obj.loopObj=loopObj;

// 封裝一個深克隆函數
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}
// 執行深克隆，會拋出錯誤
deepClone(obj);
/**
VM44: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:26)
    at <anonymous>:11:13
 */

解釋：在這個例子中，obj 和 loopObj 形成了一個循環引用，這導致 JSON.stringify() 在處理時拋出了 TypeError 錯誤。

深克隆的替代方法

為了安全地進行深克隆，特別是處理循環引用，我們需要使用更復雜的方法。以下是兩種常見的替代方案：

1. 使用遞歸和 Map 記錄引用

function deepClone(obj, hash=new WeakMap()) {
  if (obj===null) return null;
  if (typeof obj !=="object") return obj;
  if (hash.has(obj)) return hash.get(obj);

  const cloneObj=Array.isArray(obj) ? [] : {};
  hash.set(obj, cloneObj);

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key]=deepClone(obj[key], hash);
    }
  }

  return cloneObj;
}

const newObj=deepClone(obj);
console.log(newObj);

解釋：這個 deepClone 函數使用 WeakMap 來記錄已經克隆過的對象，避免了循環引用的問題。

2. 使用第三方庫

如果不想手動實現深克隆，可以使用現成的第三方庫，如 lodash 提供的 _.cloneDeep 方法。

const _=require('lodash');

const newObj=_.cloneDeep(obj);
console.log(newObj);

解釋：lodash 的 _.cloneDeep 方法能夠處理大多數復雜情況，包括循環引用。

9、Symbol 屬性的序列化問題

在使用 JSON.stringify 進行對象序列化時，有一個需要特別注意的點：如果對象的屬性使用 Symbol 作為鍵，這些屬性會被完全忽略，即使在 replacer 參數中顯式包含也無效。讓我們通過具體的例子來詳細了解這一特性。

Symbol 屬性的序列化

當對象的屬性使用 Symbol 作為鍵時，JSON.stringify 會忽略這些屬性，不會將它們包含在序列化結果中。

const data={ [Symbol.for("json")]: "stringify" };

console.log(JSON.stringify(data)); // "{}"

解釋：在這個例子中，data 對象的屬性鍵是一個 Symbol，所以在序列化時，這個屬性被完全忽略了。

使用 replacer 參數

即使我們在 JSON.stringify 的 replacer 參數中顯式包含處理 Symbol 屬性的邏輯，這些屬性仍然會被忽略。

const data={ [Symbol.for("json")]: "stringify" };

console.log(JSON.stringify(data, function(k, v) {
    if (typeof k==="symbol") {
      return v;
    }
  })); // "undefined"

解釋：在這個例子中，replacer 函數試圖檢查 Symbol 類型的鍵并返回其值，但 JSON.stringify 仍然忽略了該屬性，結果為undefined。

第二個參數 replacer 的妙用

在使用 JSON.stringify 進行對象序列化時，除了常見的用法，還有一些高級功能可以通過第二個參數 replacer 實現。replacer 可以是一個函數或數組，用于定制序列化的結果。讓我們通過具體的例子來詳細了解這些用法。

1. 使用 replacer 參數作為函數

當 replacer 參數是一個函數時，它會在每個屬性值被序列化之前調用，類似于數組方法中的 map 和 filter。該函數接收兩個參數：鍵和值。

const data={
  a: "aaa",
  b: undefined,
  c: Symbol("dd"),
  fn: function() {
    return true;
  }
};

// 不使用 replacer 參數
console.log(JSON.stringify(data)); 
// "{"a":"aaa"}"

// 使用 replacer 參數作為函數
console.log(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 函數將 undefined、Symbol 和函數轉換為字符串，使得它們能夠被序列化。

2. 第一次調用 replacer 函數的特殊情況

當 replacer 函數被第一次調用時，傳入的第一個參數并不是對象的第一個鍵值對，而是一個空字符串作為鍵，整個對象作為值。

const data={
  a: 2,
  b: 3,
  c: 4,
  d: 5
};

console.log(JSON.stringify(data, (key, value)=> {
  console.log(value);
  return value;
}));
// The first argument passed to the replacer function is 
// {"":{a: 2, b: 3, c: 4, d: 5}}
// 2
// 3
// 4
// 5
// {a: 2, b: 3, c: 4, d: 5}

3. 使用 replacer 函數實現對象的 map 功能

我們可以利用 replacer 函數手動實現類似于數組 map 方法的功能，遍歷對象的每個屬性并對其進行操作。

const data={
  a: 2,
  b: 3,
  c: 4,
  d: 5
};

const objMap=(obj, fn)=> {
  if (typeof fn !=="function") {
    throw new TypeError(`${fn} is not a function !`);
  }
  return JSON.parse(JSON.stringify(obj, fn));
};

console.log(objMap(data, (key, value)=> {
  if (value % 2===0) {
    return value / 2;
  }
  return value;
}));
// {a: 1, b: 3, c: 2, d: 5}

4. 使用 replacer 參數作為數組

當 replacer 參數是一個數組時，數組中的值表示要被序列化到 JSON 字符串中的屬性名。

const jsonObj={
  name: "JSON.stringify",
  params: "obj,replacer,space"
};

// 僅保留 params 屬性的值
console.log(JSON.stringify(jsonObj, ["params"]));
// "{"params":"obj,replacer,space"}"

解釋：在這個例子中，replacer 數組指定只序列化 params 屬性，其他屬性會被忽略。

第三個參數：控制輸出格式的 space 參數

在使用 JSON.stringify 進行對象序列化時，第三個參數 space 用于控制生成的 JSON 字符串中的空格和縮進。這個參數可以顯著提高輸出結果的可讀性。讓我們通過具體的例子來了解 space 參數的作用和用法。

1. space 參數的基本用法

space 參數可以是一個數字或字符串。數字表示每一級嵌套的縮進空格數，字符串則用于每一級嵌套的縮進字符。

const tiedan={
  name: "Jhon",
  describe: "JSON.stringify()",
  emotion: "like"
};

// 使用 "--" 作為縮進字符
console.log(JSON.stringify(tiedan, null, "--"));
/* 輸出結果如下:
{
--"name": "Jhon",
--"describe": "JSON.stringify()",
--"emotion": "like"
}
*/

// 使用 2 個空格作為縮進字符
console.log(JSON.stringify(tiedan, null, 2));
/* 輸出結果如下:
{
  "name": "Jhon",
  "describe": "JSON.stringify()",
  "emotion": "like"
}
*/

解釋：在第一個例子中，space 參數是字符串 "--"，所以每一級嵌套使用兩個連字符作為縮進。在第二個例子中，space 參數是數字 2，所以每一級嵌套使用兩個空格作為縮進。

2. 數字作為 space 參數

當 space 參數是數字時，它表示每一級嵌套的縮進空格數，最大值為 10。

const data={
  level1: {
    level2: {
      level3: "deep"
    }
  }
};

// 使用 4 個空格作為縮進字符
console.log(JSON.stringify(data, null, 4));
/* 輸出結果如下:
{
    "level1": {
        "level2": {
            "level3": "deep"
        }
    }
}
*/

解釋：在這個例子中，space 參數是數字 4，所以每一級嵌套使用四個空格作為縮進。

結束

在這篇文章中，我們深入探討了 JSON.stringify 的多種高級用法，從特殊值處理到如何使用 replacer 參數定制序列化結果，再到使用 space 參數美化輸出。希望通過這些實例，你能更好地掌握和運用 JSON.stringify，讓你的前端開發更加高效和靈活。

SON（JavaScript Object Notation）是從JavaScript派生的一個獨立于語言的文件。JSON文件是純文本文件，而不是二進制代碼。這種文件格式是可讀的，任何文本編輯器都可以打開和編輯JSON文件。

此文件格式沒有大小限制，因此數據大小可能很大很大。但是，如果文件太大，則存儲的數據可能顯示為隨機的。這可能會導致難以理解整體內容。在這種情況下，你可以使用一些程序來查看此類JSON文件，我們在下面列出了這些文件。

JSON文件的文件名附加了一個.JSON擴展名。與XML類似，它是一種數據表示格式。由于以這種格式存儲數據和配置文件很容易，大多數人都使用它。以下是為不同系統打開JSON文件的幾種方法。

使用記事本/Notepad++

你可以使用記事本打開.json文件并進行更改。雖然JSON文件很容易理解，但如果文件太大，內置記事本可能會混淆數據。為了使文件更易于理解或組織，你可以使用Notepad++。以下是如何在Windows上使用記事本打開JSON文件。

1、啟動記事本/Notepad++。

2、單擊左上角的“文件”選項。

3、選擇“打開…”選項。

4、在文件名搜索欄上搜索JSON文件。

5、單擊“打開”按鈕。

在完成這些步驟后，以下是你可以做的事情，使你的JSON文件在Notepad++上看起來更有條理。

1、單擊“插件”選項，然后選擇“插件管理…”選項。

2、搜索JSON并選擇JSON Viewer選項。

3、單擊右上角的“安裝”選項。

4、單擊確認框中的“是”。

5、安裝插件后，再次單擊“插件”選項。

6、選擇JSON查看器選項，然后單擊格式化JSON。

使用Apple TextEdit

Apple Text Edit是macOS附帶的一款軟件。它是一個內置的文字處理器和文本編輯器平臺。使用此軟件，你可以在Mac上輕松打開和編輯JSON文件。以下是如何查看它。

1、在Mac設備上打開TextEdit。

2、單擊“文件”并選擇“打開”選項。

3、導航到JSON文件并單擊它。

使用Vim編輯器

Vim是UNIX的Vi編輯器的著名繼承者。這是一個免費的文件打開軟件，可以讓你查看和更改你的文件。這個程序最初是為Linux制作的。然而，他們最終為不同的系統創建了各種版本的編輯器，包括Windows和Mac。以下是如何使用它打開JSON文件。

1、復制JSON文件的路徑并啟動Vim。

2、輸入“vim ”（后面有個空格）并從剪貼板粘貼路徑。

3、然后按Enter鍵。

使用Web瀏覽器

Mozilla Firefox是查看JSON文件的最佳平臺之一。除了.json擴展之外，Mozilla firefox還支持以下文件：HTML、CSS、MFL和CHM。與大多數程序不同，Firefox以人類可讀的格式打開文件。在執行以下步驟之前，請確保你已經下載了Firefox瀏覽器。

1、轉到文件資源管理器并導航到JSON文件。

2、右鍵單擊它，然后選擇“屬性”選項。

3、單擊“文件類型”下的“更改…”按鈕。

4、搜索Mozilla Firefox并點擊它。如果你在菜單上找不到它，請按底部的“更多應用程序”選項，然后再次搜索。

5、單擊“確定”按鈕。

6、同時單擊“屬性”選項卡上的“確定”。

7、現在，點擊JSON文件將其打開。該文件將顯示在firefox選項卡中。

使用Chrome擴展

你可以在Chrome上輕松打開JSON文件。然而，大數據可能看起來雜亂無章，難以理解。添加擴展名使JSON文件易于閱讀。數據看起來更有組織性和格式。你可以在Windows、Linux以及Macbook上使用此方法。

1、打開Chrome并轉到Chrome Web Store。

2、在搜索欄上搜索JSON Viewer，然后按enter按鈕。

3、打開要添加的擴展。

4、單擊“添加到Chrome”選項。

5、在確認框中選擇“添加擴展名”。

6、將擴展與你的設備同步。

7、現在，打開文件資源管理器并導航到JSON文件。

8、在文件上單擊鼠標右鍵，然后選擇“屬性”選項。

9、在“文件類型”下，單擊“更改…”選項。

10、搜索谷歌瀏覽器并點擊它。

11、單擊“確定”。

12、同時單擊“屬性”選項卡上的“確定”按鈕。

13、返回JSON文件并打開它。你將在一個新的chrome選項卡中查看該文件。

使用聯機工具

有各種在線工具，如JSON Editor online，可以用來在設備上打開JSON文件。這些文件打開工具非常容易使用。要查看你的文件，你所需要的只是正確的互聯網連接。以下是如何打開它。

1、打開web瀏覽器，在線搜索JSON編輯器。

2、單擊右上角的“打開”圖標。

3、選擇從磁盤打開選項。

4、搜索你的JSON文件并單擊它。

5、單擊“打開”選項。

在線咨詢

上一篇：html語言是什么？前端工程師需要明白什么？
下一篇：29《Vue 入門教程》Vuex 中 state 的

您的項目需求

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

整合營銷服務商

javascript解析json字符串

小心這些坑！

JSON.stringify 的獨特特性

結束

使用記事本/Notepad++

使用Apple TextEdit

使用Vim編輯器

使用Web瀏覽器

使用Chrome擴展

使用聯機工具

您的項目需求

小心這些坑！