700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > JS中浅拷贝和深拷贝的使用 深拷贝实现方法总结

JS中浅拷贝和深拷贝的使用 深拷贝实现方法总结

时间:2023-07-29 08:14:56

相关推荐

JS中浅拷贝和深拷贝的使用 深拷贝实现方法总结

1、浅拷贝:两个对象经过拷贝后虽然具有相同的属性,但是他们都指向同一个内存空间。操作会引起引用,同一地址的变量一起改变。

let a = {x: 1}let b = ab.x = 2console.log(b) // {x: 2}console.log(a) // {x: 2}

2、深拷贝:两个对象除了拷贝了一样的属性, 没有任何其他关联(指向不同的内存空间)。

实现深拷贝的方法:

(1)ES5for循环赋值

//普通对象,单层属性let souceObj = {x: 1, y: 2} function clone(souceObj, targetObj = {}) {for (const key in souceObj) {targetObj[key] = souceObj[key]}return targetObj}let targetObj = clone(souceObj)targetObj.x = 10console.log(souceObj) //{ x: 1, y: 2 }console.log(targetObj) //{ x: 10, y: 2 }

(2)JSONparse stringify

let souceObj = {x: 1, y: 2}let targetObj = JSON.parse(JSON.stringify(souceObj))targetObj.x = 10console.log(souceObj) //{ x: 1, y: 2 }console.log(targetObj) //{ x: 10, y: 2

这样做是真正的Deep Copy,这种方法简单易用。

但是这种方法也有不少坏处,譬如它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。

这种方法能正确处理的对象只有Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。

也就是说,只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON。

(3)ES6操作符 ...

let souceObj = {x: 1, y: 2}let targetObj = {...souceObj}targetObj.x = 10console.log(souceObj) //{ x: 1, y: 2 }console.log(targetObj) //{ x: 10, y: 2 }

(4)ES6Object.assign()

let souceObj = {x: 1, y: 2}let targetObj = Object.assign({}, souceObj)targetObj.x = 10console.log(souceObj) //{ x: 1, y: 2 }console.log(targetObj) //{ x: 10, y: 2 }

(5)递归深拷贝

function deepCopy(obj) {// 只拷贝对象if (typeof obj !== 'object') return;// 根据obj的类型判断是新建一个数组还是一个对象var newObj = obj instanceof Array ? [] : {};for (let key in obj) {// 遍历obj,并且判断是obj的属性才拷贝if (obj.hasOwnProperty(key)) {// 判断属性值的类型,如果是对象递归调用深拷贝newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];}}return newObj;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。