JS深浅拷贝实现方法,js深拷贝的三种实现方式

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>