JSON.parse深拷贝问题及解决

问题描述

今天后台接口返回数据突然有Undefined字段，导致Json.parse(Json.stringify(obj))报错,控制台出现““undefined” is not valid JSON”

原因分析：

好像浅拷贝转深拷贝，JSON序列化，处理不了undefined类型， 最稳妥推荐的方式是：递归！！！

解决方案：

1.递归函数：我封装的utils/cloneDeep.js里面

//使用递归实现深拷贝
export function deepClone(obj) {
    //变量先置空
    let newobj = null;  
    //obj不能为空,并且是对象或者是数组,null也是object
    if (typeof (obj) == 'object' && obj !== null) {
        newobj = obj instanceof Array ? [] : {};
        //递归进行深度的拷贝
        for (var i in obj) {
            newobj[i] = deepClone(obj[i])
        }
        //如果不是对象直接赋值
    } else {
        newobj = obj;
    }   
    return newobj;    
}

2.全局挂载：main.js文件里面

//深拷贝
import { deepClone } from '@/utils/cloneDeep'; 
Vue.prototype.deepClone = deepClone

3.项目中直接使用ok

//深拷贝
this.viewType = this.deepClone(res)

总结

浅拷贝转深拷贝办法：
1.JSON.parse / JSON.stringify,数据出现undefined会出错
2.深层递归 （推荐）