浅拷贝和深拷贝的应用
说到这个其实要引申出一个知识点,那便是存储类型,简单来说分为值类型(又名 原始类型,六种 → string,number,null,undefined,boolean,symbol(不重复得值))和引用类型(又名 对象类型 例如 function,Array)
其中常见值类型有String、Number、Boolean、引用类型有function、Array
引用类型有this指针指向问题、所以本次说的浅深拷贝也是指引用类型
具体可以在本博客 输入关键词 js变量按照存储方式区分 搜索
浅拷贝 可以通过Object.assign来解决这个问题 或者 运用 展开运算符(...)来解决
let test = { name:'zachary' } let demo = test test.name = 'changes' // 其实 demo 并没有变值 但确实 被test再次赋值给带跑偏了 console.log(demo) // changes console.log(test) //changes
let test = { name:'zachary' } //let demo = Object.assign({},test) let demo = {...test} test.name = 'changes' console.log(demo) // zachary console.log(test) //changes
如果是数组也可以这么用 只不过要把{} 改成[]
let test = [1,2,3] let demo = Object.assign([],test)
// let demo = [...test] test.push('changes')
console.log(demo) // [1, 2, 3] console.log(test) //[1, 2, 3, "changes"]
深拷贝通过将对象转换成字符串,之后再将它反序列化成对象 用代码表示就是 JSON.parse(JSON.stringify())
let map = { city:'重庆市', province:{ jangxi:'江西省' } } // let cloneMap = {...map} 对于深拷贝无效 // let cloneMap = Object.assign({},map) 对于深拷贝无效
let cloneMap = JSON.parse(JSON.stringify(map)) cloneMap.province.jangxi='changes'
console.log(cloneMap) //jangxi:changes console.log(map)//jiangxi:'江西省'
此方法的深拷贝缺陷说明
会忽略 undefined
不能序列化函数
不能解决循环引用的对象
但是在通常情况下,复杂数据都是可以序列化的,所以这个函数可以解决大部分问题,并且该函数是内置函数中处理深拷贝性能最快的
使用lodash
import lodash from 'lodash' lodash.cloneDeep(objects)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示