JavaScript浅拷贝和深拷贝

简介: JavaScript浅拷贝和深拷贝

浅拷贝和深拷贝的区别

浅拷贝:浅拷贝是指创建一个新对象,新对象的属性值与原对象的属性值相同,都指向同一内存地址,如果新对象发生变化,原对象也会发生变化。

深拷贝:深拷贝是创建一个新对象,新对象会拷贝原对象的所以数据,新对象发生变化时原对象不会发生改变。

浅拷贝

浅拷贝可以通过Object.assign来实现

const obj = {}  //创建一个新对象obj
const objSort{ //原对象
  name:'张三',
  value:{
    age:18
  }
};
Object.assign(obj,objSort); //第一项是接收数据的对象,第二项为copy的对象
console.log(obj);

深拷贝

深拷贝此方法利用递归实现深拷贝

var obj={ //原数据
  name:'张三',
  value:{
    age:18,
    phone:13726378291
  },
  fn:function(){
  },
  nabs:[1,2,3,[22,33]]
}
function copy(obj){
  //定义一个变量用来存储copy的数据
  const newobj=null;
  //判断对象是否为复杂数据类型,如果是就调用自己然后继续循环,如果不是,直接赋值
  if(typeof(obj)=='object' && obj !== 'null'){
    //了解instanceof是干什么用的
    //它是一种检验数据类型的方法
    //instanceof它是检查一个对象是否数据某个类或者构造函数,如,obj.instanceof===Array,可以检查obj是否为Aray类型。
    //所以这行的意思就是通过定义了一个存储拷贝过来的值,然后通过不同的,根据参数的具体数据类型然后声明不同的类型然后存储
    newobj = obj instanceof Array? [] : {}; 
    //循环obj 中的每一项,查看obj中是否还有复杂数据类型,如果里面还有复杂数据类型,就直接利用递归再次调用copy函数
    for(var i in obj){
       newobj[i] = copy(obj[i])
    }
  }else{
    newobj=obj
  }
  //注意函数必须要是返回值,不然会出现undefined
  return newobj
}
var obj2 = copy(obj)
obj2.name = 'ok'
obj2.value.age = 20
console.log(obj,obj2)

上述代码就是JavaScript中的深浅拷贝。

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
45 4
|
2月前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
22 3
|
3月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
40 2
|
3月前
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
62 1
|
3月前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
28 0
|
3月前
|
JavaScript 前端开发
js中浅拷贝,深拷贝的实现
js中浅拷贝,深拷贝的实现
33 0
|
3月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
4月前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
35 0
|
4月前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
148 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2