首先我们来了解一下JSON.stringify()
JSON.stringify()将值转换为相应的JSON格式：
- 转换值如果有toJSON()方法，该方法定义什么值将被序列化。
- 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。 - undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）。函数、undefined被单独转换时，会返回undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
- 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
- 所有以 symbol 为属性键的属性都会被完全忽略掉，即便 replacer 参数中强制指定包含了它们。
+Date日期调用了toJSON()将其转换为了string字符串（同Date.toISOString()），因此会被当做字符串处理。 - NaN和Infinity格式的数值及null都会被当做null。
- 其他类型的对象，包括Map/Set/weakMap/weakSet，仅会序列化可枚举的属性。
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
JSON.stringify({x: 5, y: 6});
// "{"x":5,"y":6}"
JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
// '[1,"false",false]'
JSON.stringify({x: undefined, y: Object, z: Symbol("")});
// '{}'
JSON.stringify([undefined, Object, Symbol("")]);
// '[null,null,null]'
JSON.stringify({[Symbol("foo")]: "foo"});
// '{}'
JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
// '{}'
JSON.stringify(
{[Symbol.for("foo")]: "foo"},
function (k, v) {
if (typeof k === "symbol"){
return "a symbol";
}
}
);
// undefined
// 不可枚举的属性默认会被忽略：
JSON.stringify(
Object.create(
null,
{
x: { value: 'x', enumerable: false },
y: { value: 'y', enumerable: true }
}
)
);
// "{"y":"y"}"
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
1.利用json解析实现
JSON.parse(JSON.stringify(obj));
缺点：
- 对于值是undefined的属性会丢失
- 对于原对象的方法无法拷贝。
例子：
var obj={
a: undefined,
b: {first:1,last:2,abc:{name: undefined, age:12}},
c: null,
d: '',
e: function(){
console.log(111);
}
}
var depclone = JSON.parse(JSON.stringify(obj));
console.log(depclone)
/*output: obj.a 和obj.b.abc.name丢失了
原对象的方法没有拷贝进来
{
b:{
abc: {age: 12}
},
first: 1,
last: 2,
c: null
d: ""
}
*/
2.递归实现
deepCopy(o) {
if (o instanceof Array) {
let n = [];
for (let i = 0; i < o.length; ++i) {
n[i] =deepCopy(o[i]);
}
return n;
} else if (o instanceof Object) {
let n = {}
for (let i in o) {
n[i] = deepCopy(o[i]);
}
return n;
} else {
return o;
}
}
//或者
function deepCopy(origin,target){
//目标值先置为空
var target=null;
//判断原始对象的数据类型
if(typeof origin==='object'&&origin!==null){
//判断拷贝的是数组还是对象
target=origin instanceof Array?[]:{};
for(var key in origin){
//递归拷贝
target[key]=deepCopy(origin[key],target[key])
}
}else{
//基本类型直接赋值
target=origin;
}
return target;
}
//或者用constructor来判断类型
//参数p为原对象
//参数c为原对象的类型，若原对象为数组，则传入c为[],若原对象是对象传入c为{}，也可不传默认为{}
function deepCopy(p,c){
var c = c || {};
for(var i in p){
if(typeof p[i] === "object"){
c[i] = (p[i].constructor === Array)?[]:{};
deepCopy(p[i],c[i])
}else{
c[i] = p[i]
}
}
return c;
}
3.jquery的extend方法
extend()将一个对象或者多个对象的内容合并到目标对象上面。
语法：
$.extend( [deep ], target, object1 [, objectN ] )
//deep表示是否要深度拷贝，默认是false
//以下为将obj1深度拷贝到obj对象
$.extend(true, obj, obj1)
4.lodash函数库提供了lodash.cloneDeep()实现深拷贝
5.一维数组的深拷贝
一维数组的深拷贝也可以使用slice(),concat, [...array]三种方法
例子：
var array = [1,2,3,[2,4,6,undefined,null,'']];
var arrayDepClone1 = array.slice(0);
var arrayDepClone2 = array.concat();
var arrayDepClone3 = [...array];
console.log(arrayDepClone1);
console.log(arrayDepClone2);
console.log(arrayDepClone3);
/*
[1,2,3,[2,4,6,undefined,null,'']];
*/
//多维数组项更改其中一个值，其他都会改变，因为是引用类型
arrayDepClone3[3][0] = 7;
console.log(array);
console.log(arrayDepClone1);
/*此时结果为：
[1,2,3,[7,4,6,undefined,null,'']];
*/
浅拷贝：Object.create(); Object.assign()都是浅拷贝，对于值为基础类型的则为深拷贝。
网友评论