javascript总结:深拷贝与浅拷贝的实现

作者 : 开心源码 本文共2149个字,预计阅读时间需要6分钟 发布时间: 2022-05-13 共141人阅读
  • 浅拷贝: 将原对象或者原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用

  • 深拷贝: 创立一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”

  • 我们希望在改变新的数组(对象)的时候,不改变原数组(对象)时需要使用深拷贝

1、浅拷贝实现

原对象

const obj = {    siteName:"张培跃",    info:{        age:18,        props:["阳光","帅气"]    }}// 1. ...实现let copy1 = {...obj};console.log(copy1 === obj);// falseconsole.log(copy1.info === obj.info);// trueconsole.log(copy1.siteName);// 张培跃// 2. Object.assign实现let copy2 = Object.assign({},obj);console.log(copy2 === obj);// falseconsole.log(copy2.info === obj.info);// trueconsole.log(copy2.siteName);// 张培跃// 3、for in 实现let copy3 = {};for(let key in obj){    copy3[key] = obj[key];}console.log(copy2 === obj);// falseconsole.log(copy2.info === obj.info);// trueconsole.log(copy2.siteName);// 张培跃

原数组

const arr =[{    siteName:"张培跃",    info:{        age:18,        props:["阳光","帅气"]    }}]// 1. ...实现let copy1 = {...arr};console.log(copy1 === arr);// falseconsole.log(copy1[0].info === arr[0].info);// trueconsole.log(copy1[0].siteName);// 张培跃// 2. Array.from实现let copy2 = Array.from(arr);console.log(copy2 === arr);// falseconsole.log(copy2[0].info === arr[0].info);// trueconsole.log(copy2[0].siteName);// 张培跃// 3、forEach实现let copy3 = [];arr.forEach(v=>copy3.push(v));copy3 = Array.from(arr);console.log(copy3 === arr);// falseconsole.log(copy3[0].info === arr[0].info);// trueconsole.log(copy3[0].siteName);// 张培跃// 4、map实现let copy4 = arr.map(v=>v);console.log(copy4 === arr);// falseconsole.log(copy4[0].info === arr[0].info);// trueconsole.log(copy4[0].siteName);// 张培跃
2、深拷贝实现
  • JOSN.stringify()/JSON.parse()
const obj = {    siteName:"张培跃",    info:{        age:18,        props:["阳光","帅气"]    }}const copy1 = JSON.parse(JSON.stringify(obj));console.log(copy1 === obj);// falseconsole.log(copy1.info === obj.info);// falseconsole.log(copy1.info.props === obj.info.props);// falseconsole.log(copy1.siteName);// 张培跃
  • 递归拷贝
function deepClone(obj) {    // 判断能否数组或者对象,确定初始值    let copy = obj instanceof Array ? [] : {}    for (let i in obj) {        if (obj.hasOwnProperty(i)) {            copy[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i]        }    }    return copy}const obj = {    siteName:"张培跃",    info:{        age:18,        props:["阳光","帅气"]    }}const copy1 = deepClone(obj);console.log(copy1 === obj);// falseconsole.log(copy1.info === obj.info);// falseconsole.log(copy1.info.props === obj.info.props);// falseconsole.log(copy1.siteName);// 张培跃

—————END—————
喜欢本文的朋友们,欢迎关注公众号 张培跃,收看更多精彩内容!!!公众号回复 电子书 ,送你经典电子书籍!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » javascript总结:深拷贝与浅拷贝的实现

发表回复