关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题 |
您所在的位置：网站首页 › vuejson › 关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题 |
关于vue中JSON.parse(JSON.stringify(...))使用深拷贝问题
|
一般我们单独用JSON.parse()或JSON.stringify() 今天在学vue看到JSON.parse(JSON.stringify(…))的用法，这里研究一下； 首先分别说下他们的用法： JSON.parse() 是将字符串中的对象解析出来 例： var str = "{'name':'huahua','age':'22'}"; JSON.parse(str); var obj = {name:"hua",age: 26}; JSON.stringify(obj);拷贝一个字符串会新辟一个新的存储地址，这样就切断了引用对象的指针联系，所以先转成一个字符串，在解析出对象，这样就可以深拷贝一个对象，换句话说其实就是新开辟个区域，所指向的指针也随之改变成新的指针。 我们在使用 JSON.parse(JSON.stringify(xxx))时应该注意一下几点：JSON.parse(JSON.stringify())复制时间对象、Error对象、正则表达式，函数，或者undefined等值，此方法就会出现问题 1.如果json里面有时间对象，则序列化结果：时间对象=>字符串的形式； 2.如果json里有RegExp、Error对象，则序列化的结果将只得到空对象 RegExp、Error => {}； 3.如果json里有 function,undefined，则序列化的结果会把 function,undefined 丢失； 4.如果json里有NaN、Infinity和-Infinity，则序列化的结果会变成null； 5.如果json里有对象是由构造函数生成的，则序列化的结果会丢弃对象的 constructor； 6.如果对象中存在循环引用的情况也无法实现深拷贝 1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象； var test = { name: 'a', date: [new Date(1536627600000), new Date(1540047600000)], }; let b; b = JSON.parse(JSON.stringify(test))2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象； const test = { name: 'a', date: new RegExp('\\w+'), }; // debugger const copyed = JSON.parse(JSON.stringify(test)); test.name = 'test' console.error('ddd', test, copyed) image.png 3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失； const test = { name: 'a', date: function hehe() { console.log('fff') }, }; // debugger const copyed = JSON.parse(JSON.stringify(test)); test.name = 'test' console.error('ddd', test, copyed)4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
6、如果对象中存在循环引用的情况也无法正确实现深拷贝； 以上，如果拷贝的对象不涉及上面讲的情况，可以使用JSON.parse(JSON.stringify(obj))实现深拷贝，但是涉及到上面的情况(除循环引用的情况外)，可以考虑使用如下方法实现深拷贝： function deepClone(data) { const type = this.judgeType(data); let obj; if (type === 'array') { obj = []; } else if (type === 'object') { obj = {}; } else { // 不再具有下一层次 return data; } if (type === 'array') { // eslint-disable-next-line for (let i = 0, len = data.length; i // 对原型上的方法也拷贝了.... // eslint-disable-next-line for (const key in data) { obj[key] = this.deepClone(data[key]); } } return obj; } function judgeType(obj) { // tostring会返回对应不同的标签的构造函数 const toString = Object.prototype.toString; const map = { '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Function]': 'function', '[object Array]': 'array', '[object Date]': 'date', '[object RegExp]': 'regExp', '[object Undefined]': 'undefined', '[object Null]': 'null', '[object Object]': 'object', }; if (obj instanceof Element) { return 'element'; } return map[toString.call(obj)]; }如果被拷贝中没有对时间、正则要求兼容，可以采用如下方法 function deepClone(obj) { if(obj && typeof obj ==='object' ){ var newObj= Array.isArray(obj) ? []:{}; for (var key in obj) { if(obj.hasOwnProperty(key)){ if(obj[key] && typeof obj[key]==='object'){ newObj[key]=deepClone(obj[key] ) }else { newObj[key]= obj[key] } } } }else { console.error('输入参数为空或不为对象'); return '输入参数为空或不为对象' } return newObj } 测试例子: var a={name:'a', age:2, info:{ height:17, weight:100 }, arry:[1,2,3], test:{inner:{innerinner:[1,2,3]}}, ud:undefined, fn:function () { console.log(1) }, date: [new Date(1536627600000), new Date(1540047600000)], nan:NaN, reg: new RegExp('\\w+'), }; var b=deepClone(a); b.age=28; b.name='b'; b.arry[1]='lc'; b.test.inner.innerinner[1]='ok'; b.info.height=168; console.log(a,b); c=[1,2,3,{inner:{innerinner:[1,2,3]}}]; d=deepClone(c); d[0]=0; d[3].inner.innerinner[1]=11; console.log(c,d) |
5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；【本文地址】