JavaScript中深拷贝与浅拷贝详解

作者：半夏时间：2026-10-24 22:48:49浏览：321

本文详细解析JavaScript中深拷贝与浅拷贝的概念、区别及常见实现方式。通过Object.assign、Array.prototype.concat、slice以及JSON.parse/stringify等方法演示浅拷贝与深拷贝的具体应用，并指出JSON方法处理函数的局限性。此外，介绍使用Lodash库进行深拷贝的最佳实践，帮助开发者根据实际需求选择合适的拷贝策略。

1 浅拷贝概念

深拷贝和浅拷贝的概念仅适用于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()方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象。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 }

当对象仅有一层时，Object.assign()可实现深拷贝效果，示例代码如下：

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不等于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: '俄罗斯' }

总结

到此这篇关于JavaScript中深拷贝与浅拷贝详解的文章就介绍到这了,更多相关JavaScript深拷贝与浅拷贝内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

2026-11-05 15:48:57

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

2026-11-05 14:49:16

JavaScript 8种数据类型详解：基本类型与引用类型的区别

2026-11-05 14:25:15

怎么在JavaScript中使用async/await优化Ajax异步流程

2026-11-05 13:56:15

JavaScript replace回调函数实现动态正则替换逻辑

2026-11-05 13:52:13