javascript之深浅拷贝

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript之深浅拷贝脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

为何写:

最近在研究深浅拷贝,找了很多资料,感觉不是很满意,所以自己就整理了一份。废话不多说,我们来一起复习一下吧,也希望留下您宝贵意见。

何为深浅拷贝?

深拷贝和浅拷贝是只针对ObjectArray这样的复杂类型的

1.浅拷贝:

我们先来看2个栗子:

let a = {
 name: 'azi'
}
let b = a;
b.name = 'zhangsan';
console.LOG(a.name);  // zhangsan
console.log(b.name); // zhangsan
let a = ['hello','world']
let b = a;
b[1]= 'azi';
console.log(a);  // ["hello", "azi"]
console.log(b); // ["hello", "azi"]

从栗子中可以看出:

a和b指向同一块内存,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝。

2.深拷贝:

如果给b放到新的内存中,将a的各个属性都复制到新内存里,就是深拷贝。

换句话说,也就是b的属性改变时,a的属性不会跟着变化。

@H_512_97@常用的实现方法有哪些

1.浅拷贝:

数组

Array.slice()Array.concat()...

对象:

Object.assign()...

栗子:

// concat concat方法不会改变this或任何作为参数提供的数组,而是返回一个浅拷贝,它包含与原始数组相结合的相同元素的副本

let arr = ['old', 1, true, null, undefined];
let new_arr1 = arr.concat();
new_arr1[0] = 'new';
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr1) // ["new", 1, true, null, undefined]

// slice slice()方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象

let new_arr2 = arr.slice();
new_arr2[0] = 'new';
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr2) // ["new", 1, true, null, undefined]

// ... 扩展运算符 复制数组时候, 拓展语句只会进行浅复制, 因此如下所示, 它并不适合复制多维数组 (与Object.assign() 相同

let new_arr3 = [...arr];
new_arr3[0] = 'new';
console.log(arr) // ["old", 1, true, null, undefined]
console.log(new_arr3) // ["new", 1, true, null, undefined]
// Object.assign() Object.assign方法只会拷贝对象自身的并且可枚举的属性到目标对象

let obj1 = {a:0, b:{c:0}};
let obj2 = Object.assign({},obj1);
obj2.b.c =2 ;
obj2.a =2 ;
console.log(obj1); // {a:0,b:{c:2}}
console.log(obj2); // {a:2,b:{c:2}}

// ...
let obj3 = {...obj1};
obj3.b.c =3 ;
obj3.a =3 ;
console.log(obj1); // {a:0,b:{c:3}}
console.log(obj3); // {a:3,b:{c:3}}

2.深拷贝:

JSON.parse( JSON.stringify(arr) )

在使用JSON.stringify() 需要注意一下几点:

1.JSON.stringify(..) 在将 JSON 对象序列化为字符串时和 toString() 的效果基本相同,只不过序列化的结 果总是字符串:

JSON.stringify( 42 ); // "42"
JSON.stringify( "42" ); // ""42""(含有双引号的字符串)
JSON.stringify( null ); // "null"
JSON.stringify( true ); // "true"

2.所有安全的 JSON 值(JSON-safe)都可以使用 JSON.stringify(..) 字符串化。安全的 JSON 值是指能够呈现为有效 JSON 格式的值。
3.undefinedfunction、symbol (ES6+)和包含循环引用(对象之间相互引用,形成一个无限循环)的对象都不符合 JSON结构标准,支持 JSON 的语言无法处理它们
4.JSON.stringify(..) 在对象中遇到 undefinedfunction 和 symbol 时会自动将其忽略,在
数组中则会返回 null(以保证单元位置不变)。
例如:

 JSON.stringify( undefined ); // undefined
 JSON.stringify( function(){} );  // undefined
 JSON.stringify([1,undefined,function(){},4]); // "[1,null,null,4]"
 JSON.stringify({ a:2, b:function(){} }) // "{"a":2}"

对包含循环引用的对象执行 JSON.stringify(..) 会出错。

当然也可以用jq的extend 函数的实现,这里就不具体说了。

参考文档:
冴羽的JavaScript专题之深浅拷贝
Alloyteam深拷贝与浅拷贝的实现

脚本宝典总结

以上是脚本宝典为你收集整理的javascript之深浅拷贝全部内容,希望文章能够帮你解决javascript之深浅拷贝所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。