首页 > 其他分享 >js-深拷贝和浅拷贝

js-深拷贝和浅拷贝

时间:2023-04-18 22:44:20浏览次数:24  
标签:return 对象 js let 拷贝 prop any

浅拷贝:有两种方式,一种是把一个对象里面的所有的属性值和方法都复制给另一个对象,另一种是直接把一个对象赋给另一个对象,使得两个都指向同一个对象。

深拷贝:把一个对象的属性和方法一个个找出来,在另一个对象中开辟对应的空间,一个个存储到另一个对象中。

两者就在于,浅拷贝只是简单的复制,对对象里面的对象属性和数组属性只是复制了地址,并没有创建新的相同对象或者数组。而深拷贝是完完全全的复制一份,空间大小占用一样但是位置不同!!

 

浅拷贝的实现

function shallowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

 

深拷贝的实现

1、递归拷贝


function checkType(any) {
  return Object.prototype.toString.call(any).slice(8, -1)
}
function clone(any){
  if(checkType(any) === 'Object') { // 拷贝对象
    let o = {};
    for(let key in any) {
      o[key] = clone(any[key])
    }
    return o;
  } else if(checkType(any) === 'Array') { // 拷贝数组
    var arr = []
    for(let i = 0,leng = any.length;i<leng;i++) {
      arr[i] = clone(any[i])
    }
    return arr;
  } else if(checkType(any) === 'Function') { // 拷贝函数
    return new Function('return '+any.toString()).call(this)
  } else if(checkType(any) === 'Date') { // 拷贝日期
    return new Date(any.valueOf())
  } else if(checkType(any) === 'RegExp') { // 拷贝正则
    return new RegExp(any)
  } else if(checkType(any) === 'Map') { // 拷贝Map 集合
    let m = new Map()
    any.forEach((v,k)=>{
      m.set(k, clone(v))
    })
    return m
  } else if(checkType(any) === 'Set') { // 拷贝Set 集合
    let s = new Set()
    for(let val of any.values()) {
      s.add(clone(val))
    }
    return s
  }
  return any;
}

2、JSON.stringifyJSON.parse

const person = {name: 'Sam', age: 31, child: {name: 'Ann'}};
const person2 = JSON.parse(JSON.stringify(person));

但是对于属性和层级较多的对象,这样做性能会稍差一些,并且这样只能拷贝普通对象。(无法拷贝对象中的函数和undefined)

 

总结:如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。

 

标签:return,对象,js,let,拷贝,prop,any
From: https://www.cnblogs.com/huangchengpei/p/17331497.html

相关文章

  • It's all but a dream(JSOI2023 追忆)
    联赛220,队线265,哈哈。day0下午先去了华山,进行了一个喝茶???看着联赛270+的队爷们,感觉人类的悲欢并不相通。晚上试机,由于并不会用Vim,计划sublime写+code::blocks调。先配了code::blocks,然后发现并不能运行???查了下发现是xterm没装,尝试自己装一下,然后发现密码并不是123......
  • Node.js入门学习笔记
    NodeJs是js的运行时,意味着可以在浏览器外运行js。可以使用nodejs来构建服务器端应用、CLI应用、WebAPI,甚至用electron构建桌面端应用。使用nvm来管理node版本。在终端输入node进入REPL环境,可以测试和执行代码,mac系统使用control+d退出REPL环境。执行某个js文件:nodexxx.js......
  • JS巩固
    https://www.bilibili.com/video/BV1sN411974w?p=3&spm_id_from=pageDriver&vd_source=b16c9d62fc80d4f0761a959bb9fdb870P3 ......
  • js知识点
    目录js知识点js数据类型数组forEach()补充三元运算函数函数的全局变量和局部变量内置对象和方法自定义对象Date对象Date对象的方法JSON对象EegExp对象MAth对象BOM和DOMBOM弹出框计时相关DOM标签查找间接查找节点操作属性节点获取值操作class的操作事件绑定方法js知识点jsjs的......
  • 小白用chatgpt编写python 爬虫程序代码 抓取网页数据(js动态生成网页元素)
    jS动态生成,由于呈现在网页上的内容是由JS生成而来,我们能够在浏览器上看得到,但是在HTML源码中却发现不了一、注意:代码加入了常规的防爬技术    如果不加,如果网站有防爬技术,比如频繁访问,后面你会发现什么数据都取不到1.1 模拟请求头: 这里入进入一步加强,随机,主要是User-Agen......
  • PBI 使用自定义Json
     let查询2=Json.Document(Binary.Decompress(Binary.FromText("i45WMjYwUNJRMjLUdSwoAjJMLYyUYnWilUywCMcCAA==",BinaryEncoding.Base64),Compression.Deflate))in查询2 ......
  • jsp Web实现文件上传下载功能实例解析
    ​ 4GB以上超大文件上传和断点续传服务器的实现随着视频网站和大数据应用的普及,特别是高清视频和4K视频应用的到来,超大文件上传已经成为了日常的基础应用需求。但是在很多情况下,平台运营方并没有大文件上传和断点续传的开发经验,往往在网上找一些简单的PHP或者Java程序来实现基......
  • 微信小程序-组件-.js文件
    经过上一章节的介绍,我们知道了在微信小程序当中组件的.json文件的作用其含义之后,本文将继续来刨铣组件当中的每一个文件的作用其含义,这次介绍的是组件当中的.js文件。其实呢这个js文件你自己结合我们之前讲解过来的这么多内容了你应该也是可以猜得出这个是用来监听组件的生命周期......
  • npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本
    在新建项目时候遇到一个问题如上图,安装cnpm或者node都会报这个错误找了半天发现解决方法如下(操作如上图)1、打开终端2、在终端执行:get-ExecutionPolicy,显示Restricted(表示状态是禁止的)3、在终端执行:set-ExecutionPolicyRemoteSigned4、在终端执行:get-ExecutionPolicy,显示RemoteSig......
  • app直播源码,Node.js实现密码散列加密
    app直播源码,Node.js实现密码散列加密1.安装所需的包: npmibcryptjs--save​2.修改MongoDB中的模型: ///models/AdminUser.js constmongoose=require('mongoose')//定义模型的字段constschema=newmongoose.Schema({  username:{//用户名    ty......