JS高级 之 深拷贝 && 浅拷贝

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量468 收藏
点赞数 1
分类专栏： JS高级 文章标签： javascript 前端 vue.js 深拷贝 浅拷贝
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a15297701931/article/details/126711180
版权

目录

一、浅拷贝的实现

1. Object.assgin

2. 展开运算符

3. Array.prototype.concat

4. Array.prototype.slice

二、深拷贝的实现

0. 判断一个值是否是对象类型

1. JSON实现

2. 手写深拷贝函数

01 - 基本手写

02 - 优化 => 数组

03 - 优化 => 函数、Set、Map、Symbol

04 - 优化 => 循环引用 

04 - 最终方案 

一、浅拷贝的实现

1. Object.assgin

const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder'
  }
};

// 浅拷贝
const info = Object.assign({}, obj);
console.log(info); // { name: 'star', age: 18, friend: { name: 'coder' } }

// 修改引用类型数据，同时会更改
obj.friend.name = '123';
console.log(info); // { name: 'star', age: 18, friend: { name: '123' } }

2. 展开运算符

const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder'
  }
};

// 浅拷贝
const info = { ...obj };
console.log(info); // { name: 'star', age: 18, friend: { name: 'coder' } }

// 修改引用类型数据，同时会更改
obj.friend.name = '123';
console.log(info); // { name: 'star', age: 18, friend: { name: '123' } }

3. Array.prototype.concat

const arr = [1, { name: 'coder' }, '4'];

// 浅拷贝
const info = [].concat.call(arr, [{ age: 18 }]);
// const info = Array.prototype.concat.call(arr, [{ age: 18 }]);

console.log(info); //[ 1, { name: 'coder' }, '4', { age: 18 } ]

// 修改引用类型数据，同时会更改
arr[1].name = '123';
console.log(info); // [ 1, { name: '123' }, '4', { age: 18 } ]

4. Array.prototype.slice

const arr = [1, 2, { name: 'coder' }, '4'];

// 浅拷贝
const info = [].slice.call(arr);
// const info = [].slice.call(arr, 0);
// const info = [].slice.call(arr, 0, 4);
// const info = Array.prototype.slice.call(arr);

console.log(info); // [ 1, 2, { name: 'coder' }, '4' ]

// 修改引用类型数据，同时会更改
arr[2].name = '123';
console.log(info); // [ 1, 2, { name: '123' }, '4' ]

二、深拷贝的实现

0. 判断一个值是否是对象类型

// 判断一个标识符是否是对象类型
function isObject(value) {
  const valueType = typeof value;
  return value !== null && (valueType === 'object' || valueType === 'function');
}

1. JSON实现

const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder',
    arr: [1, 2, 3, 4]
  }
};

// 深拷贝
const info = JSON.parse(JSON.stringify(obj));
console.log(info);

// 修改原来属性，不会影响新创建的对象
obj.friend.name = '123';

console.log(info);

缺点 : 

        1. function 不会被转化，直接忽略掉了

        2. symbal 不会被转化，直接忽略掉了

        3. 存在undefined、NaN 之类情况会转化错误

        4. 存在循环引用的情况直接报错

2. 手写深拷贝函数

01 - 基本手写

function isObject(value) {
  const valueType = typeof value;
  return value !== null && (valueType === 'object' || valueType === 'function');
}

function deepCopy(originValue) {
  // 1. 如果不是引用类型，直接返回
  if (!isObject(originValue)) {
    return originValue;
  }
  // 2. 创建新对象
  const newObj = {};
  for (const key in originValue) {
    // 3. 赋值的时候，进行递归
    newObj[key] = deepCopy(originValue[key]);
  }
  // 4. 返回新对象
  return newObj;
}

const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder'
  }
};

// 深拷贝
const info = deepCopy(obj);
console.log(info);

// 修改原来属性，不会影响新创建的对象
obj.friend.name = '123';

console.log(info);

02 - 优化 => 数组

function isObject(value) {
  const valueType = typeof value;
  return value !== null && (valueType === 'object' || valueType === 'function');
}

function deepCopy(originValue) {
  // 1. 如果不是引用类型，直接返回
  if (!isObject(originValue)) {
    return originValue;
  }
  // 2. 创建新对象 | 数组
  const newObj = Array.isArray(originValue) ? [] : {};
  for (const key in originValue) {
    // 3. 赋值的时候，进行递归
    newObj[key] = deepCopy(originValue[key]);
  }
  // 4. 返回新对象
  return newObj;
}

const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder',
    info: [1, 2, 3, 4, 5]
  }
};

// 深拷贝
const info = deepCopy(obj);
console.log(info);
obj.age = 20;
console.log(info);

03 - 优化 => 函数、Set、Map、Symbol

function isObject(value) {
  const valueType = typeof value;
  return value !== null && (valueType === 'object' || valueType === 'function');
}

// 深拷贝函数
function deepCopy(originValue) {
  /**
   * 值是 symbol数据类型
   * 需写在基本数据类型之前，否则会被返回错误
   */
  if (typeof originValue === 'symbol') {
    return Symbol(originValue.description);
  }
  /**
   * 基本数据类型，直接返回
   */
  if (!isObject(originValue)) {
    return originValue;
  }
  /**
   * 函数类型
   * 不需要拷贝，直接返回
   */
  if (typeof originValue === 'function') {
    return originValue;
  }
  /**
   * set类型
   * 因为set类型不能被for...in，所以单独处理
   */
  if (originValue instanceof Set) {
    const newSet = new Set();
    for (const item of originValue) {
      newSet.add(deepCopy(item));
    }
    return newSet;
  }
  /**
   * map类型
   * 因为set类型不能被for...in，所以单独处理
   */
  if (originValue instanceof Map) {
    const newMap = new Map();
    for (const [key, value] of originValue) {
      newMap.set(deepCopy(key), deepCopy(value));
    }
    return newMap;
  }
  /**
   * 对象，数组类型
   */
  const newObj = Array.isArray(originValue) ? [] : {};
  // one - 遍历普通的key
  for (const key in originValue) {
    newObj[key] = deepCopy(originValue[key]);
  }
  // two - 遍历Symbol的key
  const symbolKeys = Object.getOwnPropertySymbols(originValue);
  for (const symbolKey of symbolKeys) {
    newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey]);
  }
  // 4. 返回新对象 | 数组
  return newObj;
}

const symbolKey = Symbol('key是Symbol');
const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder',
    info: [1, 2, 3, 4, 5]
  },
  play() {
    console.log('playing!');
  },
  set: new Set([1, 22, 3]),
  map: new Map([
    [{ name: 5 }, 5],
    [6, { name: 6 }]
  ]),
  [symbolKey]: 'key是Symbol',
  symbolValue: Symbol('value是Symbol')
};

// 深拷贝
const info = deepCopy(obj);
console.log(info);

04 - 优化 => 循环引用 

function isObject(value) {
  const valueType = typeof value;
  return value !== null && (valueType === 'object' || valueType === 'function');
}

/**
 * 循环引用解决方案 :
 * 拷贝过的对象，不需要再次拷贝，直接返回即可
 *    1. 使用 WeakMap 进行弱引用，用来判断是否拷贝过
 *    2. 使用同一个 WeakMap
 */
function deepCopy(originValue, map = new WeakMap()) {
  if (typeof originValue === 'symbol') {
    return Symbol(originValue.description);
  }

  if (!isObject(originValue)) {
    return originValue;
  }

  if (typeof originValue === 'function') {
    return originValue;
  }

  if (originValue instanceof Set) {
    const newSet = new Set();
    for (const item of originValue) {
      // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
      newSet.add(deepCopy(item, map));
    }
    return newSet;
  }

  if (originValue instanceof Map) {
    const newMap = new Map();
    for (const [key, value] of originValue) {
      // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
      newMap.set(deepCopy(key, map), deepCopy(value, map));
    }
    return newMap;
  }

  /**
   * 每次创建对象前，判断map中是否已经拥有了 => 即是否已经拷贝过了
   * 如果有，直接返回以前创建的对象
   */
  if (map.get(originValue)) {
    return map.get(originValue);
  }
  const newObj = Array.isArray(originValue) ? [] : {};
  /**
   * 1. 每次创建新对象后，推入 WeakMap 中，用来保存
   * 2. 当前的对象的地址作为 key ，值为新创建出来的对象
   */
  map.set(originValue, newObj);

  for (const key in originValue) {
    // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
    newObj[key] = deepCopy(originValue[key], map);
  }
  const symbolKeys = Object.getOwnPropertySymbols(originValue);
  for (const symbolKey of symbolKeys) {
    // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
    newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map);
  }
  return newObj;
}

const symbolKey = Symbol('key是Symbol');
const obj = {
  name: 'star',
  age: 18,
  friend: {
    name: 'coder',
    info: [1, 2, 3, 4, 5]
  }
};
// 自己引用自己
obj.obj = obj;

// 深拷贝
const info = deepCopy(obj);
console.log(info);

04 - 最终方案 

// 判断一个值是否是对象类型
function isObject(value) {
  const valueType = typeof value;
  return value !== null && (valueType === 'object' || valueType === 'function');
}
// 深拷贝函数
function deepCopy(originValue, map = new WeakMap()) {
  if (typeof originValue === 'symbol') {
    return Symbol(originValue.description);
  }
  if (!isObject(originValue)) {
    return originValue;
  }
  if (typeof originValue === 'function') {
    return originValue;
  }
  if (originValue instanceof Set) {
    const newSet = new Set();
    for (const item of originValue) {
      newSet.add(deepCopy(item, map));
    }
    return newSet;
  }
  if (originValue instanceof Map) {
    const newMap = new Map();
    for (const [key, value] of originValue) {
      newMap.set(deepCopy(key, map), deepCopy(value, map));
    }
    return newMap;
  }

  if (map.get(originValue)) {
    return map.get(originValue);
  }
  const newObj = Array.isArray(originValue) ? [] : {};
  map.set(originValue, newObj);
  for (const key in originValue) {
    newObj[key] = deepCopy(originValue[key], map);
  }
  const symbolKeys = Object.getOwnPropertySymbols(originValue);
  for (const symbolKey of symbolKeys) {
    newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map);
  }
  return newObj;
}

玄鱼殇
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中的深拷贝和浅拷贝总结
01-08
目录 一、概念 1、浅拷贝 2、深拷贝 二、实现方式 1、浅拷贝的实现方式 1.1 Object.assign(target,source)方法 1.2 Array.prototype.concat()方法 1.3 Array.prototype.slice(start,end)方法 2、深拷贝的实现方式 2.1 JSON.parse(JSON.stringify(obj)) 2.2 lodash函数库 3.3 手写递归方法 一、概念 JavaScript中的数据分为基本类型和引用类型，一般基本类型的数据占用内存大小确定，保存于栈中；引用类型的数据由于在创建之初数据占用内存的大小不确定，但是保
JavaScript深拷贝和浅拷贝概念与用法实例分析
01-19
本文实例讲述了JavaScript深拷贝和浅拷贝概念与用法。分享给大家供大家参考，具体如下： js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。 概念1：浅拷贝 浅拷贝就是指拷贝引用，新生成的引用和原来的引用都是指向同一个对象的实例，彼此之间的操作会相互影响。 概念2:深拷贝 在堆中重新开辟内存，把原引用对应的对象实例中所有的内容进行拷贝，因此保证了深拷贝的对象和原来的对象是完全隔离的，他们之间相互没有影响。 概念3:数组深拷贝的实现
JS浅拷贝和深拷贝原理与实现方法分析
12-11
本文实例讲述了JS浅拷贝和深拷贝原理与实现方法。分享给大家供大家参考，具体如下： 浅拷贝只会拷贝一层，深层的引用类型改变还是会受到影响。 深拷贝是所有内部的属性还有值都被拷贝了一份，不管深层的引用类型怎么改都不会受到影响。 浅拷贝的实现方式 1、自定义函数 function shallowClone (initalObj) { var obj = {}; for ( var i in initalObj) { obj[i] = initalObj[i]; } return obj; } 2、ES6 的 Object.assign() let newObj
JS中实现浅拷贝和深拷贝的代码详解
10-16
JavaScript的变量中包含两种类型的值：基本类型值 和 引用类型值，这篇文章主要介绍了JS中实现浅拷贝和深拷贝,需要的朋友可以参考下
Javascript 浅拷贝、深拷贝的实现代码
10-30
Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢 答案是克隆.
JavaScript知识之 浅拷贝与深拷贝
kart jim的CSDN博客
04-07 1134
js浅拷贝与深拷贝
你最少用几行代码实现深拷贝？
m0_74931226的博客
11-24 349
对于深拷贝的实现，可能存在很多不同的实现方式，关键在于理解其原理，并能够记住一种最容易理解和实现的方式，面对类似的问题才能做到临危不乱，泰然自若。上面的实现你觉得哪个更好呢？欢迎大佬们在评论区交流~
深拷贝，浅拷贝 set map symbol 模块化
zcj的博客
11-22 340
深拷贝，浅拷贝 set map symbol 模块化 1.深拷贝和浅拷贝 1.1 深拷贝 定义：拷贝一个对象时，如果属性是复杂数据类型，则拷贝的只是该数据的内存地址。 注意：要想达到深复制就需要用递归 1.2 浅拷贝 定义：拷贝一个对象时，如果属性是复杂数据类型，则创建一个新的对象，指向新的对象的内存地址。 深拷贝与浅拷贝的区别 在于是否真正获取一个对象的复制实体，而不是引用。 1.3 案例 <script> var obj = { a: 1, arr: [1,
集合(set) 深浅拷贝
weixin_30810583的博客
06-06 1000
set集合 , 深浅拷⻉以及部分知识点补充 ⼀. 基础数据类型补充 1. join() 加入 split的逆反 把列表转化为字符串 ,也可以遍历字符串 不能是整型 用于转换类型 join 是遍历(迭代)方式添加 li = ["李嘉诚", "麻花藤", "⻩海峰", "刘嘉玲"] s = "_".join(li) print(s) # 打印结果 李嘉诚_麻花藤_⻩海峰_刘嘉玲 li = ...
【Java深入】深拷贝与浅拷贝详解
热门推荐
白夜行
05-13 2万+
1.拷贝的引入（1）引用拷贝创建一个指向对象的引用变量的拷贝。例1：Teacher teacher = new Teacher("Taylor",26); Teacher otherteacher = teacher; System.out.println(teacher); System.out.println(otherteacher);输出结果：blog.Teacher@355da254 bl
ECMAScript5，6，7从基本语法到高级函数
悦分享
05-03 407
尚硅谷ES5_6_7教程 (01. 尚硅谷_ECMAScript入门介绍&) 01. 尚硅谷_ECMAScript入门介绍& <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECMAScript理解</t...
【javaScript】学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）
weixin_51233575的博客
04-24 6082
文章目录【1】基本总结深入一、什么是数据1、数据类型基本（值）类型对象（引用）类型2、判断相关问题二、什么是内存1、什么是数据2、什么是内存？3、什么是变量4、内存、数据、变量三者之间的关系相关问题1、问题：var a = xxx，a内存中到底保存的是什么？2、关于引用变量赋值问题3、在js调用函数传递变量参数时，是值传递还是引用传递4、JS引擎如何管理内存三、什么是对象1、什么是对象2、为什么要用对象3、对象的组成4、如何访问对象内部数据5、什么时候必须使用[‘属性值’]的方式四、什么是函数1、什么是函数
深拷贝实现最完整方案
a17645084907的博客
10-13 302
先说说深拷贝和浅拷贝 浅拷贝 所谓浅拷贝，就是只复制最外一层，里面的都还是相同引用 // 浅拷贝 const a = { name: 'xiaoming', age: 23 } const b = {} for (let key in a){ b[key] = a[key] } console.log(b) // { name: 'xiaoming', age: 23 } console.log(b === a) // false console.log(b.name === a.name) /
element-ui的bug记录
nick_zhang的博客
04-29 402
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 814
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 605
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
bpmn-js推荐几款常用的插件
飞云先生
04-30 85
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 758
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
javascript 浅拷贝深拷贝
08-27
浅拷贝和深拷贝是针对JavaScript中的对象属性为对象的情况而言的。浅拷贝只是复制了对象的引用，也就是复制了内存地址，所以拷贝后的对象和原对象会共用同一个内存地址，属性值的改变会相互影响。而深拷贝则是创建了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值