JavaScript 深拷贝与浅拷贝详解及实现方式
本文深入解析 JavaScript 中对象与数组的浅拷贝和深拷贝概念。详细对比了 Object.assign、Array.prototype.concat、slice 及直接赋值等浅拷贝实现方式的差异，并介绍了 JSON.parse/stringify 和 Lodash cloneDeep 等深拷贝方案及其局限性，帮助开发者根据实际需求选择合适的拷贝策略。
1 浅拷贝概念
在 JavaScript 中，深拷贝与浅拷贝主要针对 Object 和 Array 这类引用数据类型。
浅拷贝会创建一个新的对象，并将原始对象属性值的副本赋予新对象。若属性为基本类型，则复制其值；若属性为引用类型，则复制其内存地址。因此，若修改新对象中引用类型的属性，原对象也会随之改变。
示例代码：
let people = { //定义一个People对象
name: "张三",
age: 3,
address: "中国"
}
console.log("原对象：", people);
let newPeople = people; //进行浅拷贝
console.log("新对象：", newPeople);
//原对象： { name: '张三', age: 3, address: '中国' }
//新对象： { name: '张三', age: 3, address: '中国' }
//为对象修改名字
newPeople.name = "橘猫吃不胖";
console.log("原对象：", people);
console.log("新对象：", newPeople);
//原对象： { name: '橘猫吃不胖', age: 3, address: '中国' }
//新对象： { name: '橘猫吃不胖', age: 3, address: '中国' }
通过上述示例可见，当修改 newPeople 的 name 属性时，原 people 对象也发生了相应变化。这是因为新旧对象指向了相同的内存地址。
2 深拷贝概念
深拷贝会在堆内存中开辟一块全新的区域，将原对象及其所有嵌套对象完整复制一份。修改深拷贝后的新对象不会影响原始对象。
示例代码：
let people = { //定义一个People对象
name: "张三",
age: 3,
address: "中国"
}
//对people进行深拷贝
let newPeople = JSON.parse(JSON.stringify(people));
console.log("原对象：", people);
console.log("新对象：", newPeople);
// 原对象： { name: '张三', age: 3, address: '中国' }
// 新对象： { name: '张三', age: 3, address: '中国' }
//修改新对象中的adress属性
newPeople.address = "俄罗斯";
console.log("原对象：", people);
console.log("新对象：", newPeople);
// 原对象： { name: '张三', age: 3, address: '中国' }
// 新对象： { name: '张三', age: 3, address: '俄罗斯' }
从上述示例可以看出，执行深拷贝后，即使修改新对象的属性，原始对象的内容依然保持不变。
3 浅拷贝的实现方式
3.1
Object.assign()函数负责将源对象中所有可枚举属性的值复制至目标对象，并返回该目标对象。此操作属于浅拷贝范畴，即仅复制属性引用而非对象实体本身。
语法：
Object.assign(target, ...sources)
//target：目标对象；sources：源对象。
若目标对象与源对象存在相同的键，源对象的属性将覆盖目标对象中对应的属性。后续源对象的同名属性会覆盖前序源对象的属性。
示例：
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
//进行浅拷贝
const returnedTarget = Object.assign(target, source);
console.log(target);
console.log(returnedTarget);
// { a: 1, b: 4, c: 5 }
// { a: 1, b: 4, c: 5 }
//修改其中的值
target.b = 10;
console.log(target);
console.log(returnedTarget);
// { a: 1, b: 10, c: 5 }
// { a: 1, b: 10, c: 5 }
当对象仅有一层结构时，上述方式可实现类似深拷贝的效果，示例代码如下：
const obj = { name: "橘猫吃不胖" };
//进行浅拷贝
let newObj = Object.assign({}, obj);
//修改新对象中的name属性为张三
newObj.name = "张三";
console.log("原对象：", obj);
console.log("新对象：", newObj);
// 原对象： { name: '橘猫吃不胖' }
// 新对象： { name: '张三' }
3.2 Array.prototype.concat()
concat() 方法用于合并两个或多个数组。该方法不会修改现有数组，而是返回一个新数组。
语法：
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
//valueN可选，数组和/或值，将被合并到一个新的数组中。
//如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝。
示例代码：
let arr1 = [1, 2, { name: "橘猫吃不胖" }];
//进行浅拷贝
let arr2 = arr1.concat();
console.log("原数组：", arr1);
console.log("新数组：", arr2);
// 原数组： [ 1, 2, { name: '橘猫吃不胖' } ]
// 新数组： [ 1, 2, { name: '橘猫吃不胖' } ]
//修改原数组
arr1[1] = "hhhhh";
console.log("原数组：", arr1);
console.log("新数组：", arr2);
// 原数组： [ 1, 'hhhhh', { name: '橘猫吃不胖' } ]
// 新数组： [ 1, 2, { name: '橘猫吃不胖' } ]
3.3 Array.prototype.slice()
slice() 方法返回一个新数组对象，该对象是原数组由 begin 和 end 参数决定的浅拷贝（包含 begin，不包含 end）。原始数组保持不变。
语法：
arr.slice([begin[, end]])
//begin：可选，提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
//如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
//如果省略 begin，则 slice 从索引 0 开始。
//如果 begin 超出原数组的索引范围，则会返回空数组。
//end：可选，提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
//slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
//如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
//如果 end 被省略，则 slice 会一直提取到原数组末尾。
//如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。
示例代码：
let arr1 = [1, 2, { name: "橘猫吃不胖" }];
//进行浅拷贝
let arr2 = arr1.slice();
console.log("原数组：", arr1);
console.log("新数组：", arr2);
// 原数组： [ 1, 2, { name: '橘猫吃不胖' } ]
// 新数组： [ 1, 2, { name: '橘猫吃不胖' } ]
//修改原数组
arr1[1] = "hhhhh";
console.log("原数组：", arr1);
console.log("新数组：", arr2);
// 原数组： [ 1, 'hhhhh', { name: '橘猫吃不胖' } ]
// 新数组： [ 1, 2, { name: '橘猫吃不胖' } ]
3.4 直接赋值
直接使用“=”进行赋值操作可实现浅拷贝，示例代码如下：
let obj1 = { //定义一个对象obj1
name: "张三",
age: 34
}
let obj2 = obj1; //进行浅拷贝
console.log("obj1：", obj1);
console.log("obj2：", obj2);
// obj1： { name: '张三', age: 34 }
// obj2： { name: '张三', age: 34 }
//修改obj2中的name属性
obj2.name = "橘猫吃不胖";
console.log("obj1：", obj1);
console.log("obj2：", obj2);
// obj1： { name: '橘猫吃不胖', age: 34 }
// obj2： { name: '橘猫吃不胖', age: 34 }
4 深拷贝的实现方式
4.1 JSON.parse(JSON.stringify())
JSON 是一种用于序列化对象、数组、数值、字符串、布尔值和 null 的语法格式。它基于 JavaScript 语法，但与 JavaScript 并不完全等同：JavaScript 不是 JSON，JSON 也不是 JavaScript。
JSON 对象包含两个核心方法：parse() 用于解析 JSON 字符串，stringify() 用于将对象或值转换为 JSON 字符串。以下对这两种方法进行介绍。
JSON.parse() 方法用于解析 JSON 字符串，构建由字符串描述的 JavaScript 值或对象。该函数可选接受一个 reviver 函数，用于在返回结果前对所得对象执行变换操作。
语法：
JSON.parse(text[, reviver])
//text：要被解析成 JavaScript 值的字符串
//reviver，可选，转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。
示例：
JSON.parse('{}'); // {}
JSON.parse('true'); // true
JSON.parse('"foo"'); // "foo"
JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
JSON.parse('null'); // null
JSON.stringify() 方法将 JavaScript 对象或值转换为 JSON 字符串。若指定 replacer 函数，可选择性地替换值；若 replacer 为数组，则仅包含数组指定的属性。
语法：
JSON.stringify(value[, replacer [, space]])
//value：将要序列化成 一个 JSON 字符串的值。
//replacer，可选，如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
//space，可选，指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为 null），将没有空格。
示例：
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
深拷贝示例代码：
let people = { //定义一个People对象
name: "张三",
age: 3,
address: "中国"
}
//对people进行深拷贝
let newPeople = JSON.parse(JSON.stringify(people));
console.log("原对象：", people);
console.log("新对象：", newPeople);
// 原对象： { name: '张三', age: 3, address: '中国' }
// 新对象： { name: '张三', age: 3, address: '中国' }
//修改新对象中的adress属性
newPeople.address = "俄罗斯";
console.log("原对象：", people);
console.log("新对象：", newPeople);
// 原对象： { name: '张三', age: 3, address: '中国' }
// 新对象： { name: '张三', age: 3, address: '俄罗斯' }
利用 JSON.stringify 将对象转换为 JSON 字符串，再通过 JSON.parse 将字符串解析为对象，从而生成新的对象实现深拷贝。虽然此方法可实现数组或对象的深拷贝，但无法处理函数。
let arr1 = [1, 2, { name: "橘猫吃不胖" }, function () { }];
//进行深拷贝
let arr2 = JSON.parse(JSON.stringify(arr1));
console.log("原数组：", arr1);
console.log("新数组：", arr2);
// 原数组： [ 1, 2, { name: '橘猫吃不胖' }, [Function (anonymous)] ]
// 新数组： [ 1, 2, { name: '橘猫吃不胖' }, null ]
由上述示例可知，函数并未被复制到 arr2 中。这是因为 JSON.stringify() 仅能将 JavaScript 值（对象或数组）转换为 JSON 字符串，无法接受和处理函数。
4.2 函数库lodash
Lodash 是一个 JavaScript 工具库，提供多种实用功能。其中 cloneDeep() 是最常用的方法之一，用于深度克隆对象。该方法能够克服 JSON.stringify() 的局限性，处理不可序列化的属性。
示例代码：
const lodash = require("lodash");
let people = {
name: "张三",
age: 3,
address: "中国"
}
//对people进行深拷贝
let newPeople = lodash.cloneDeep(people);
console.log("原对象：", people);
console.log("新对象：", newPeople);
// 原对象： { name: '张三', age: 3, address: '中国' }
// 新对象： { name: '张三', age: 3, address: '中国' }
//修改新对象中的adress属性
newPeople.address = "俄罗斯";
newPeople.name = "橘猫吃不胖";
console.log("原对象：", people);
console.log("新对象：", newPeople);
// 原对象： { name: '张三', age: 3, address: '中国' }
// 新对象： { name: '橘猫吃不胖', age: 3, address: '俄罗斯' }
总结
本文到此结束，希望能为读者提供帮助，同时也欢迎大家关注本站以获取更多相关内容！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18