IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 浅拷贝与深拷贝 -> 正文阅读

[JavaScript知识库]JavaScript 浅拷贝与深拷贝

1. 浅拷贝概念

什么叫作浅拷贝:

针对简单的数据类型,拷贝值;

针对复杂的数据类型,单独开辟新的内存空间,在栈里面会有地址指向这个空间,拷贝地址

改变旧的对象的复杂数据类型的值,新的对象的对应值也会改变,借用一个博主的话,拷贝以后复杂数据类型不能够自食其力,旧叫浅拷贝。因为传递地址,也叫引用传递。

浅拷贝的例子1:for? in? 进行浅拷贝

        var obj = {
            name: 'a',
            msg: {
                age: 18,
            }
        }
        var o = {};
        for (var k in obj) {
            o[k] = obj[k];
        }
        console.log(o); // age是19 name还是a
        obj.name = 'b';
        obj.msg.age = 19;
        console.log(obj); // age是19 name是b
        console.log(o); // age是19 name是a

修改了obj的msg对象的age值,o对象的也发生变化

修改了obj的name值,o对象的没有发生变化

浅拷贝的例子2:定义数组进行浅拷贝

        let a = [1, 2, 3, 4, 5];
        let b = a;
        a[0] = 3;
        console.log(a); // [3, 2, 3, 4, 5]
        console.log(b); // [3, 2, 3, 4, 5]
        console.log(a === b); // true
       

?总结:

1. a数组赋值给了b数组
2. 紧接着修改a数组的一个值,b的数组也相应的变化,这个就是浅拷贝,

浅拷贝的例子3:利用Object.assign()方法进行拷贝

        var oldObj = {
            name: 'good',
            msg: {
                age: 18
            }
        }
        var newObj = {};
        Object.assign(newObj, oldObj);
        console.log(newObj); // 能够拷贝成功
        oldObj.msg.age = 19;
        console.log(oldObj); // age = 19
        console.log(newObj); // age = 19 表明浅拷贝成功

修改newObj的msg对象的age值,oldObj的age值也发生变化,证明是浅拷贝

2. 深拷贝

概念:

newObj拷贝了oldObj的值,拷贝之后,修改newObj的复杂数据类型值,oldObj的复杂数据值不会改变。能够自食其力

????????逻辑

????????1.?先判断对象里的元素是数组吗?

????????1.1?如果是,新对象里面的对应属性的属性值,让其创建一个新数组,递归

????????1.2?如果不是数组,再判断是不是对象,如果是,新对象对应的属性值,让其创建一个新对象,递归

????????2.?递归点,?oldObj的属性值赋值给newObj对应的属性,newObj[k]?=?item;

        var furn = {
            size: '10',
            msg: {
                size: '100',
                msg: {
                    size: '1000'
                }
            }
        };
        function deepCopy(newObj, oldObj) {
            for (var k in oldObj) {
                var item = oldObj[k];
                if (item instanceof Array) {
                    newObj[k] = [];
                    deepCopy(newObj[k], item);
                } else if (k instanceof Object) {
                    newObj[k] = {};
                    deepCopy(newObj[k], item);
                } else {
                    newObj[k] = item;
                }
            }
            return newObj;
        }
        console.log(deepCopy(furn));

最终输出的结果,是拷贝之后的元素

3. 浅拷贝和深拷贝的应用:

????????后台返回一些数据,需要对这些数据进行操作:比如增加、删除、修改、查询等,即便复制了数据对象,

????????如果是浅拷贝,复杂数据类型,拷贝后修改仍然会影响oldObj

????????深拷贝,不会影响,更加安全

4. jQuery的深拷贝和浅拷贝extend

参考文章:

感觉下面这个博主写的特别的详细

js实现数组浅拷贝和深拷贝_xm1037782843的博客-CSDN博客_js 数组深拷贝

个人学习id:201903090124-

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-30 15:31:56  更:2021-11-30 15:33:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 23:27:02-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码