js中实现深拷贝的4种方法

js中深拷贝的方法

原生js中递归函数拷贝

将数据中所有的数据拷贝下来，对拷贝之后的数据进行修改不会影响到原数据 ,两个对象或数组不共享一块内存

  <script>
    let obj={
      abc:'123',
      def:[{a:1,b:2,c:3},{q:8,w:9}],
      qwe:{e:4,f:5}
    }
    //需求将obj这个对象拷贝出一个新对象修改新对象的值不会影响原对象的值
    //定义一个函数
    
    function copyobj(oldobj){
      //定义一个变量接收新对象
      let newObj=null
      //判断这个对象还是数组
      //1.如果是数组 
      if(oldobj instanceof Array){
        newObj=[]
        oldobj.forEach(item => {
          newObj = copyobj(item)
        }); 
        //2.如果是对象
      }else if(oldobj instanceof Object){
        newObj={}
        for(var i in oldobj){
         newObj[i]=copyobj(oldobj[i])
        }
      }else {
        newObj=oldobj
      }
    return newObj
    }
    let news=copyobj(obj)
    console.log(news);
  </script>

Object.create()

Object.create() 实现的是深拷贝通过原型链的方式

new Object() 实现的浅拷贝修改原数据新拷贝的数据也会随之改变

<script>
    let a1={
      abc:'123',
      def:[{a:1,b:2,c:3},{q:8,w:9}],
      qwe:{e:4,f:5}
    }
//new Object() 实现的浅拷贝修改原数据新拷贝的数据也会随之改变
    let b1=new Object(a1)
    console.log(b1); //{abc:'123',def:[{a:1,b:2,c:3}{q:8,w:9}],qwe:{e:4,f:5}}
    b1.abc="qqqq"
    console.log(a1,b1); 
//a1对应的值{abc:'qqqq',def:[{a:1,b:2,c:3}{q:8,w:9}],qwe:{e:4,f:5}}
//b1对应的值{abc:'qqqq',def:[{a:1,b:2,c:3}{q:8,w:9}],qwe:{e:4,f:5}}

//Object.create() 实现的是深拷贝通过原型链的方式
    var a = { rep: 'apple' }
    var b = Object.create(a)
    console.log(b); //{ rep: 'apple' }
    b.rep='www'
    console.log(a,b);// { rep: 'apple' }，{ rep: 'www' }
</script>

jQuery 中$.extend

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

$.extend( [deep ], target, object1 [, objectN ] )

deep 可选，Boolean类型 指示是否深度合并对象，默认为false。如果该值为true

target Object类型 目标对象

object1 可选。 Object类型 第一个被合并的对象。

var obj = {};
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(deep,obj, object); //obj = { name: 'Bruce', career: "doctor" }

函数库 lodash，提供 cloneDeep 实现

1.下载相关库

npm i --save lodash

2.在相关文件中引入

import _ from "lodash"

3.调用 _.cloneDeep() 方法实现深拷贝

<script>
import _ from "lodash"
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]); //false
</script>