js深拷贝

最新推荐文章于 2024-09-15 20:31:42 发布

热心青年小邓

最新推荐文章于 2024-09-15 20:31:42 发布

阅读量455

点赞数 2

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_53110831/article/details/114280938

版权

关于深拷贝实现的方式有很多种，但是一些方法会存在一些局限性，这里简单说几种。

JSON.parse(JSON.stringify(data))
这种方式较为便捷。可以做一个基本的深拷贝，但是有局限性，它会自动过滤掉值为undefined的属性

 const arrList = [1, 2, 3, { a: 1 },undefined,{b:undefined}]
 const brrList = JSON.parse(JSON.stringify(arrList))
 arrList[3].a = 2
 console.log("arrList-",arrList)
 console.log("brrList-",brrList )
 打印结果
 arrlist - [
	0: 1
	1: 2
	2: 3
	3: {a: 2}
	4: undefined
	5: {b: undefined}
	]
	length: 6
	__proto__: Array(0)

brrList - [
	0: 1
	1: 2
	2: 3
	3: {a: 1}
	4: null
	5: {}
	]
	length: 6
	__proto__: Array(0)

可以明显的看出原数组的改变并没有影响到我们拷贝得到的数组，但是undefined被过滤掉了

扩展运算符…

const arr = [1, 2, 3,{a:1}]
const brr = [...arr]
arr[3]=2
console.log(arr, brr)
arr - [1,2,3,2]
brr - [1,2,3,{a:1}]
第一层深拷贝成功
如果是改变深层次值的话
const newArr = [1, 2, 3,{a:1}]
const newBrr = [...newArr ]
newArr[3].a=2
console.log(newArr , newBrr )
newArr - [1, 2, 3,{a:2}]
newBrr - [1, 2, 3,{a:2}]
打印结果两个数组相同 说明原数组的改变影响到了新数组 深拷贝失败
所以该方法只能做第一层得深拷贝。

递归实现

   function cloneDeep(data) {
      if (typeof data !== "object") {
        return data
      } else {
        if (data.length) {
          const arr = []
          for (var i = 0; i < data.length; i++) {
            arr.push(cloneDeep(data[i]))
          }
          return arr
        } else {
          const obj = {}
          for (var j in data) {
            obj[j] = cloneDeep(data[j])
          }
          return obj
        }
      }
    }

这是一个简单的实现例子

const arr = [{ name: { age: "123", brr: [5, 3, 4] }}]
    const drr = cloneDeep(arr)
    arr[0].name.age = "456"
    console.log(arr, drr)
    打印arr为 arr-[{ name: { age: "456", brr: [5, 3, 4] }}]
    打印drr为 drr-[{ name: { age: "123", brr: [5, 3, 4] }}]