JavaScript中深拷贝与浅拷贝详解

更新时间：2022年02月09日 11:31:29 作者：橘猫吃不胖～

大家好，本篇文章主要讲的是JavaScript中深拷贝与浅拷贝详解，感兴趣的同学赶快来看一看吧，对你有帮助的话记得收藏一下

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只有一层的时候，是深拷贝，示例代码如下：

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对象包含两个方法：用于解析JSON的parse()方法，以及将对象/值转换为JSON字符串的stringify()方法，下面对这两种方法进行一些介绍。

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库，提供了多个实用程序功能，而Lodash库中最常用的功能之一是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深拷贝与浅拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

layer.js之回调销毁对话框的例子
今天小编就为大家分享一篇layer.js之回调销毁对话框的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS模仿手机端九宫格登录功能实现代码
这篇文章主要介绍了JS模仿手机端九宫格登录功能实现代码的相关资料,需要的朋友可以参考下
2016-04-04
JS实现求字符串中出现最多次数的字符和次数示例
这篇文章主要介绍了JS实现求字符串中出现最多次数的字符和次数,涉及javascript针对字符串的遍历、统计、计算等相关操作技巧,需要的朋友可以参考下
2019-07-07
Javascript 八进制转义字符(8进制)
最近在看一些Javascript玩魔术的资料，感叹那些真正的是在玩技术，相当让人佩服。
2011-04-04
利用原生JS实现data方法示例代码
这篇文章主要给大家介绍了关于如何利用原生JS实现data方法的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用原生JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
JavaScript中使用Callback控制流程介绍
这篇文章主要介绍了JavaScript中使用Callback控制流程介绍,本文讲解了callback的一些问题和优化后的写法并给出代码实例,需要的朋友可以参考下
2015-03-03
javascript实现时钟动画
这篇文章主要为大家详细介绍了javascript实现时钟动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
这篇文章主要介绍了手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作,结合实例形式分析了CKEDitor4 Dialog内嵌IFrame具体操作步骤与相关注意事项,需要的朋友可以参考下
2019-06-06
JavaScript圣杯布局与双飞翼布局实现案例详解
这篇文章主要介绍了JavaScript圣杯布局与双飞翼布局实现案例，这是前端面试中需要掌握的知识点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Javascript 变量作用域两个可能会被忽略的小特性
关于Javascript，大家肯定都很熟悉啦，对于有编程经验的朋友来说，Javascript很快就能上手，不过关于JS的变量作用域，还是有一点差别的。
2010-03-03