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
引用:<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为浅拷贝
标签:console,log,js,objA,objB,var,拷贝 来源: https://www.cnblogs.com/ifeelthecall/p/15061419.html