js深浅拷贝的最白话浅析

1,317 阅读2分钟

js深浅拷贝的学习(1)

1深浅拷贝的区别

拷贝=粘贴+复制,如何来区分这个拷贝的深浅?就是我把A拷贝了一份,然后给了B,再然后对A的东西进行更改,如果此时B随着A的更改变了,就是浅拷贝,反之就是深拷贝。

2深浅拷贝的东西

深浅拷贝肯定是对某个"东西",进行拷贝,也就是对js的数据类型进行拷贝其中数据类型分为 基本数据类型:number,string,undefined,boolean,null 复杂数据类型:object(arr,function,obj) 此处对这六大数据类型进行讨论

3js对数据类型存储的机制

基本数据类型的存储:栈内存

    let a=1

栈存储的过程: 1:创建变量a,把它放到栈内存的变量存储区中 2:创建值1,把它放到栈内存的值存储区中 3:"="为赋值,让变量和值关联起来

1.png

复杂数据类型:堆栈存储

    let a={
    name:"张三"age:18,
    address:"中国"
    }

复杂数据类型的存储: 1:内存中分配出一块新内存,存复杂类型值即内存(堆)有一个16进制地址(AAAAAAA00) 2:将对象中的键值对一一存储到堆中 3:再将堆的地址和变量关联起来 2.png

4深浅拷贝

基本数据类型

        let a=1;
        let b=a;
        a=2;
        console.log(a)//2
        console.log(b)//1
        let str="我是张三";
        let newStr=str;
        str="其实我是李四"
        console.log(str);//其实我是李四
        console.log(newStr);//我是张三

之前自己认为所有基本数据类型都是深拷贝,这是错误的,深浅拷贝对复杂数据类型而言的,对于基本数据类型来说,复制一个变量值,本质上就是copy了这个变量。一个变量值的修改,不会影响到另外一个变量。

浅拷贝

        var a={name:'张三',age:18,address:"中国"}
        var b=a;
        a.age=99
        console.log(a);//{name: "张三", age: 99, address: "中国"}
        console.log(b);//{name: "张三", age: 99, address: "中国"}
        
        let arr=[1,2,{name:"李四",age:19,address:"中国"}]
        let newArr=arr;
        arr[0]=3;
        console.log(arr);//[3, 2, {name:"李四",age:19,address:"中国"}]
        console.log(newArr);//[3, 2, {name:"李四",age:19,address:"中国"}]

所以复杂数据类型的复制一般都是浅拷贝即意味着把变量对应的值存储区存下来的地址给了再次赋值的新变量(这句话如果不能理解先看上面复杂数据类型的存储过程图解再看赋值的图解)

3.png 自然而然改变改变a里面的内容,b也会跟着变。

下期写一些常见的深浅拷贝方法