JSON.stringify

js.jpg

在我们的日常开发中，JSON.stringify()是一个很常用的函数，它的作用就是将对象转换成字符串

打印日志

当我们需要打印的东西是一个数组且里面有很多属性，但是我们只想要其中一个属性的时候。console.log()无法满足我们的要求

var person = [{
    name: 'zhangsan',
    age: 25,
    hobby: 'basketball'
},{
    name: 'lisi',
    age: 20,
    hobby: 'swiming' 
},{
    name: 'wanger',
    age: 35,
    hobby: 'make money' 
}]

console.log(JSON.stringify(person,['age']))  // [{"age":25},{"age":20},{"age":35}]

还可以传入函数,不满足条件的将不打印相应的键值对

var b = {
    name: 'wanger',
    age: 35,
    hobby: 'make money' 
}

var aa =  JSON.stringify(b, (key, value) => {
    if (value > 26) {
        return undefined
    } 
    return value
})
console.log(aa) // {"name":"wanger","hobby":"make money"}

有三个参数

1. 参数是数字

var b = {
    name: 'wanger',
    age: 35,
    hobby: 'make money' 
}

var aa =  JSON.stringify(b, null , 5)
console.log(aa)
// 输出结果
{
     "name": "wanger",
     "age": 35,
     "hobby": "make money"
}

如上，数字表示对象缩进的几个数量的空字符串，开发中应用实则鸡肋

2.参数是string

var b = {
    name: 'wanger',
    age: 35,
    hobby: 'make money' 
}

var aa =  JSON.stringify(b, null , '***')
console.log(aa)
// 输出
{
***"name": "wanger",
***"age": 35,
***"hobby": "make money"
}

嘿嘿，也是鸡肋

toJSON 方法

toJSON()可作为任意对象的的属性，JSON.stringify会返回这个函数的结果并对其进行序列化

var getFullName = {
    firsrName: 'chris',
    lastName: 'Bryant',
    age: 25,
    toJSON() {
        return {
            fullName: `${this.firsrName}  ${this.lastName}`
        }
    }
}

console.log(JSON.stringify(getFullName))
// {"fullName":"chris  Bryant"}

深拷贝

在我们的日常开发中，我们更多的引用其实是结合JSON.parse()来对对象进行深拷贝，避免赋值对象改变了原有的对象属性

var b = {
    name: 'wanger',
    age: 35,
    hobby: 'make money'
}

var aa = b
aa.name = 'lisi'

console.log(b)
console.log(aa)
// { name: 'lisi', age: 35, hobby: 'make money' }
//{ name: 'lisi', age: 35, hobby: 'make money' }

可以看到变量aa的赋值改变了变量b里的相同属性,这样的情况是我们不愿意看到的，改造一下喽。

var b = {
    name: 'wanger',
    age: 35,
    hobby: 'make money'
}

var aa = JSON.parse(JSON.stringify(b)) 
aa.name = 'lisi'

console.log(b)
console.log(aa)
// { name: 'wanger', age: 35, hobby: 'make money' }
// { name: 'lisi', age: 35, hobby: 'make money' }

如上，可满足我们的需求

JSON.stringify深拷贝坑

当我们的对象中有时间对象,函数，undefined，NaN这些的时候，JSON.stringify + JSON.parse并不能满足我们的需求，如：

var b = {
    name: 'wanger',
    age: 35,
    hobby: 'make money',
    func: function(){
        return 2
    },
    num: NaN,
    unde: undefined
}

var aa = JSON.parse(JSON.stringify(b)) 
console.log(aa)
// { name: 'wanger', age: 35, hobby: 'make money', num: null }

这时，可参考我们需要

function deepClone(origin,target){
    var target = target || {},
        toStr = Object.prototype.toString,
        arrStr = "[object Array]";
    for(var prop in origin){
        if(origin.hasOwnProperty(prop)){ 
            if (origin[prop] !== "null" && typeof(origin[prop]) == "object") {
                if (toStr.call(origin[prop]) == arrStr) {
                    target[prop] = [];
                }else{
                    target[prop] = {};
                }
                deepClone(origin[prop],target[prop]);
            }else{
                target[prop] = origin[prop]
            }
            
        }
    }
    return target;
}


var obj1 = {
    name:'zhang',
    age:25,
    hobit:{
        sport:["basketball","football","run"],
        learn:{
            name:"xxxx",
            catgory:["123",456]
        }
    }
}


var obj = {};

deepClone(obj1,obj)

ps: 基本数据类型不存在深浅拷贝的说法