首页 > 其他分享 >JS的深浅拷贝

JS的深浅拷贝

时间:2022-11-27 20:55:40浏览次数:41  
标签:origin obj2 JS JSON 深浅 new 拷贝 data

基本数据类型:number、string、boolean、null、undefined
引用数据类型:object、function、array

存储位置的不同
    基本数据类型:将值存储在栈中,栈中存放的是对应的值
    引用数据类型:将对应的值存储在堆中,栈中存放的是指向堆内存的地址

基础数据类型 赋值 赋的是真正的值
引用数据类型 赋值 赋的是 引用地址

深浅拷贝是对引用数据类型来做探讨的
    浅拷贝(简单来说就是只拷贝第一层)
    深拷贝(完全独立的双胞胎,彼此之间不会影响)

JS常见的浅拷贝方法
    1.Object.assign()
    2.扩展运算符
    3.Array.concat()
    4.Array.slice()
JS常见的深拷贝方法
    1.JSON.parse(JSON.stringify(待拷贝对象))
        --- 有弊端(JSON数据类型不能完全的支持JS数据类型,JS一部分转成JSON后无法再转回来,对于JSON语法不支持的属性,序列化后会将其省略)
        对于JavaScript中的五种原始类型,JSON语法支持数字、字符串、布尔值、null四种,不支持undefined;
            NaN、Infinity和-Infinity序列化的结果是null;
            JSON语法不支持函数;
            除了RegExp、Error对象,JSON语法支持其他所有对象;
            日期对象序列化的结果是ISO格式的字符串,但JSON.parse()依然保留它们字符串形态,并不会将其还原为日期对象;
            JSON.stringify()只能序列化对象的可枚举的自有属性;
    2.jQuery 中的 $.extend (添加true就是深拷贝,不添加就是浅拷贝)
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

</head>
<body>


<script>
    let obj = {
        name: 'hkw',
        age: 18,
        inner: [
            666, 777, [9]
        ],
        deep() {
            console.log('deep')
        }
    }
    // 浅拷贝(简单来说就是值拷贝第一层)
    // 1.es6的展开语法
    // let obj2 = {...obj};
    // obj2.name = 'jon';  // 源对象不会改变
    // obj2.inner[0] = 888;  // 源对象跟着改变
    // obj2.inner[2][0] = 999;  // 源对象跟着改变
    // console.log(obj);
    // console.log(obj2);

    // 2.Object.assign()
    // let obj2 = Object.assign({}, obj);
    // obj2.name = 'jon';  // 源对象不会改变
    // obj2.inner[0] = 888;  // 源对象跟着改变
    // obj2.inner[2][0] = 999;  // 源对象跟着改变
    // console.log(obj);
    // console.log(obj2);

    // 3.Array的slice和concat方法(针对数组)
    // let origin = [1, 2, 3, 4, [111, 222]];
    // let new_data = origin.slice();
    // new_data.push(5);
    // new_data[4].push(333);
    // console.log('origin:', origin);
    // console.log('new_data:', new_data);
    // contact操作类似

    // 深拷贝
    // 1.JSON.parse(JSON.stringify(待拷贝对象))
    // let obj2 = JSON.parse(JSON.stringify(obj));
    // console.log(obj, obj2);  // 弊端:不会拷贝内部函数(即obj2没有deep函数)

    // 2.jQuery 中的 $.extend (添加true就是深拷贝,不添加就是浅拷贝)
    // let origin = [1, 2, 3, 4, [111, 222]];
    // let new_data = [];
    // $.extend(true, new_data, origin);
    // // $.extend(new_data, origin);
    // new_data[4].push(666);
    // // origin[4].push(666);
    // // origin.push(666);
    // // new_data.push(666);
    // console.log('origin:', origin);
    // console.log('new_data:', new_data);


</script>


</body>
</html>

 

标签:origin,obj2,JS,JSON,深浅,new,拷贝,data
From: https://www.cnblogs.com/hkwJsxl/p/16930600.html

相关文章

  • js原型和原型链
    目录原型和原型链原型原型链原型和原型链原型在理解之前,明白一个前提,js也是有类的,也可以定义方法和构造函数隐式原型:对象的_proto_属性(里面有类定义的方法,且这个属性每......
  • jquery009-js执行的先后顺序
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><bodystyle="width:980px;margin:0auto"><h1>#一,当页面框架......
  • leetcode 56. 合并区间 js实现
    以数组 intervals 表示若干个区间的集合,其中单个区间为 intervals[i]=[starti,endi] 。请你合并所有重叠的区间,并返回 一个不重叠的区间数组,该数组需恰好覆盖输入......
  • vs2008 调试js
    面对一大段的JavaScript脚本,以前总是会很头疼,找不到调试这些代码的方法。如果出现什么错误或异常,总是要从头分析,然后插入很多Alert(),调试起来很麻烦。VisualStudio2008中J......
  • 解决fastjson内存对象相互应用导入json字符串出现错误问题
        日常在使用FastJson的时候可能很少会遇到这种问题。比如:我们在一个对象中存在一个集合属性对象这个集合属性对象元素属性也同样存在集合属性那么在使用toJSONSt......
  • Linux面试题3:Linux零拷贝技术
    zero-copy技术Linux网络IO数据传输过程图整个操作过程中,做了四次用户态和内核态的状态切换,数据从网卡copy到内核缓冲区,再从内核缓冲区copy到user-space;写入时从user-spa......
  • 基于Servlet+jsp+mysql开发javaWeb学生管理系统(学生信息、学生选课、学生成绩、学生
    你知道的越多,你不知道的越多点赞再看,养成习惯文章目录​​一、开发背景​​​​二、需求分析​​​​三、开发环境​​​​四、运行效果​​​​五、开发流程​​​​工......
  • JS - 监听手机横屏竖屏
    //监听屏幕window.addEventListener('orientationchange',function(){letorientation=window.orientation;consol......
  • 深拷贝 浅拷贝 深拷贝浅拷贝的方法
    浅拷贝:浅拷贝拷贝的是对象的一层属性如果对象里面还有对象则拷贝的是复杂数据类型的地址 浅拷贝一般使用Object.assign(给谁,拷贝谁){...对象名}深拷贝:深拷贝拷贝的是对......
  • moment.js 处理时间日期的库
    vue项目中,需要把moment.js挂载到全局上(即vue的原型链上),访问时直接使用this.moment();vue项目中不挂载到全局,单文件(单组件)使用:==>>importmomentfrom"moment";......