js的深浅拷贝

javascript的变量的存储方式:

栈(stack)和堆(heap)
栈:自动分配内存空间,系统自动释放,里面存放的是基本类型的值和引用类型的地址
堆:动态分配的内存,大小不定,也不会自动释放。里面存放引用类型的值。

var str_1 = 'abc'
    var obj_1 = {
        name: 'name',
        age: 18
    }

    var str_2 = str_1
    var obj_2 = obj_1

    str_2 = 'def'
    obj_2.name = 'name1'


    console.log(str_1, str_2);
    console.log(obj_1, obj_2);

在这里插入图片描述
在这里插入图片描述

基本类型:赋值 真正的值
引用类型:赋值 引用类型的地址

 var num = 10
    var num_1 = 10
    console.log(num == num_1);

    var arr = [1, 2, 3]
    var arr_1 = [1, 2, 3]
    console.log(arr == arr_1);

在这里插入图片描述

深浅拷贝 (引用类型)

浅拷贝 传的是地址

被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象。即对象的浅拷贝会对“主”对象进行拷贝,但不会复制主对象里面的对象。”里面的对象“会在原来的对象和它的副本之间共享。

var arr = [1, 2, 3]
    var arr_1 = arr
    arr_1.push(4)
    console.log(arr);
    console.log(arr_1);

传地址,值同时变

深拷贝 传的值

深拷贝不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上,所以对一个对象的修改并不会影响另一个对象。
数组(注意:该数组只是单纯的数组,如果数组里面嵌套对象,则下面的几种方法都不是深拷贝。)

数组
1、for循环
var arr_2 = [1, 2, 3]
    var arr_3 = []
    for (var i = 0; i < arr_2.length; i++) {
        arr_3.push(arr_2[i])
    }
    arr_3.unshift(0)
    console.log(arr_2);
    console.log(arr_3);

在这里插入图片描述

2、slice()
var arr_4 = [1, 2, 3]
    var arr_5 = arr_4.slice(0)
    arr_5.push(4)
    console.log(arr_4);
    console.log(arr_5);

在这里插入图片描述

3、concat()
var arr_6 = [1, 2, 3]
    var arr_7 = arr_6.concat()
    arr_7.shift()
    console.log(arr_6);
    console.log(arr_7);

在这里插入图片描述

4、ES6 …
var arr = [1, 2, 3, 4, 5];
    var [...arr2] = arr;
    arr[2] = 5;
    console.log(arr);
    console.log(arr2);

在这里插入图片描述

对象
1、(for in)
var obj_1 = {
        name: 'name',
        age: 18
    }
    var obj_2 = {}
    for (x in obj_1) {
        obj_2[x] = obj_1[x]
    }
    obj_2.name = 'name1'
    console.log(obj_1);
    console.log(obj_2);

在这里插入图片描述

2、转换成json再转换成对象实现对象的深拷贝
var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))
3、ES6扩展运算符实现对象的深拷贝
var obj = {
      name: "FungLeo",
      sex: "man",
      old: "18",
    };
    var { ...obj2 } = obj;
    obj.old = "22";
    console.log(obj);
    console.log(obj2);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值