js实现深拷贝和浅拷贝

最新推荐文章于 2024-09-03 09:57:48 发布

原创最新推荐文章于 2024-09-03 09:57:48 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#深拷贝 #浅拷贝 #拷贝 #面试

面试专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了浅拷贝与深拷贝的区别，通过实例展示了如何使用JavaScript实现这两种拷贝方式，并深入探讨了它们在不同场景下的应用及潜在问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浅拷贝：有拷贝的功能，但是只能拷贝一层，是浅拷贝。

一、使用展开运算符（也叫剩余运算符）...

let obj = {name:'gjf',age:{age:18}};
let newObj = {...obj};
obj.age.age = 25; //修改第二层的obj.age.age,newObj.age.age也会跟着变化
console.log(newObj) // {name:'gjf',age:{age:25}}

注意：数据的slice和concat方法也是浅拷贝，只能拷贝一层

深拷贝：你给我什么，我就返给你一个，返还的这个和你以前的那个是两个东西。

一、使用JSON.stringify()和JSON.parse()

原理：把一个对象转化成一个字符串，再把这个字符串转化成一个对象；

let obj = {name:'gjf',age:{age:18}};
let newObj = JSON.parse(JSON.stringify(obj));
obj.age.age = 25; //修改obj.age.age的值
console.log(newObj) //{name:'gjf',age:{age:18}} //并不影响newObj

使用这种方法有一些问题例如：

let obj = {name:'gjf',age:{age:18},a:/\d/,b:function(){},c:undefined};
let newObj = JSON.parse(JSON.stringify(obj));
obj.age.age = 25; //修改obj.age.age的值
console.log(newObj) //{name:'gjf',age:{age:18},a:{}} 会丢失值

注意：这种方式转不了正则、函数、时间和undefined，会丢失值；

二、实现深拷贝

实现深拷贝之前来点面试小知识

//null == undefined true     null === undefined  false
//[] == '' true              [] === ''   false
//双等是要先进行类型转化再比较所以是true，三等不进行类型转化直接比较所以是false

深拷贝方法：

// 数字 字符串 function是不需要拷贝的
function deepClone(value) { // null
  if (value == null) return value;
  if (typeof value !== 'object') return value;
  if (value instanceof RegExp) return new RegExp(value);
  if (value instanceof Date) return new Date(value);
  // 我要判断 value 是对象还是数组 如果是对象 就产生对象 是数组就产生数组
  let obj = new value.constructor;
  for(let key in value){
    obj[key] = deepClone(value[key]); // 看一看当前的值是不是一个对象
  }
  return obj;
}

好了，我们的深拷贝方法就这样完成了，绝对好用！！！