JavaScript中浅拷贝和深拷贝的区别

前言

前端面试过程中高频出现的问题之一。本文将详细讲解深拷贝与浅拷贝的区别。

  • 在探究浅拷贝和深拷贝之前,先来了解下堆和栈的概念

堆和栈都是内存中划分出来用于存储的区域。栈(stack)为自动分配的内存空间,它由系统自动释放;堆(heap)则是动态分配的内存,大小不定也不会自动释放。

  • 接着看下基本数据类型 & 引用数据类型(又称复杂数据类型)

1、基本类型:String、Number、Boolean、null、undefined、Symbol(ES6新增,表示独一无二的值);基本类型值在内存中占固定大小,保存在栈内存中。

2、引用类型:Object、Array、Date、Function等;引用类型的值是对象,保存在堆内存中。

深浅拷贝的概念

注:深浅拷贝的区别只适用于Array与Object这样的复杂对象。

1、浅拷贝:只是复制了原数据的内存地址,相当于两个数据指针指向了相同的地址,其中任一数据元素发生改变,会影响另一个。

2、深拷贝:两个数据指向了不同的地址,数据元素发生改变时不会相互影响。

实例探究

1、浅拷贝

var arr = [0, 1, 2];
var arrB;

//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果:arr数组元素随arrB数组元素的改变而改变

2、深拷贝(只做第一层深拷贝)

注:在使用深拷贝的时候,一定要弄清楚对深拷贝的要求程度,是仅深拷贝第一层级的对象属性或者数组元素,还是递归拷贝所有层级的对象属性和数组元素?

深拷贝数组

①. 直接遍历

var arr = [1, 2, 3, 4];
function copy(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}

var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果:arrB数组元素改变并未影响arr数组元素的值

②. concat():用于连接两个或多个数组。该方法不会改变现有数组,仅仅只会返回被连接数组的一个副本。

var arr = [0, 1, 2];
var arrB;

//把arr赋值给arrB
arrB = arr.concat();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果:arr数组元素未随arrB数组元素的改变而改变

③. slice():该方法返回一个从已有的数组中截取一部分元素片段组成新的数组(不改变原数组)。

var arr = [0, 1, 2, 4, 5];
var arrB;

//把arr赋值给arrB
arrB = arr.slice();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 10;
arr[4] = 8;
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果:数组中元素改变并不会相互影响

以上三种方法只针对于数组元素是基本数据类型的简单数组,对于第一级数组元素是对象或者数组等引用类型变量的数组来说,上述方法都将失效。

var arr = [{
    name: "jack"
},{
    name: "jenf"
}];
var arrB;

//把arr赋值给arrB
arrB = arr.slice();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0].name = "hello";
console.log("arr:", arr);
console.log("arrB:", arrB);

运行结果:

3、深拷贝

function isObject(target) {
  return (typeof target === 'object') && target !== null
}

function deepClone(target, map = new Map()) {
  // 判断是否已经被拷贝过
  if(map.get(target)) {
    return target
  }

  // 检测当前对象target是否与 正则、日期格式对象匹配
  if (/^(RegExp|Date)$/i.test(target.constructor.name)){
    new constructor(target);
  }

  if(isObject(target)) {
    // 为循环引用的对象做标记
    map.set(target, true)
    const cloneTarget = Array.isArray(target) ? [] : {}
    for(let key in target) {
      if(target.hasOwnProperty(key)) {
        cloneTarget[key] = deepClone(target[key], map)
      }
    }
    return cloneTarget
  } else {
    return target
  }
}


let arr = [{
  value: 0,
  name: '测试一下吧',
  children: [{
    name: '第一点',
    desc: '子项'
  }]
}]
let newArr = deepClone(arr)
newArr[0].value = 1
newArr[0].name = 'clone'
newArr[0].children[0].name = '2'
console.log('newArr:', newArr)
console.log('arr:', arr)
console.log('-------------------')

暂时先更新这些,待后续补充

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值