js实现数组浅拷贝和深拷贝

全栈程序员-站长 • 2026年3月17日下午5:02 • 未分类 • 阅读 1

浅拷贝：创建一个新的对象，来接受重新复制或引用的对象值。如果对象属性是基本的数据类型，复制的就是基本类型的值给新对象；但如果属性是引用数据类型，复制的就是内存中的地址，如果其中一个对象改变了这个内存中的地址，会影响到另一个对象，因为两者共同指向同一个地址。

数组的浅拷贝，
可用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; }

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);