JS实现数组浅拷贝和深拷贝的方法
作者：遇见小美好
浅拷贝创建一个新的对象,来接受重新复制或引用的对象值,如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象,这篇文章主要介绍了js实现数组浅拷贝和深拷贝,需要的朋友可以参考下
浅拷贝：创建一个新的对象，来接受重新复制或引用的对象值。如果对象属性是基本的数据类型，复制的就是基本类型的值给新对象；但如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，会影响到另一个对象，因为两者共同指向同一个地址。
数组的浅拷贝
可用concat、slice返回一个新数组的特性来实现拷贝
var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); // 或者var new_arr = arr.slice()也是一样的效果; new_arr[0] = 'new'; console.log(arr); // ["old", 1, true, null, undefined] console.log(new_arr); // ["new", 1, true, null, undefined]
浅拷贝，还可以用Object.assign()方法实现
let target = {};
let source = { a: { b: 2 } };
Object.assign(target, source);
console.log(target); // { a: { b: 10 } };
source.a.b = 10;
console.log(source); // { a: { b: 10 } };
console.log(target); // { a: { b: 10 } };但是如果数组嵌套了对象或者数组的话用concat、slice拷贝只要有修改会引起新旧数组都一起改变了，比如：
var arr = [{old: 'old'}, ['old']];
var new_arr = arr.concat();
arr[0].old = 'new';
new_arr[1][0] = 'new';
console.log(arr); // [{old: 'new'}, ['new']]
console.log(new_arr); // [{old: 'new'}, ['new']]下面是浅拷贝一个通用方法，实现思路：遍历对象，把属性和属性值都放在一个新的对象里
var shallowCopy = function (obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
var newObj = Array.isArray(obj) ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}// 如果数组元素是基本类型，就会拷贝一份，互不影响，而如果是对象或者数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化。这种叫浅拷贝
// 深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也相互分离，修改一个对象的属性，也不会影响另一个。
数组的深拷贝
方法一：JSON.stringify()不仅可拷贝数组还能拷贝对象（但不能拷贝函数，也不能解决循环引用问题）
var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]
var new_arr = JSON.parse(JSON.stringify(arr))
console.log(new_arr);方法二：递归。下面是深拷贝一个通用方法，实现思路：拷贝的时候判断属性值的类型，如果是对象，继续递归调用深拷贝函数
var deepCopy = function(target) {
// 只拷贝对象
if (typeof target !== 'object') return target;
// 根据obj的类型判断是新建一个数组还是一个对象
var result = Array.isArray(obj) ? [] : {};
for (var key in target) {
// 遍历obj,并且判断是obj的属性才拷贝(不能拷贝原型对象的属性)
if (target.hasOwnProperty(key)) {
// 判断属性值的类型，如果是对象递归调用深拷贝
result[key] = typeof target[key] === 'object' ? deepCopy(target[key]) : target[key];
}
}
return result;
}其中上述方法一、方法二都解决不了循环引用的问题。
方法三，结合map（将方法二的递归改造，解决循环引用问题）：
var deepCopy = function (target, map = new Map()) {
// 只拷贝对象
if (typeof target !== "object") return target;
// 克隆数据之前，先判断之前是否有克隆过（解决循环引用的问题）
let cache = map.get(target);
if (cache) {
return cache;
}
// 根据obj的类型判断是新建一个数组还是一个对象
var result = Array.isArray(target) ? [] : {};
// 将新的结果存到容器中
map.set(target, result);
for (var key in target) {
// 遍历obj,并且判断是obj的属性才拷贝(不能拷贝原型对象的属性)
if (target.hasOwnProperty(key)) {
// 判断属性值的类型，如果是对象递归调用深拷贝
result[key] =
typeof target[key] === "object"
? deepCopy(target[key], map)
: target[key];
}
}
return result;
};
// 测试代码
let obj = { a: 1, b: [6, 8], c: { e: 3 } };
obj.b.push(obj.c);
obj.c.h = obj.b;
let obj1 = deepCopy(obj);
console.log(obj);
console.log(obj1);到此这篇关于js实现数组浅拷贝和深拷贝的文章就介绍到这了,更多相关js浅拷贝和深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！