【学习笔记66】JavaScript的深浅拷贝
创始人
2024-03-02 01:56:11
0

一、赋值

  •  只要是引用数据类型, 那么在赋值的时候, 就是引用地址的传递
        // 赋值:字符串const s1 = '123';let s2 = s1;     // 赋值console.log(s2 === s1);  // trues2 = '456';console.log(s1); // 123console.log(s2); // 456

        let o1 = { a: 1 };let o2 = o1;          // 赋值console.log(o2 == o1);o2.a = 999;console.log(o1);console.log(o2);

        let a1 = [1, 2, 3];let a2 = a1;       // 赋值console.log(a2 == a1);a2[0] = 999;console.log(a1);console.log(a2);

二、浅拷贝

  •  遍历对象拿到对象的每一个keyvalue,然后赋值给另外一个对象
  •  如果所有的value都是基本数据类型, 那么浅拷贝完成之后, 修改新对象不会影响到老对象
  • 如果 value 有引用数据类型(出现了多层数据结构), 那么浅拷贝只能拷走第一层数据结构, 多层的没有办法处理
  • 注意:深浅拷贝一定是引用数据类型对象, 数组, 函数(基本只有对象和数组)

1、浅拷贝的实现

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}for (let key in o1) {// 遍历o1对象所有的key, 然后赋值给对象o2// console.log(key, o1[key]);o2[key] = o1[key];}console.log(o1); // {a: 1, b: 2, c: 3}console.log(o2); // {a: 1, b: 2, c: 3}console.log(o1 === o2); // false

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}for (let key in o1) {// 遍历o1对象所有的key, 然后赋值给对象o2// console.log(key, o1[key]);o2[key] = o1[key];}o2.b = 999;console.log(o1 === o2); // falseconsole.log(o1); // {a: 1, b: 2, c: 3}console.log(o2); // {a: 1, b: 999, c: 3}

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}for (let key in o1) {// 遍历o1对象所有的key, 然后赋值给对象o2// console.log(key, o1[key]);o2[key] = o1[key];}o2.d.d1 = 'QF666'console.log(o1 === o2); console.log(o1); console.log(o2); 

 2、JS提供的浅拷贝

  • Object.assign(新对象, 原始对象)
  • 将原始对象中所有的key,全部浅拷贝到新对象中, 然后返回一个对象
        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = Object.assign({}, o1);console.log(o1);console.log(o2);

三、深拷贝

  • 不管数据有多少层数据结构, 百分百复制出来一份,一摸一样但是毫不相关的数据
        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}function deepClone(target, origin) {// 将origin完全百分百的复制出来一份, 到target中for (let k in origin) {// console.log(k, origin[k])if (origin[k].constructor === Object) {target[k] = {}deepClone(target[k], origin[k])} else if (origin[k].constructor === Array) {target[k] = []deepClone(target[k], origin[k])} else {target[k] = origin[k]}}}deepClone(o2, o1);console.log(o1  === o2);console.log(o1);console.log(o2);

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = {}function deepClone(target, origin) {// 将origin完全百分百的复制出来一份, 到target中for (let k in origin) {// console.log(k, origin[k])if (origin[k].constructor === Object) {target[k] = {}deepClone(target[k], origin[k])} else if (origin[k].constructor === Array) {target[k] = []deepClone(target[k], origin[k])} else {target[k] = origin[k]}}}deepClone(o2, o1);o2.d.d2 = 'QF666';console.log(o2);console.log(o1);

2、JS中提供的方法

        let o1 = {a: 1,b: 2,c: 3,d: {d1: '001',d2: '002',d3: '003'}}let o2 = JSON.parse(JSON.stringify(o1));o2.d.d3 = '9999999';console.log(o1);console.log(o2);

相关内容

热门资讯

人大常委会|整改问题金额1.0... 新华社北京12月22日电 题:整改问题金额1.04万亿元 制定完善制度1090多项——2024年度审...
法援三十载·新规启新程 | 金... 概况 11月以来,金山区法律援助中心围绕“法援三十载·新规启新程”主题,联合11个街镇(高新区)法律...
轻信理财骗局损失8.8万元,起... 三湘都市报12月22日讯(文/视频 全媒体记者 虢灿)女子轻信网络投资理财骗局,被骗8.8万元,收款...
南玻A(000012)披露公司... 截至2025年12月22日收盘,南玻A(000012)报收于4.47元,较前一交易日上涨0.22%,...
恒兴新材(603276)披露修... 截至2025年12月22日收盘,恒兴新材(603276)报收于16.46元,较前一交易日下跌0.72...
个人信用修复政策重磅落地 12月22日,中国人民银行发布一次性信用修复政策:符合相关条件的逾期信息,将不会在个人信用报告中予以...
应对野生动物伤人,法律重申常识... 12月22日,生态环境法典草案三次审议稿提请十四届全国人大常委会第十九次会议审议。针对食草野生动物与...
原创 私... 西安雁塔警方通报查处一家提供“异性陪侍”的私人影院,经营者被刑拘,陪侍人员被行拘。这背后,为何处理结...
天玑科技及相关责任人因涉嫌串通... 12月22日,天玑科技(300245.SZ)发布公告,公司近期收到上海市虹口区人民检察院送达的《起诉...
「期刊文摘」 蔡昉:人工智能时... 蔡昉:人工智能时代的社会保障,理念更新与制度建设 期刊文摘 ★★★★★ 一、引言 人们惊叹于近年来人...