JS的深浅拷贝

最新推荐文章于 2025-04-03 15:51:02 发布
最新推荐文章于 2025-04-03 15:51:02 发布
阅读量376 收藏 7
点赞数 5
分类专栏： JS 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43780332/article/details/146910411
版权

今天记录一些JS中涉及深浅拷贝的函数，以及手写深拷贝的方法。

对象浅拷贝

  1. Object.assign({},obj1)
const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 1, b: 2 }
  1. 展开运算符
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // { a: 1, b: 2 }
  1. for in
const obj1 = { 
  a: 1, 
  b: 2, 
  c: { d: 4 }  // 嵌套对象
};

const obj2 = {}; // 空对象

for (const key in obj1) {
  if (obj1.hasOwnProperty(key)) {
    obj2[key] = obj1[key]; // 复制属性
  }
}

console.log(obj2); // 输出: { a: 1, b: 2, c: { d: 4 } }

之所以要进行hasOwnProperty()判断，是因为for in也会遍历对象原型链上的属性，所以要过滤掉它们
  1. Object.keys(obj).forEach()
const obj1 = { a: 1, b: 2, c: 3 };  // 原始对象
const obj2 = {};                    // 目标空对象

// 使用Object.keys和forEach复制属性
Object.keys(obj1).forEach((key) => {
    obj2[key] = obj1[key];  // 蓝色高亮的关键操作行
});

console.log(obj2);  // 输出: { a: 1, b: 2, c: 3 }

遍历对象所有的key，然后拷贝

对象深拷贝

  1. JSON.parse(JSON.stringify(obj))

    先用JSON.stringify(obj)把对象转化为JSON字符串

    然后再用JSON.parse()转化回对象

const obj = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    country: "USA"
  }
};

// 使用 JSON 方法实现深拷贝
const deepCopy = JSON.parse(JSON.stringify(obj));

console.log(deepCopy); // 输出: { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }

- 缺点：
    1. 无法拷贝函数（JSON在序列化时会忽略函数）

const obj = {
  a: 1,
  b: function() {
    console.log("hello");
  }
};

const newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj); // { a: 1 }，函数没有被拷贝

    2. 无法拷贝特殊对象，如Date、正则表达式

const obj = {
  date: new Date(),      // Date对象
  regex: /test/         // 正则表达式
};

const newObj = JSON.parse(JSON.stringify(obj));

console.log(newObj.date);  // 输出ISO格式字符串,而不是Date对象（如"2023-05-15T12:00:00.000Z"）
console.log(newObj.regex); // 输出空对象 {}

    3. 无法拷贝原型链上的属性

const protoObj = { c: 3 };  // 原型对象

// 创建以 protoObj 为原型的对象
const obj = Object.create(protoObj);
obj.a = 1;  // 添加实例属性
obj.b = 2;

// 通过 JSON 序列化/反序列化创建新对象
const newObj = JSON.parse(JSON.stringify(obj));

console.log(newObj.c);  // 输出: undefined

        obj的原型对象是protoObj
    4. 会忽略symbol和undefined属性

const obj = {
  a: undefined,          // undefined值
  b: Symbol('test')      // Symbol值
};

const newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);     // 输出: {}

数组浅拷贝

  1. arr.slice()
const arr1 = [1, 2, 3];          // 原始数组
const arr2 = arr1.slice();       // 使用slice()创建浅拷贝
console.log(arr2);               // 输出: [1, 2, 3]

arr.slice(2,3)：截取arr数组索引在[2,3)这个区间的值，返回新数组
  1. [].concat(arr)
const arr1 = [1, 2, 3];        // 原始数组
const arr2 = [].concat(arr1);  // 使用空数组concat方法创建浅拷贝
console.log(arr2);             // 输出: [1, 2, 3]

数组深拷贝

  1. JSON.parse(JSON.stringify())
const arr = [1, {a: 2}, [3]];
const deepCopy = JSON.parse(JSON.stringify(arr));

缺点：

- 会丢失 `undefined`、`Function`、`Symbol` 等特殊值
- 无法处理循环引用（会报错）
- `Date` 对象会转为字符串，`RegExp` 会变成空对象
  1. Lodash 的 _.cloneDeep()
import _ from 'lodash';
const arr = [{a: 1}, new Date()];
const deepCopy = _.cloneDeep(arr);

**特点**：
  - 支持所有标准JS类型
  - 自动处理循环引用

手写深拷贝

简易深拷贝

function deepClone(source) {
  if(typeof source != "object" || source == null){
    return source;
  }
  const target = Array.isArray(source) ? [] : {};
  
  // 无论是[]还是{}，都可以通过for in遍历所有属性
  for(const key in source){
    // 如果当前所遍历的属性是object，则递归调用deepClone
    // 如果当前的属性是基本类型，则直接返回
    if(typeof source[key] === "object" && source[key] != null) {
      target[key] = deepClone(source[key]);
    }else{
      target[key] = source[key];
    }
  }
  return target;
}

const original = {
  number: 123,
  string: "hello",
  array: [1,2,3],
  obj: {
    prop1:"test",
    prop2: {
      nested: "test2",
    },
  },
};

const cloned = deepClone(original)

console.log(cloned);

不过这个还是有一些bug，比如循环引用的问题：

const obj = { 
  a: 1, 
  b: { 
    c: 2 
  } 
};
obj.self = obj;  // 创建循环引用
const copy = deepClone(obj);  // 深拷贝操作
console.log(copy);  // 输出克隆结果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

因为obj.self() = obj会导致循环引用，在克隆时会无限调用，会出现栈溢出的情况

解决循环引用问题

可以使用map解决循环依赖的问题

function deepClone(source, clonedMap = new Map()) {
  if(typeof source != "object" || source == null){
    return source;
  }
  
  // 如果这个对象已经被拷贝过，直接从Map中返回
  if(clonedMap.has(source)){
    return clonedMap.get(source);
  }
  
  const target = Array.isArray(source) ? [] : {};
  
  // 在Map中记录这个对象
  clonedMap.set(source, target);
  
  for(const key in source){
    if(typeof source[key] === "object" && source[key] != null) {
      target[key] = deepClone(source[key],clonedMap);
    }else{
      target[key] = source[key];
    }
  }
  return target;
}

const original = {
  number: 123,
  string: "hello",
  array: [1,2,3],
  obj: {
    prop1:"test",
    prop2: {
      nested: "test2",
    },
  },
};

const cloned = deepClone(original)

console.log(cloned);

现在仍然存在一些问题：

  • Date对象无法拷贝
  • 正则表达式无法拷贝
// 日期对象深拷贝示例
const originalDateObj = {
  date: new Date()  // 创建Date对象
};
const clonedDateObj = deepClone(originalDateObj);
console.log(originalDateObj.date); // 原始的Date对象
console.log(clonedDateObj.date);   // 拷贝的Date对象

// 正则表达式对象深拷贝示例
const originalRegExpObj = {
  regExp: /abc/gi  // 创建正则表达式
};
const clonedRegExpObj = deepClone(originalRegExpObj);
console.log(originalRegExpObj.regExp); // 原始的正则表达式对象
console.log(clonedRegExpObj.regExp);   // 拷贝后的正则表达式对象

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

支持拷贝Date和正则表达式：

所以为什么无法拷贝Date和正则表达式？

问题就出在这一句上

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们只是判断了当前元素是否是一个数组，所以如果当前对象是Date或正则表达式，我们只会创建一个{}

这是不行的，我们需要更细致的分类讨论：

if(Array.isArray(source)){
  target = [];
}else if(source instanceof Date){
  target = new Date(source);
}else if(source instanceof RegExp){
  target = new RegExp(source.source,source.flags);
}else{
  target = {};
}

完整版：

function deepClone(source, clonedMap = new Map()) {
  if(typeof source != "object" || source == null){
    return source;
  }
  
  // 如果这个对象已经被拷贝过，直接从Map中返回
  if(clonedMap.has(source)){
    return clonedMap.get(source);
  }
  
  if(Array.isArray(source)){
    target = [];
  }else if(source instanceof Date){
    target = new Date(source);
  }else if(source instanceof RegExp){
    target = new RegExp(source.source,source.flags);
  }else{
    target = {};
  }
  
  // 在Map中记录这个对象
  clonedMap.set(source, target);
  
  for(const key in source){
    if(typeof source[key] === "object" && source[key] != null) {
      target[key] = deepClone(source[key],clonedMap);
    }else{
      target[key] = source[key];
    }
  }
  return target;
}

const original = {
  number: 123,
  string: "hello",
  array: [1,2,3],
  obj: {
    prop1:"test",
    prop2: {
      nested: "test2",
    },
  },
};

const cloned = deepClone(original)

console.log(cloned);

此时再来试一试：

// 日期对象深拷贝示例
const originalDateObj = {
  date: new Date()  // 创建Date对象
};
const clonedDateObj = deepClone(originalDateObj);
console.log(originalDateObj.date); // 原始的Date对象
console.log(clonedDateObj.date);   // 拷贝的Date对象

// 正则表达式对象深拷贝示例
const originalRegExpObj = {
  regExp: /abc/gi  // 创建正则表达式（带g和i标志）
};
const clonedRegExpObj = deepClone(originalRegExpObj);
console.log(originalRegExpObj.regExp); // 原始的正则表达式对象
console.log(clonedRegExpObj.regExp);   // 拷贝后的正则表达式对象

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

其实这个代码还是有问题的，它无法拷贝Symbol

支持拷贝Symbol类型

那么为什么拷贝不了Symbol类型属性？

问题就出在for in循环，for in循环是无法遍历Symbol类型的

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

所以在for in结束后应该单独判断一下所有的Symbol类型属性

const symbolKeys = Object.getOwnPropertySymbols(source)
for(const symKey of symbolKeys){
  target[symmKey] = deepClone(source[symKey],clonedMap);
}

完整版：

function deepClone(source, clonedMap = new Map()) {
  // 如果是基本数据类型则直接返回，否则走深拷贝步骤
  if(typeof source != "object" || source == null){
    return source;
  }
  
  // 如果Map中已经有当前对象了，则直接返回（防止循环引用导致栈溢出）
  if(clonedMap.has(source)){
    return clonedMap.get(source);
  }
  
  // 判断四种类型：对象、数组、Date、正则表达式
  if(Array.isArray(source)){
    target = [];
  }else if(source instanceof Date){
    target = new Date(source);
  }else if(source instanceof RegExp){
    target = new RegExp(source.source,source.flags);
  }else{
    target = {};
  }
  
  // 在Map中记录这个对象
  clonedMap.set(source, target);
  
  // 遍历属性，进行深拷贝
  for(const key in source){
    if(typeof source[key] === "object" && source[key] != null) {
      target[key] = deepClone(source[key],clonedMap);
    }else{
      target[key] = source[key];
    }
  }
  
  // 克隆Symbol属性
  const symbolKeys = Object.getOwnPropertySymbols(source)
  for(const symKey of symbolKeys){
    target[symmKey] = deepClone(source[symKey],clonedMap);
  }
  
  return target;
}

const original = {
  number: 123,
  string: "hello",
  array: [1,2,3],
  obj: {
    prop1:"test",
    prop2: {
      nested: "test2",
    },
  },
};

const cloned = deepClone(original)

console.log(cloned);

注意：

这个深拷贝，原型链上的属性也会拷贝，如果不想拷贝，那就要在for in循环时判断一下，如果属于自身属性才进行下一步：

function deepClone(target, source) {
  for (const key in source) {
    // 判断是否属于自身的属性 
    if (Object.hasOwnProperty.call(source, key)) {
      if (typeof source[key] === 'object' && source[key] !== null) {
        target[key] = deepClone({}, source[key]);  
      } else {
        target[key] = source[key];  
      }
    }
  }
  return target;
}
js中的深浅拷贝问题简析
10-17
在JavaScript中，我们经常会遇到需要拷贝...总的来说，理解JavaScript中深浅拷贝的概念和区别，有助于我们编写更加健壮和高效的代码。在实际开发中，根据数据结构的复杂度和业务需求来选择合适的拷贝方式是至关重要的。
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
12-09
说到深浅拷贝，必须先提到的是JavaScript的数据类型，之前的一篇文章JavaScript基础心法——数据类型说的很清楚了，这里就不多说了。 需要知道的就是一点：JavaScript的数据类型分为基本数据类型和引用数据类型。 ...
JavaScript深浅拷贝
码农键盘上的梦
03-16 594
在前端开发中，有时我们需要对一个复杂的数据结构进行变换，例如将一个嵌套的对象转换为数组或将一个数组转换为嵌套的对象。深拷贝是对对象或数组进行递归复制，复制整个对象的所有层次，这样就可以避免对象中的引用类型的属性共享的问题。浅拷贝是对对象或数组进行浅层复制，只复制对象的一层属性，当复制的对象中有引用类型的属性时，复制出来的对象和原对象会共享引用类型的属性。通过展开一个对象，可以将其属性复制到新的对象中。总之，在前端开发中，深拷贝是非常常见的场景，可以帮助我们处理复杂的数据结构，并保持代码的稳定性和可维护性。
js深浅拷贝
狼道的博客
01-08 372
讲到深浅拷贝，涉及到JavaScript的数据类型。js中的数据类型分为基础型和引用型。基础型存储在栈中，引用类型存储在堆中。 基础类型并没有深浅拷贝之说，这里所说的深浅拷贝针对的是引用类型数据而言（牢牢记住这句）。 通俗点讲，区分深/浅拷贝，就是假设B复制了A，当修改A时，如果B也跟着变了，说明这是浅拷贝，如果B没变，那就是深拷贝。 for..in循环遍历所有可枚举的属性的键，包括继承来的...
JavaScript深浅拷贝区别
Sfh的博客
07-05 3710
分享一篇自己关注的微信订阅号（前端大全）文章：JavaScript浅拷贝与深拷贝 作者：浪里行舟 https://github.com/ljianshu/Blog/issues/5 这里很详细的讲解了深浅拷贝的原理，个人觉得讲的比较不错，放上来留个笔记，下面是拷贝过来的内容： 一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。 基本数据类型的特点：直接存储在栈(stack)中的数据 引用数据类型的特点：存储的
javaScript深浅拷贝详解及手动实现
m0_58426119的博客
03-21 1819
拷贝指的就是将某个变量的值复制给另外一个变量的过程，关于拷贝可以分为浅拷贝与深拷贝。 针对不同的数据类型，浅拷贝与深拷贝会有不同的表现，主要表现于基本数据类型和引用数据类型在内存中存储的值不同。 对于基本数据类型，变量存储的是值本身， 对于引用数据类型，变量存储的是值在内存中的地址，如果有多个变量同时指向同一个内存地址，其中对一个变量的值进行修改以后，其它的变量也会受到影响。 var arr=[1,23,33] var arr2=arr arr2[0]=10; console.log(arr) /
JS深浅拷贝
m0_66477165的博客
03-19 908
1. Js 深浅拷贝的区别 要明白的这个问题还要从js 的数据类型说起 1.1 javascript 的的数据类型和它们在程序中存储的位置 javascript 有两种数据类型 基本数据类型：它是简单的数据段，包含新增的一共7种 String、Number、Boolean、Null、Undefined、Symbol BigInt 引用类型: 对象,数组,函数 ,日期对象,正则对象 1.2 javascript 的变量存储方式 栈内存(stack) ： 自动分配内存空间，系统自动释放。 堆内存(
详谈JavaScript深浅拷贝
通俗易懂
05-05 448
详谈JavaScript深浅拷贝 目录详谈JavaScript深浅拷贝为什么？浅拷贝深拷贝 为什么？ 什么是拷贝：复杂粘贴 为什么分深浅拷贝： JavaScript里面的数据存储分为两种： 简单数据类型：存储在栈里面 复杂数据类型：地址存在栈里面，数据存储在堆里面 而复杂粘贴是在操作栈里面的数据 需要使用的数据： let obj = { name: 'JavaScript', ...
javascript之深浅拷贝
编程界明世隐的博客
12-05 3092
浅拷贝： 浅拷贝只拷贝基本类型的数据，而符合类型的数据只复制指向其的指针，而不复制对象本身，新旧对象还是共享同一块内存。 深拷贝： 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 浅拷贝的实例: /** * 浅拷贝 * * @param {Object} target 目标对象 * @param {Object} source 源对象 * @return {Object} 返回目标对象 */ function extend(target, s
JavaScript深浅拷贝原理实现
weixin_46734347的博客
06-05 381
JS深浅拷贝与赋值 JavaScript基本数据类型的变量存储在栈中，引用数据类型则存储在堆中，但是引用数据类型的存储地址则保存在栈中。 赋值 当我们把一个对象赋值给一个新的变量时候，赋的其实是该对象在栈中的地址，而不是堆中的数据，也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。 var programmer = { name: '张三', attr: ['前端', ['Vue', 'React', 'Angular'], '后端
Javascript中的深浅拷贝以及实现方法
weixin_74457498的博客
11-13 1624
Javascript中的深浅拷贝以及实现方法
js 深浅拷贝
可以叫我啪叽的石头
08-23 479
还是京东的面试： 小姐姐问了一个深浅拷贝的问题，然鹅我不会。。 只能回来填坑了。。 整理一下： js有基本类型和引用类型，当把对象赋给另一个对象的时候，修改被复制的对象的属性时，赋值的对象的属性也会被修改，这是因为对象存储的都是一块内存地址，也就是指向的都是同一内存，故修改时都会发生修改 浅复制：只会将对象的各个属性进行依次复制，并不会进行递归复制，而js存储对象都是存地址的，所以会导致引...
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
11-20
本文实例讲述了JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）。分享给大家供大家参考，具体如下： 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。  浅拷贝 只是拷贝了基本类型的数据，而引用类型...
详细分析JavaScript中的深浅拷贝
01-18
在说JS中深浅拷贝之前，我们需要对JS中的数据类型有所了解，分为基本数据类型与引用数据类型，对于基本数据类型并没有深浅拷贝的说法，深浅拷贝主要针对引用数据类型。 一、浅拷贝 浅拷贝只复制了引用，并没有复制...
React PDF Annotation plugin library online API examples
WCX_joker的博客
04-03 568
The API includes ① Export edited PDF data; ② Export annotations json data; ③ Reload old annotations; ④ Change files; ⑤ Set member info; ⑥ Clear annotations and other data processing functions
elementui的默认样式修改
cxsj999的博客
03-31 249
可是我想让提示的位置到下面来，该怎么办？最后还是看了官方的api。原来有个自定义样式属性。
20250331-vue-组件事件1触发与监听事件
xiezhuangshunv的博客
03-31 382
和原生DOM事件不一样，组件触发的时间没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个全局状态管理方案。像组件与 prop 一样，事件的名字也提供了自动的格式转换。像3中的代码也可以这样写。父组件代码不变，子组件代码如下。这样点击效果就只会出现一次。
《无人茶室系统核心技术解析：从0到1打造高效智能管理平台》
weixin_62330360的博客
04-01 608
本文深入解析了无人茶室系统的核心技术，涵盖Spring Boot 后台、uni-app 用户端、Vue 管理后台的完整开发流程，并探讨了性能优化方案。你是否在开发类似项目时遇到挑战？欢迎在评论区交流你的经验！📌推荐阅读Spring Boot 官方文档MyBatis-Plus 官方文档uni-app 官方文档。
网络空间安全（50）JavaScript基础语法
最新发布
m0_73399576的博客
04-03 299
网络空间安全——JavaScript基础语法篇
JavaScript深浅拷贝原理与递归实现详解
在前端JavaScript中，深浅拷贝是一个关键概念，尤其是在处理复杂数据类型如对象和数组时。深浅拷贝主要涉及原始数据类型（基本类型）和引用数据类型（如对象）之间的差异。基本数据类型包括Boolean、Null、Undefined...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值