手写深拷贝

最新推荐文章于 2024-04-24 15:20:20 发布
最新推荐文章于 2024-04-24 15:20:20 发布
阅读量649 收藏 3
点赞数
文章标签： 前端 vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50980821/article/details/122229405
版权

自定义深拷贝函数

一.简单的深拷贝
  • 代码示例：
const s1 = Symbol()
const s2 = Symbol()

const obj = {
  name: "why",
  friend: {
    name: "kobe"
  },
  foo: function() {
    console.log("foo function")
  },
  [s1]: "abc",
  s2: s2
}

obj.inner = obj

const info = JSON.parse(JSON.stringify(obj))
console.log(info === obj)
obj.friend.name = "james"
console.log(info)

  • 存在弊端：

    1. json在转换的过程中不识别函数和symbol，如下图所示
    2. 知识点：obj.inner = obj
      • 对象有个inner属性指向他自己
      • 如果用了json转换之后就不可以了，会报错

    在这里插入图片描述

二.手写深拷贝函数
  1. 基本实现
    function isObject(value) {
  const valueType = typeof value
  return (value !== null) && (valueType === "object" || valueType === "function")
}

function deepClone(originValue) {
  // 判断传入的originValue是否是一个对象类型
  if (!isObject(originValue)) {
    return originValue
  }

  const newObject = {}
  for (const key in originValue) {
    newObject[key] = deepClone(originValue[key])
  }
  return newObject
}


// 测试代码
const obj = {
  name: "why",
  age: 18,
  friend: {
    name: "james",
    address: {
      city: "广州"
    }
  }
}

const newObj = deepClone(obj)
console.log(newObj === obj)

obj.friend.name = "kobe"
obj.friend.address.city = "成都"
console.log(newObj)

  2. 优化深拷贝（增加新的功能）

    • 用上述基本实现深拷贝的时候，数组是也会拷贝成为对象的，因此需要对其进行优化。
    • 函数的话一般不做拷贝处理，但是也要拿到函数，上述基本实现会把传入的函数变成{}显然是不合理的
    • 增加一下对于set和map的处理
    function isObject(value) {
  const valueType = typeof value
  return (value !== null) && (valueType === "object" || valueType === "function")
}

function deepClone(originValue) {
  // 判断是否是一个Set类型
  if (originValue instanceof Set) {
    return new Set([...originValue])
  }

  // 判断是否是一个Map类型
  if (originValue instanceof Map) {
    return new Map([...originValue])
  }

  // 判断如果是Symbol的value, 那么创建一个新的Symbol
  if (typeof originValue === "symbol") {
    return Symbol(originValue.description)
  }

  // 判断如果是函数类型, 那么直接使用同一个函数
  if (typeof originValue === "function") {
    return originValue
  }

  // 判断传入的originValue是否是一个对象类型
  if (!isObject(originValue)) {
    return originValue
  }

  // 判断传入的对象是数组, 还是对象
  const newObject = Array.isArray(originValue) ? []: {}
  for (const key in originValue) {
    newObject[key] = deepClone(originValue[key])
  }

  // 对Symbol的key进行特殊的处理
  const symbolKeys = Object.getOwnPropertySymbols(originValue)
  for (const sKey of symbolKeys) {
    // const newSKey = Symbol(sKey.description)
    newObject[sKey] = deepClone(originValue[sKey])
  }
  
  return newObject
}


// 测试代码
let s1 = Symbol("aaa")
let s2 = Symbol("bbb")

const obj = {
  name: "why",
  age: 18,
  friend: {
    name: "james",
    address: {
      city: "广州"
    }
  },
  // 数组类型
  hobbies: ["abc", "cba", "nba"],
  // 函数类型
  foo: function(m, n) {
    console.log("foo function")
    console.log("100代码逻辑")
    return 123
  },
  // Symbol作为key和value
  [s1]: "abc",
  s2: s2,
  // Set/Map
  set: new Set(["aaa", "bbb", "ccc"]),
  map: new Map([["aaa", "abc"], ["bbb", "cba"]])
}

const newObj = deepClone(obj)
console.log(newObj === obj)

obj.friend.name = "kobe"
obj.friend.address.city = "成都"
console.log(newObj)
console.log(newObj.s2 === obj.s2)

  3. 解决循环引用问题

    • 起因加入上述功具函数的测试代码obj对象有一个属性执行自己：obj.info = obj

    • 造成的后果就是在调用的时候陷入递归的循环引用

      • deepClone方法只有在满足一定条件之后才return，如果传入的是对象，他会继续走下面的遍历
        1. newObject[info ] = deepClone(originValue[info ])----------->originValue[info ]是对象 继续赋值
        2. newObject[info ] = deepClone(originValue[info ])------------>originValue[info ]还是对象…
        3. …以此反复，陷入死循环
        for (const key in originValue) {
    newObject[key] = deepClone(originValue[key])
  }

    • 代码：

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

function deepClone(originValue, map = new WeakMap()) {
  // 判断是否是一个Set类型
  if (originValue instanceof Set) {
    return new Set([...originValue])
  }

  // 判断是否是一个Map类型
  if (originValue instanceof Map) {
    return new Map([...originValue])
  }

  // 判断如果是Symbol的value, 那么创建一个新的Symbol
  if (typeof originValue === "symbol") {
    return Symbol(originValue.description)
  }

  // 判断如果是函数类型, 那么直接使用同一个函数
  if (typeof originValue === "function") {
    return originValue
  }

  // 判断传入的originValue是否是一个对象类型
  if (!isObject(originValue)) {
    return originValue
  }
  if (map.has(originValue)) {
    return map.get(originValue)
  }

  // 判断传入的对象是数组, 还是对象
  const newObject = Array.isArray(originValue) ? []: {}
  map.set(originValue, newObject)
  for (const key in originValue) {
    newObject[key] = deepClone(originValue[key], map)
  }

  // 对Symbol的key进行特殊的处理
  const symbolKeys = Object.getOwnPropertySymbols(originValue)
  for (const sKey of symbolKeys) {
    // const newSKey = Symbol(sKey.description)
    newObject[sKey] = deepClone(originValue[sKey], map)
  }
  
  return newObject
}


// deepClone({name: "why"})


// 测试代码
let s1 = Symbol("aaa")
let s2 = Symbol("bbb")

const obj = {
  name: "why",
  age: 18,
  friend: {
    name: "james",
    address: {
      city: "广州"
    }
  },
  // 数组类型
  hobbies: ["abc", "cba", "nba"],
  // 函数类型
  foo: function(m, n) {
    console.log("foo function")
    console.log("100代码逻辑")
    return 123
  },
  // Symbol作为key和value
  [s1]: "abc",
  s2: s2,
  // Set/Map
  set: new Set(["aaa", "bbb", "ccc"]),
  map: new Map([["aaa", "abc"], ["bbb", "cba"]])
}

obj.info = obj

const newObj = deepClone(obj)
console.log(newObj === obj)

obj.friend.name = "kobe"
obj.friend.address.city = "成都"
console.log(newObj)
console.log(newObj.s2 === obj.s2)

console.log(newObj.info.info.info)
peanut117
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写一个深拷贝函数
qq_45679015的博客
05-06 416
深拷贝：A 与 B 值相等，但改动 A 并不会影响 B。 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝，把引用类型的值也拷贝出来 实现浅拷贝： ES6: object.assign(); 展开运算符 自己封装函数实现 实现深拷贝： JSON.parse()[但是如果里面有function和undefined不可以] > lodash 自己封装 手写一个浅拷贝~ 浅拷贝：A 与 B 值相等，改动 A 会影响 B。 const obj1 = { .
前端手写(三)——手写深拷贝
weixin_47450807的博客
03-26 4444
一、写在前面 深拷贝就是对对象的深度拷贝，假如我们对象中的字段值任然是对象，如果使用浅拷贝，则只能拷贝对象的地址。实现深拷贝存在三种方法: 1、使用JSON.stringify和JSON.parse方法 2、手写一个深拷贝函数。 3、使用第三方库lodash。 下面我们将详细总结一下第一种和第二种。 二、JSON.stringify和JSON.parse方法 const obj = { name: 'Jack', address: { x: 100, y: 200 } } let
手写实现一个深拷贝
yue200403的博客
07-07 2562
手写实现一个深拷贝属于数据结构的知识点，数据类型包含基本类型和引用类型，基本类型存储在栈中；引用数据类型存储在堆中；基本数据类型没有浅拷贝和深拷贝的区分，浅拷贝和深拷贝的问题存在于引用数据类型中。...
手写深拷贝和浅拷贝
最新发布
qq_45438471的博客
04-24 452
本文主要说明如何实现深拷贝和浅拷贝。
手写实现深拷贝函数
zep
03-16 2873
对象相互赋值的一些关系，分别包括： 引入的赋值：指向同一个对象，相互之间会影响； 对象的浅拷贝：只是浅层的拷贝，内部引入对象时，依然会相互影响； 对象的深拷贝：两个对象不再有任何关系，不会相互影响； 可以通过JSON.parse来实现深拷贝，但存在以下弊端： 这种深拷贝的方式其实对于函数、Symbol等是无法处理的； 并且如果存在对象的循环引用，也会报错的； 一、简单的深拷贝函数实现 自定义深拷贝的基本功能： 二、对其他数据类型的值进行处理 包括：数组、函数、Symbol、Set、Map.
JavaScript 深拷贝 递归 手写
01-08
今天的学习笔记写在了自己的网页笔记本上，没有记录到博客，但是学到一个有关深拷贝的实现方法，为加深印象，这里给大家分享一下： 深拷贝：就是拷贝到最底层的属性。 function deepCopy(object){ //这里传入一个...
深拷贝.js(考虑最全的深拷贝函数)
06-27
js考虑最完善的深拷贝函数,可以深拷贝引用对象和基本对象
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
JavaScript中的深拷贝和浅拷贝是编程中常见的概念，主要涉及到对象和数组的复制。在JavaScript中，数据类型分为基本数据类型（如Number、String、Boolean等）和引用数据类型（如Object、Array等）。基本类型直接存储...
js中的深拷贝和浅拷贝总结
01-08
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....
12-深拷贝.md
03-31
能在规定时间内写出功能健全、思路清晰、格式规整的代码，这是前端工程师的必备技能，所以面试时必考手写代码。本章将通过多个面试题，讲解前端常考的写代码问题，并总结出高质量代码的关键点。 ## 为何要考察 ...
深拷贝的常用写法
qq_35107472的博客
06-07 639
了解深拷贝的几种常用写法
手写实现深拷贝
herman_student的博客
02-25 1272
原理：toString() 是 Object 的原型方法，调用该方法，可以统一返回格式为 “[object Xxx]” 的字符串，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object]；而对于其他对象，则需要通过 call 来调用，才能返回正确的类型信息。原理：因为内部机制是通过判断对象的原型链中是不是能找到类型的。
手写浅拷贝和深拷贝
weixin_43484007的博客
06-08 1282
浅拷贝是指，一个新的对象对原始对象的属性值进行精确地拷贝，如果拷贝的是基本数据类型，拷贝的就是基本数据类型的值，如果是引用数据类型，拷贝的就是内存地址。如果其中一个对象的引用内存地址发生改变，另一个对象也会发生变化。Object.assign()是ES6中对象的拷贝方法，接受的第一个参数是目标对象，其余参数是源对象，用法：Object.assign(target, source_1, ···)，该方法可以实现浅拷贝，也可以实现一维对象的深拷贝. 注意： ● 如果目标对象和源对象有同名属性，或者多个源对象有同
手写JS—深拷贝
Florenza的博客
12-08 2233
一个引用对象一般来说由两个部分组成：一个具名的Handle，也就是我们所说的声明（如变量）和一个内部（不具名）的对象，也就是具名Handle的内部对象。它在Manged Heap（托管堆）中分配，一般由新增引用对象的New方法是进行创建。深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响。比较典型的就是Value（值）对象，如预定义类型Int32，Double，以及结构（struct），枚举（Enum）等。一般简单来说我们都会这么写但是 会有循环引用的问题。
前端经典面试题 - 手写一个深拷贝函数，2种方法实现深拷贝
weixin_46557501的博客
10-09 371
一句话区分深拷贝、浅拷贝 深拷贝：拷贝前后，互不影响 浅拷贝：拷贝前后，互相影响 前置知识：判断是否为复杂数据类型 let defineType = function(element){ return Object.prototype.toString.call(element).slice(8,-1) } 通过slice方法，截取字符串，如是复杂数据类型，则会输出Object、Array字符串。 方法一：深拷贝函数 let toClone = function(data){ // 检验数据类型
深拷贝的理解和如何手写一个深拷贝
SH'S BLOG
03-18 667
深拷贝 说到深拷贝,肯定想到的最简单的方式就 JSON.stringify 和 JSON.parse 配合,这个是最简单的深拷贝方式 手写一个深拷贝 深拷贝 = 浅拷贝 + 递归 ,这个只是最笨的一种方式 var a = { name: "muyiy", book: { title: "You Don't Know JS", price: "4...
一起来手写 数据双向绑定、原生ajax、深拷贝
weixin_41330202的博客
07-11 1067
手写数据双向绑定，vue实现双向绑定的原理就是Object.defineProperty，重写其中的get，set方法<input id=txt /> <p id="show-txt"></p>var obj={}; Object.defineProperty(obj,'txt',function(){     get:function(){         r...
js 手写深拷贝和浅拷贝
09-06
所以，通过手写深拷贝和浅拷贝，可以更好地理解递归、循环引用、weakMap、创建各种引用类型的方法、判断数据类型、箭头函数与普通函数的区别、正则表达式等知识。<span class="em">1</span><span class="em">2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值