js 浅拷贝与深拷贝

 

在开发中我们常常会将一个变量直接用=赋值给另一个变量，这种操作属于典型的浅拷贝，

 

如果赋值的对象是js的基本类型（字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol）

那么：

var a = 1;
b = a; // 栈内存会开辟一个新的内存空间，此时b和a都是相互独立的
b = 2;
console.log(a); // 1

此时b和a都是相互独立的，即修改a或b都不会影响彼此

 

但如果赋值的对象是引用数据类型：对象(Object)、数组(Array)、函数(Function)

如：

var objA = {
            a:[1,2,3,4],
            b:'hello world'
        }

 var objB = objA

 objB.b = 'こんにちは、世界'

 console.log(objA);
 console.log(objB);

打印的结果是：

 

可见两个对象都被改变了。

 

这好吗？大部分情况下，不好。

所以针对较为复杂的object类型数据赋值，应该使用深拷贝的赋值方式

 

1.通过JSON对象来实现深拷贝

 var objA = {
            a:[1,2,3,4],
            b:'hello world'
        }

 var objB = JSON.parse(JSON.stringify(objA))

 objB.b = 'こんにちは、世界'

 console.log(objA);
 console.log(objB);

结果为：

缺点：

　　使用JSON.parse搭配JSON.stringify，是简单方便，但是会丢失key/value，例如undefined、function、symbol等类型的value会被忽略掉

 

2.通过lodash函数库实现深拷贝

lodash

官网：https://lodash.com/

引用：<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js"></script>

下载：https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js

安装：npm install lodash

<script src="./lodash.js"></script>

<script>

　　var objA = {
　　　　a:[1,2,3,4],
　　　　b:'hello world'
　　}


　　var objB = _.cloneDeep(objA)



　　objB.b = 'こんにちは、世界'
　　console.log(objA,objB);

</script>

结果为：

 

 

3.通过jQuery的extend方法实现深拷贝

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝