JS JSON對象轉字符串深度剖析

JS JSON對象轉字符串是一個非常基礎且重要的操作，隨着應用場景的不同，涉及到的知識點也會有所不同。本文將從多個角度對JS JSON對象轉字符串進行深度闡述，包括數據類型、API使用方法、轉換過程中的注意事項等。

一、JSON對象介紹

JSON是JavaScript Object Notation的縮寫，是一種輕量級的數據交換格式。

JSON對象是JavaScript的內置對象，可以在代碼中直接使用。JSON對象有兩個方法：JSON.stringify()用於將JS對象轉換成JSON字符串，JSON.parse()用於將JSON字符串轉換成JS對象

//JS對象
let person = {
  name: '張三',
  age: 18,
  isStudent: true,
  hobbies: ['籃球', '游泳']
};

//使用JSON.stringify()方法將JS對象轉換成JSON字符串
let personStr = JSON.stringify(person);
console.log(personStr);
//輸出結果：
//{"name":"張三","age":18,"isStudent":true,"hobbies":["籃球","游泳"]}

//使用JSON.parse()方法將JSON字符串轉換成JS對象
let personObj = JSON.parse(personStr)
console.log(personObj);
//輸出結果：
//{name: "張三", age: 18, isStudent: true, hobbies: Array(2)}

二、JS數據類型轉換

在進行JS JSON對象轉字符串過程時，需要注意JS數據類型的轉換問題。JS中各種數據類型轉換的規則如下：

1、數值型轉字符串型：通過toString()方法即可將數值型轉換成字符串型。

let num = 123;
let str = num.toString();
console.log(typeof str + ' ' + str);
//輸出結果：string 123

2、字符串型轉數值型：通過Number()或者parseFloat()方法將字符串型轉換成數值型。

let str1 = "123";
let str2 = "123.45";
let num1 = Number(str1);
let num2 = parseFloat(str2);
console.log(typeof num1 + ' ' + num1);
console.log(typeof num2 + ' ' + num2);
//輸出結果：number 123
//         number 123.45

3、布爾型轉字符型：通過toString()方法將布爾型轉換成字符串型。

let bool = true;
let str = bool.toString();
console.log(typeof str + ' ' + str);
//輸出結果：string true

4、字符型轉布爾型：通過Boolean()方法將字符串型轉換成布爾型。

let str1 = "true";
let str2 = "false";
let bool1 = Boolean(str1);
let bool2 = Boolean(str2);
console.log(typeof bool1 + ' ' + bool1);
console.log(typeof bool2 + ' ' + bool2);
//輸出結果：boolean true
//         boolean false

5、數組、對象轉字符串型：數組和對象在使用JSON.stringify()方法轉換成字符串型時，會將數組、對象內部的元素全部轉換為字符串，從而影響到原數組、對象的類型，數據處理過程中需要注意這一點。

//數組
let arr = [1, true, "hello"];
let arrStr = JSON.stringify(arr);
console.log(typeof arrStr + ' ' + arrStr);
//輸出結果：string [1,true,"hello"]

//對象
let obj = {a:1, b:true, c:"hello"};
let objStr = JSON.stringify(obj);
console.log(typeof objStr + ' ' + objStr);
//輸出結果：string {"a":1,"b":true,"c":"hello"}

三、JSON.stringify()方法使用

JSON.stringify()方法是將JS對象轉換成JSON字符串的核心方法。

1、語法格式

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

參數說明：

value: 必選參數，要進行轉換的JS對象

replacer：可選參數，用來篩選需要轉換的對象的屬性

space：可選參數，用來對字符串進行格式化操作，可以是空格或字符串（默認是不使用格式化）

2、使用方法

let a = {
  name: '小明',
  age: 18,
  gender: '男',
  hobbies: ['唱歌', '跳舞']
};

let b = JSON.stringify(a);
console.log(b);
//輸出結果：{"name":"小明","age":18,"gender":"男","hobbies":["唱歌","跳舞"]}

3、replacer參數的使用

replacer參數可以通過函數的方式進行使用，函數的返回值即為轉化後的值。

let a = {
  name: '小明',
  age: 18,
  gender: '男',
  hobbies: ['唱歌', '跳舞']
};

let b = JSON.stringify(a, function(key, value) {
  if(key == "gender") {
    return undefined;
  }
  return value;
});

console.log(b);
//輸出結果：{"name":"小明","age":18,"hobbies":["唱歌","跳舞"]}

4、space參數的使用

let a = {
  name: '小明',
  age: 18,
  gender: '男',
  hobbies: ['唱歌', '跳舞']
};

let b = JSON.stringify(a, null, 4);

console.log(b);
//輸出結果：
//{
//    "name": "小明",
//    "age": 18,
//    "gender": "男",
//    "hobbies": [
//        "唱歌",
//        "跳舞"
//    ]
//}

四、JSON.parse()方法使用

JSON.parse()方法是將JSON字符串轉換成JS對象的核心方法。

1、語法格式

JSON.parse(text[, reviver])

參數說明：

text: 必選參數，要進行轉換的JSON字符串類型的數據

reviver：可選參數，用來修復由JSON.stringify()方法造成的數據損壞

2、使用方法

let a = '{"name":"小明","age":18,"gender":"男","hobbies":["唱歌","跳舞"]}';

let b = JSON.parse(a);

console.log(typeof b + ' ' + b.name + ' ' + b.age + ' ' + b.gender + ' ' + b.hobbies);
//輸出結果：object 小明 18 男 唱歌,跳舞

3、reviver參數的使用

reviver參數可以通過函數的方式進行使用，函數的返回值即為轉化後的值。

let a = '{"name":"小明","age":18,"gender":"男","hobbies":["唱歌","跳舞"]}';

let b = JSON.parse(a, function(key, value) {
  if(key == "gender"){
    return undefined;
  }
  return value;
});

console.log(typeof b + ' ' + b.name + ' ' + b.age + ' ' + b.gender + ' ' + b.hobbies);
//輸出結果：object 小明 18 undefined 唱歌,跳舞

五、轉換過程中的注意事項

1、轉換JS對象時，對象的屬性名必須是雙引號引起來的字符串，不能是未使用雙引號引起來的字符串或者數字，並且數組不支持最後一個元素後逗號。

//使用JSON.stringify()方法轉換錯誤的示例
let a = {
  name: "xiaoming",
  age: 18,
  gender: "男"
};

let b = JSON.stringify(a);
console.log(b);
//輸出結果：{"name":"xiaoming","age":18,"gender":"男"}

2、轉換JSON字符串時，JSON字符串的格式必須正確，否則會報錯。

//使用JSON.parse()方法轉換錯誤的示例
let a = '{"name":"xiaoming","age":18,"gender":"男"';
let b = JSON.parse(a);

console.log(typeof b + ' ' + b.name + ' ' + b.age + ' ' + b.gender);
//輸出結果：Unexpected end of JSON input undefined undefined undefined

3、對於循環引用的情況，JSON.stringify()方法會跳過循環引用的屬性，而JSON.parse()方法不會處理循環引用的屬性。

let a = {
  name: "xiaoming",
  age: 18,
  child: {
    name: "xiaohong",
    age: 15,
    father: null
  }
};

a.child.father = a;

let b = JSON.stringify(a);
console.log(b);
//輸出結果：{"name":"xiaoming","age":18,"child":{"name":"xiaohong","age":15}}

let c = JSON.parse(b);
console.log(c);
//輸出結果：{name: "xiaoming", age: 18, child: {name: "xiaohong", age: 15}}

六、總結

本文從JSON對象的介紹、JS數據類型轉換、JSON.stringify()方法使用、JSON.parse()方法使用、轉換過程中的注意事項等多個方面介紹了JS JSON對象轉字符串的知識點。通過這篇文章的學習，相信大家對JSON對象轉字符串已經有了更深入的了解。