原生js中的深拷贝

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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);

Object.create()

Object.create() 是es6新增的语法，实现的方式是通过深拷贝原型链的

Object.create : 创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

关于new Object和Object.create的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// new Object() 方式创建
var a = {  rep : 'apple' }   
var b = new Object(a)
console.log("b = ",b)                			
console.log("b.__proto__ = ",b.__proto__)      	// 指向Object最顶级的原型链
console.log("b.rep = ",b.rep)            		
console.log("a===b",a===b);						//true

// Object.create() 方式创建
var a1 = { rep: 'apple' }   
var b1 = Object.create(a1)
console.log("b1 = ",b1)  						
console.log("b1.__proto__ = ",b1.__proto__)     // {rep: "apple"}  可以理解为继承一个对象, 添加的属性是在原型下。
console.log("b1.rep = ",b1.rep) 			    
console.log("a1===b1",a1===b1);					//false

函数库 lodash，提供 cloneDeep 实现

1.下载相关库

npm i –save lodash

2.在相关文件中引入

import _ from “lodash”

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

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