使用场景

• 筛选上传、返回的数据

image.png

• 深拷贝去指针

序列化

• JSON.stringify

句法：JSON.stringify(value[, replacer[, space]])

repleacer返回的值为null或undefined则不做序列化处理

space就是一个美化输出格式的参数

const obj = {
    name:'kkk',
  age:123,
  innerObj:{
    gender:'male'
  }
}
const repleacer = (key,value)=>{
  if(key === 'name'){
        return value.toUpperCase()
    }
    if(typeof value === 'number'){
        return undefined
    }
    return value
}
const repleacerWithoutReturn = (key,value)=>{
    return null
}
console.log(JSON.stringify(obj,repleacer))
// {"name":"KKK","innerObj":{"gender":"male"}}
console.log(JSON.stringify(obj,repleacerWithoutReturn))
// null

句法：JSON.stringify(value[,attrArr[,space]])

接收数组来决定序列化属性

const obj = {
    name:'kkk',
  age:123,
  innerObj:{
    gender:'male'
  }
}

console.log(JSON.stringify(obj,['age','gender'])) // {"age":123}
// 这个有个问题就是无法取到嵌套对象的属性
console.log(JSON.stringify(obj,['age','innerObj'])) // {"age":123,"innerObj":{}}
console.log(JSON.stringify(obj.innerObj,['innerObj'])) // {}

space参数也可使用制表符（\t） 来缩进

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
// {            \
//     "uno": 1, \
//     "dos": 2  \
// }

注意：不能处理函数

• 自定义toJSON函数

这个就是在对象内部定义toJSON函数方法，以函数劫持的方式取代原内置默认方法

const obj = {
    instId:'B50',
  instName:'AliPay',
  toJSON:function(){
    // 只返回定义的key value
    return{
      OU:this.instId+'_'+this.instName
    }
    }
}
console.log(JSON.stringify(obj)) // {"OU":"B50_AliPay"}

反序列化

• JSON.parse

句法 JSON.parse(text[, reviver])

reviver 同 stringify 的 repleacer

// 唯一注意的点就是单双引号不嵌套使用
var jsonStr = '{"name":"kkk","age":222,gender:"male"}'
JSON.parse(jsonStr,function(key,value){
        if(key === 'name'){
            return value + '同学';
        }
    if(key === 'age'){
        return value*2;
    }
    return value
})
// {name: "kkk同学", age: 444, gender: "male"}age: 444gender: "male"name: "kkk同学"__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

• eval

var jsonStr = '{"name":"kkk","age":222,gender:"male"}'
eval("("+jsonStr+")")
// {name: "kkk同学", age: 444, gender: "male"}age: 444gender: "male"name: "kkk同学"__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

参考:MDN-stringify、MDN-parse、你不知道的JSON.parse()和JSON.stringify()