JS JSON对象转字符串深度剖析

一、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对象转字符串已经有了更深入的了解。