• 对于基本类型的复制以及浅拷贝和深拷贝


    浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变

    深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性

    简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

    一、对于第一级元素是基本类型变量(如number,String,boolean)的简单数组

    1、直接遍历

    var array = [1,2,3.4]
    function copyFn(arr){
    	let newArr = []
    	for(let i of arr){
    		newArr.push(i)
    	}
    	return newArr;
    }
    
    var copyArr = copyFn(array);
    copyArr[0] = 500;
    console.log(array);
    console.log(copyArr)
    

    2、slice 从某个已有的数组返回选定的元素[复制](返回一个新的数组)  slice(start,end)

    var arr1= [1,2,3,4]
    var arr2 = arr1.slice();
    arr2[0]=500;
    console.log(arr1);
    console.log(arr2);
    //[1, 2, 3, 4]
    // [500, 2, 3, 4]  

    3、数组拼接 concat

    var arr1= [1,2,3,4]
    var arr2 = arr1.concat();
    arr2[0]=500;
    console.log(arr1);
    console.log(arr2);
    //[1, 2, 3, 4]
    //[500, 2, 3, 4]

    二、对于第一级数组元素是对象或者数组引用类型变量的数组【浅拷贝实现】

    实现浅拷贝(解决改变以防其他也改变的情况):

    1、Object.assign()

    语法:Object.assign(target,...sources)【ES6】

    如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

    Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

    var obj = {
     name:'小红',
    age:20
    }
    var copyObj = Object.assign({},obj)
    copyObj.name='小明'
    "小明"
    copyObj.age = 24
    24
    console.log(obj)
    console.log(copyObj)
    //{name: "小红", age: 20}
    //{name: "小明", age: 24}
    

    2、扩展运算符(...)

    数组拷贝,实际上展开语法和Object.assign()行为一致,执行的都是浅拷贝(之遍历一次)

    var obj = {
     name:'小红',
    age:20
    }
    var copyObj = {...obj}
    copyObj.name='小明'
    "小明"
    copyObj.age = 24
    24
    console.log(obj)
    console.log(copyObj)
    // {name: "小红", age: 20}
    // {name: "小明", age: 24}

    思考:但是如果代码(多层嵌套)如下:

    var obj = {
    	name : '小红',
    	hobby:{
    		hobby1:'羽毛球',
    		hobby2:'篮球'
    	}
    }
    var copyObj = Object.assign({},obj)
    copyObj.hobby.hobby1 = '游泳'
    console.log(obj)
    console.log(copyObj)
    //{name: "小红", hobby: {…}}  |  hobby: {hobby1: "游泳", hobby2: "篮球"}name: "小红"
    //{name: "小红", hobby: {…}}  |  hobby: {hobby1: "游泳", hobby2: "篮球"}name: "小红"  

    不难发现,多曾嵌套的对象并没有成功,出现的现象时只要改其中一个另外一有个跟着改变,所以浅拷贝只能拷贝一层,要实现拷贝多层需要使用深拷贝

    三、拷贝多层,每一级数据都会被拷贝【深拷贝】

    1、JSON.parse(JSON.stringify(object))【常用】

    var obj = {
      name:'Jay',
      song:{
        first:'蜗牛',
        second:'屋顶'
      }
    }

    var copyObj = JSON.parse(JSON.stringify(obj));
    obj.song.first = '不能说的秘密';
    console.log(obj.song.first);
    console.log(copyObj.song.first);
    // 不能说的秘密
    //蜗牛

    总结一下

    参考:

    知乎 :https://www.zhihu.com/question/23031215

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

    CSDN博客:https://blog.csdn.net/qq_39207948/article/details/81067482

  • 相关阅读:
    Title
    Title
    JS淘宝小广告
    JS淘宝浏览商品
    JS隐藏显示图片
    JS图片轮播
    C#连接数据库的方法
    让$(window).scroll()监听事件只执行一次
    axios发delete请求,后台收不到参数;
    .gitignore规则简介
  • 原文地址:https://www.cnblogs.com/chorkiu/p/10400976.html
Copyright © 2020-2023  润新知