在JS中，一般的=号传递的都是对象/数组的引用，并没有真正地拷贝一个对象，那如何进行对象的深度拷贝呢？那么，话不多说，直入主题。
对象深拷贝
通常情况下，我们可以使用JSON.parse()与 JSON.stringify()实现对象的深克隆，如下：
const clone = function (obj) {
return JSON.parse(JSON.stringify(obj));
}
但是大家要记住，这种方法只适合纯数据json对象的深度克隆，不过已经满足我们通常情况下的开发，对于复杂结构的深拷贝，大家参考下面的方法
const clone = function (obj) {
if(obj === null) return null
if(typeof obj !== 'object') return obj;
if(obj.constructor===Date) return new Date(obj);
if(obj.constructor === RegExp) return new RegExp(obj);
var newObj = new obj.constructor (); //保持继承链
for (var key in obj) {
if (obj.hasOwnProperty(key)) { //不遍历其原型链上的属性
var val = obj[key];
newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
}
}
return newObj;
};
具体分析参考 http://www.cnblogs.com/wangyulue/articles/7684515.html
补充方法 ES6扩展运算符实现对象的深拷贝
let aa={a:1,b:undefined,c:function(){},d:new Date()}
aa //{a: 1, b: undefined, c: ƒ, d: Tue Apr 23 2019 13:22:56 GMT+0800 (中国标准时间)}a: 1b: undefinedc: ƒ ()d: Tue Apr 23 2019 13:22:56 GMT+0800 (中国标准时间) {}__proto__: Object
let bb={...aa}
bb //{a: 1, b: undefined, c: ƒ, d: Tue Apr 23 2019 13:22:56 GMT+0800 (中国标准时间)}a: 1b: undefinedc: ƒ ()d: Tue Apr 23 2019 13:22:56 GMT+0800 (中国标准时间) {}__proto__: Object
aa.e=null
aa //{a: 1, b: undefined, c: ƒ, d: Tue Apr 23 2019 13:22:56 GMT+0800 (中国标准时间), e: null}
bb //{a: 1, b: undefined, c: ƒ, d: Tue Apr 23 2019 13:22:56 GMT+0800 (中国标准时间)}
数组深拷贝
数组深拷贝，方法要多很多
1.遍历
let arr = ["a", "b"], arrCopy = [];
for (var item in arr) arrCopy[item] = arr[item];
arrCopy[1] = "c";
arr // => ["a", "b"]
arrCopy // => ["a", "c"]
多重数组则写成方法，递归自己即可。
2.slice()
定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
参数 描述
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
let arrCopy = arr.slice(0);
arrCopy[1] = "c";
arr // => ["a", "b"]
arrCopy // => ["a", "c"]
3.concat()
定义和用法
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
参数 描述
arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
let arrCopy = arr.concat();
arrCopy[1] = "c";
arr // => ["a", "b"]
arrCopy // => ["a", "c"]
4.JSON.parse()与 JSON.stringify()
(1)JSON.parse函数
作用：将json字符串转换成json对象。
语法：JSON. parse(text[,reviver]).
参数：text 必须；一个有效的json字符串。
reviver 可选。
返回值：一个对象或数组。
(2)JSON.stringify()函数
作用：将json对象转换成json字符串。
语法：JSON.stringify(value [, replacer] [, space])
参数：value 必须；通常为对象或数组。
replacer 可选，用于转换结果的函数或者数组。
space 可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。
返回值：一个包含JSON文本的字符串。
let arrCopy = JSON.parse(JSON.stringify(arr));
arrCopy[1] = "c";
arr // => ["a", "b"]
arrCopy // => ["a", "c"]
5.ES6扩展运算符实现数组的深拷贝
...扩展运算符是ES6的语法，使用起来非常的方便简洁，相信在写ES6的时候也是备受欢迎的。
let arrCopy = [...arr];
arrCopy[1] = "c";
arr // => ["a", "b"]
arrCopy // => ["a", "c"]
大家有更好的办法，欢迎留言，共同学习。
网友评论