js对象和json字符串互转 - HelloWorld开发者社区

JSON.parse()

JSON.parse()：接受一个 JSON 字符串并将其转换成一个js对象
语法：JSON.parse(string, [callback])
1. 参数string：是一个json格式的字符串
2. 参数callback：可选参数，是一个回调函数

1. 基本使用

parse解析注意点：

// parse参数的两个必要条件:
1. 参数必须严格是json格式的字符串（也就说属性名必须带双引号） 
2. 参数必须使用单引号包裹起来，内部的属性名使用双引号包裹(总体就是单引号套双引号的方式)


// 1. 正确使用：
var str = '{"name":"小明","age":18}'
var obj = JSON.parse(str) 

typeof obj  // Object
obj            // obj: {name:"小明",age:18}


// 2. 可以递归解析：
var str = '{"status":"1","data":[{"tags":[{"name":"春季"}]}]}'
var obj = JSON.parse(str) 

typeof obj                  // Object
obj.data[0].tags[0].name    // "春季"
// obj = {
//     status: "1",
//     data: [{
//         tags: [{
//             name: "春季",
//         }]
//     }]
// }


// 错误示范1：属性名没有使用双引号
var str = '{name:"小明",age:18}'
var obj = JSON.parse(str)     // 报错

// 错误示范2：字符串参数没有使用单引号包裹
var str = "{"name":"小明","age":18}"
var obj = JSON.parse(str)     // 报错

2. 高级用法

JSON.parse(): 第二个参数是可选参数，是一个回调函数，它可以在返回之前转换对象值

// 将返回对象的属性值大写：
const user = {
  name: 'John',
  email: 'john@awesome.com',
  plan: 'Pro'
};
 
//
const userStr = JSON.stringify(user);
 
const newUserStr = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});
 
console.log(newUserStr); //{name: "JOHN", email: "JOHN@AWESOME.COM", plan: "PRO"}

JSON.stringify()

JSON.stringify()：接受一个 js 对象并将其转换为一个 JSON 字符串
语法：JSON.stringify(obj, [replacer], [space])
1. obj参数：是一个js对象
2. replacer：可选参数，如果是函数类型，则表示过滤作用；如果是数组，则出现在数组中的项被返回，数组相当于白名单。
3. space：可选参数，传入间隔符为了增强可读性

1. 基本使用

var obj = {status:1,data:[{id:100391,tags:[{name:"春季"}]}]}

var jsonStr = JSON.stringify(obj)
// jsonStr: '{"status":"1","data":[{"id":100391,"tags":[{"name":"春季"}]}]}'


var obj1 = JSON.parse(jsonStr) 
// obj1: {status:1,data:[{id:100391,tags:[{name:"春季"}]}]}

2. 高级用法

// 示例1：当replacer是函数时：对user的每一项执行replacer函数，replacer函数返回undefined的项，则不放入stringify()的返回结果中。
// replacer相当于数组的filter方法
let user = {
  id: 229,
  name: 'John',
  email: 'john@awesome.com'
};
 

function replacer(key, value) {
  if (key === 'name') {
    return undefined;
  }
  return value;
}
 
let res = JSON.stringify(user, replacer);
console.log(res)    // {"id":229,"email":"john@awesome.com"}

// 示例2：当replacer为数组时：如果user中的某项出现在replacer数组中则返回user的这一项
// replacer数组相当于白名单

let user = {
  id: 229,
  name: 'John',
  email: 'john@awesome.com'
};
 
let replacer = ['name'];
let res = JSON.stringify(user, replacer);
console.log(res)        // {"name":"John"}

// 示例3：间隔符增强可读性
const user = {
  name: 'John',
  email: 'john@awesome.com',
  plan: 'Pro'
};
 
const userStr = JSON.stringify(user, null, '===');
// "{
// ==="name": "John",
// ==="email": "john@awesome.com",
// ==="plan": "Pro"
// }"

用JSON.stringify 来格式化对象

var censor = function(key,value){
    if(typeof(value) == 'function'){
         return Function.prototype.toString.call(value)
    }
    return value;
}
var foo = {bar:"1",baz:3,o:{name:'xiaoli',age:21,info:{sex:'男',getSex:function(){return 'sex';}}}};
console.log(JSON.stringify(foo,censor,4))


// 实际返回的字符串（备注是json字符串）：
{
    "bar": "1",
    "baz": 3,
    "o": {
        "name": "xiaoli",
        "age": 21,
        "info": {
            "sex": "男",
            "getSex": "function(){return 'sex';}"
        }
    }
}