浅析JS的深拷贝与浅拷贝

前言:

前段时间在做前端项目时,吃了深拷贝与浅拷贝的亏,今天就来整理一下这两者的区别。

一、深拷贝VS浅拷贝

讲到深拷贝与浅拷贝,我们先要弄清楚什么是深拷贝,什么是浅拷贝?
深拷贝:不仅拷贝对象的引用,同时也拷贝对象的实体,也就是它的地址。它将对象的所有层次都拷贝了。这样进行深拷贝后两个对象相互独立,其中一个对象的改变不会影响到另一个对象。
浅拷贝:仅仅拷贝对象的引用,但是不拷贝对象的地址。它只拷贝对象的第一层。这两个对象的引用其实指向同一块地址,相当于一个身份证ID的人有多个外号,而这些外号都是这一个人。这样这些对象之间会相互影响,一个对象改变,其他也跟着改变。在这里插入图片描述

二、场景

基本类型对象赋值:

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
console.log(a); // a变成了[1,2,3,4]

自定义对象:

var obj = {number:125};
var obj2 = obj;
obj2.number = 126; // obj2.number改变了,
console.log(obj.number); // 126,obj的number跟着改变

这是因为javascript默认是浅拷贝,拷贝完之后的引用指向同一片地址,改变其中一个值,其他的值也会改变。
显然浅拷贝将不同对象的

三、如何实现深拷贝

思路:赋值只能实现第一层的拷贝,我们递归拷贝对象的每一层。

function deepClone(obj){
  const objClone = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 判断ojb子元素是否为对象,如果是,递归复制
        if (obj[key] && typeof obj[key] === 'object') {
          objClone[key] = this.deepClone(obj[key])
        } else {
          // 如果不是,简单复制
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
  }

这样即可实现深拷贝。

版权声明:本文为m0_38085777原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_38085777/article/details/87881404